Sorry about the confusing title but this bug is just strange.
I am working on some buttons and noticed that if my button has a border + border radius + overlay ( used for gradients ) on specific font size Chrome is displaying 2 px right border instead of 1 .
Here is fiddle
http://jsfiddle.net/3x73q9md/
I am not sure if my overlay container is inheriting something but I cant find the fix except changing the font size.
Also tried
font:0/0 a;
on overlay container and all sorts of CSS hacks but this just makes no sense.
The button is relative and overlay absolute stretched in all directions.
Can someone please explain what this is.
Please note that I am not asking to add/remove/modify current html structure. Just need to understand why this is happening and possible solution for it.
change .overlay class border-radius: inherit; to border-radius:0;
.overlay {border-radius:0;}
Demo:http://jsfiddle.net/3x73q9md/1/
Related
I have encountered a strange bug using my OpenCart website in Chrome. The product images are not showing up but I see the white area where they should come.
If a product doesn't have an image it's aligned to the left but in this case I can see the white area where the picture normally is.
And here's the crazy part, if I click on inspect element, suddenly the image appears.
Some css code
.product-list .image {
float: left;
margin-right: 10px;
overflow: auto;
}
In the CSS you need to set the width and height attributes.
That is weird. Regardless, things to check:
Z-index: The outer box that surrounds the image might be "above" the image itself. Add z-index to the image with a value of 9999 to check
Position: if it's parent container or god knows what else has a weird position it could be affecting where the child element, in this case an image is appearing.
Disable JS - Javascript might be causing an issue here, try disabling it to check.
Also, when you use chrome dev tools, you are technically "hovering" on the image. And you say it suddenly appears. So I'd take a look at your :hover rules as they apply to images. A lot of sites will use a sprite technique that shows one image in normal state, and then shift the background to a different part of the same image on hover. Your normal state could be empty and the hover then moves the bkgd position to the image you want.
Let me know how this turns out.
More scenarios to replicate this issue
1. Close inspect if not already opened.
2. Resize inspect if already opened.
3. Resize browser window.
Just to follow up on this issue, Mary's answer is the correct one, but for our circumstances it was important not to set a width and height in order to maintain responsiveness. But apparently setting width and height to auto works just as well, even though it makes no difference in appearance.
So, since opening the Web Inspector resizes the page in some cases, you should look into:
resize handlers on JavaScript side that might be causing your images to show up
media queries that satisfy certain width and only show images then on CSS side
Picture element having media queries that
aren‘t covering the width you are viewing this with.
For me this was the Picture element having a gap in its media attribute definitions (<source media=(min-width: 1824px)">).
I have a CSS3 transition opacity on a image responsive image (max-width: 100%) contained in tag, on hover it changes size fractionally and then goes back to normal, when you remove the cursor it again does the same adjustment, I can't see anything which would cause this to happen. Using the chrome inspector turning styles off and on it vanishes when either opacity or the transitions are toggled off
Can anyone shed any light on this?
At first see this answer enter link description here
The second, try to check element width, if it's 300.12px (float number width), try to fix width so it would be rounded.
Sometimes this problem dissapear after applying position:relative to the image.
Chrome has bugs. So there could be other solutions, and problems with that. It might be so, your case has no solution. Like round corners + zoom animation.
On roseannebarr.tumblr.com, when you hover on my icons instead of them going up naturally they are cut off even thought I don't have a set height. I know my HTML is screwed up because I'm using a million ids but my page works off of browser bugs so just ignore it. Any ideas?
This was probablly the dumbest question ever sorry.
They are not cut off, you make the container smaller by moving the image outside the container using a negative top margin.
A simple solution is to put the black background on the #block style intead of on the #outer style. That way the image gets the background instead of the container, so the background follows the image when it moves instead of shrinking with the container.
Are you talking about the black background getting cut off when you hover over it? Do you want the whole icon including the background to go up? If so, you should just put the :hover on #outer instead of #block:
#outer:hover {
margin-top: -10px;
}
Don't know if that's what you mean. If not, let me know. :)
How can we avoid the shake when we hover over an element and set its font to show bold? Here is a sample of the code I wrote:
http://jsfiddle.net/8v4Ag/
Is there a technique to avoid the shaking? Suppose I hover on LogOff, the font goes bold, but that line of text moves a little to the right due to the text getting emboldened. If we hover away it again shakes.
Is there any CSS way of avoiding such shakes?
I have solved this by having a non visible duplicate text with the hover style. Use visibility:hidden rather than display:none to make it take up space, and position it beneath the original text. This invisible element will make sure the text is wide enough for the hover state.
Her is an example
Some ideas
easier: just change the color (or background-color) ; instead of black, you set color:#333, and when hovering: #000 - this way the text size does not change.
a small absolutely positioned div fixed size (width, height) with a higher index at the location where you want the button / text to change. When the size of the div changes a bit, it won't affect the neighbors. This solution requires some cross-browsers testing.
I am not sure what you mean by "shake", I have faced the same issue of buttons getting larger when I have the text bold on hover. I think I ended up "solving" it by changing the design so it didn't require the bold on hover. #ring0's second solution might work, but it would be a pain to implement. I would suggest using his first suggestion, you could even add background images (maybe a gradient) that would change on hover, and change the font-color.
If you are determined to use BOLD for hover you aren't going to be able to avoid this problem. Bold and Normal fonts are different fonts so they are NOT going to align perfectly like you want and you'll see this visual effect. If you are using a browser that supports it, perhaps try adding a text-shadow: style on hover instead. Or change color: from gray to black...
If by shaking, you mean the Help or LogOff "boxes" moving when you hover over the other, then you need to widen the LogOff and Help boxes to be bigger than the bolded version.
You could set a fixed width; however, I would recommend not using a strong styling on the item. I would also not recommend simply changing the color, as this does not address any accessibility issues for someone who is colorblind. If you simply add a border and make the background a bit darker, that should do the trick and be most compatible cross-browsers.
Keep in mind, you will get the same "shake behavior" if you are simply adding a border, so be sure to add a border to match the existing background initially, then change the color of the border upon hover.
I thought something like this might do it:
a { padding:10px; }
a:hover { padding:8px; font-weight:bold; }
depending on your original font-size &
line-height are set to the same px value
I've an image that is wrapped in an anchor tag that, through jQuery, triggers an action somewhere else on the page. When I click on the image, two tiny 1px by 1px boxes show up in the upper and lower left corners of the image.
My CSS styles explicitly state no borders for images: a,img { border: 0; }
It also seems to only happen in Firefox 3. Anyone else had this issue?
Here's a screenshot of the left part of the image (the graphic has a white background):
alt text http://neezer.net/img/ss.png
It's not the background, or the border of any other element. I checked.
Is your anchor tag under or overlining?
Set the a and a:hover in that situation to text-decoration: none.
Happened to me, and the reason it was two tiny boxes is because the width of the element didn't quite extend, or something.
Good luck!
D'oh: I see it's upper- and lower- LEFT boxes. Might be something else, like background or border of containing element peeking through.
Have you tried also setting border-style:none;? It's a long shot, but you never know...
What is the display property of the anchor element? You can try setting display property of as "block" and make sure that the inner IMG elements float setting is set to "none".
I've chalked this up to a bug with Firefox 3 & jQuery 1.2.6, since I've yet to replicate it with any other version of Firefox or jQuery.