Edit #3 - Question rewritten
Issue: border width of anchor tags unexpectedly increase on mouseover when a:hover css selector is used.
Question: Is this a Firefox bug or a CSS behavior I am unaware of?
Requires Firefox 57.0.0 - 57.0.2
Adjust browser page size to 2,000+ pixels.
Run code snippet.
Increase and decrease the width of the browser page using the two-headed horizontal arrow cursor.
Hover your mouse over the link and you will see the border width increase from 1px to 1.11667px.
a:hover {}
a {
border: 1px solid #000;
}
Link
Original Question
This does not happen on Chrome or Firefox 50.0.0 and 56.0.2.
To test this you'll need:
Firefox 57.0.0 - 57.0.2 (the latest version on Dec 13th, 2017).
A large screen around 2,000 pixels.
If your screen isn't that big, you can press cmd - to zoom out. If you're not sure how big your screen is, you can use Firefox's page rulers.
Issue
I've created a js fiddle. Move the vertical column separating the JavaScript and rendered output as far to left as it goes. Make the browser window as wide as you can, and zoom out if you need to. Click Run. Move your mouse over the yellow boxes and take note that nothing happens.
Now, resize the width of the browser window, making it smaller and larger. Hover over the boxes again and you'll see they start moving. For some reason, Firefox is changing the border width from 1px to 1.66667px.
I've found the a:hover CSS selector is causing this issue. If you read the comments in the js fiddle, even just putting an empty a:hover {} in the CSS will cause the issue. I cannot remove the a:hover line from the CSS on our website, unfortunately. I realize I can use outlines instead of borders to fix the rendering issue.
My question is whether this is a Firefox bug or something I don't know about the a:hover selector and borders?
Edit: The desired behavior is for the borders to not change their width.
Edit #2: A simpler js fiddle.
Related
I've got this weird problem which it seems that i simply can't solve (so far). The weird thing is that I've done almost exactly the same layout before for a navigation-bar, which was succesful.
In my navigation bar i have a button (not an actual <button> but a <div> which acts like one through jquery) to the farthest right of it, which has a background color and expands on click. The problem is that in IE and some resolutions of Chrome as well, there's a little white stripe shown beneath this div. Further this makes the child div that expands beneath it have a little gap between the button in the navigation bar and it self. This might not matter to some people (or most), but it's driving me mad - especially considering that i've done it before and used almost the very same css.
The <div> (to be more precise, it's the "quick-download" div) is set to a height of 70px and line-height of 70px, and the same goes for its siblings (and some of them less). However, the parent div shows up as 70.4px in height, which is bugging me out. I've tried numerous "trial-and-error" solutions/attempts, but with no success at all.
EDIT:
An image of the problem can be seen here (i changed background to red to make it more apparent): http://imgur.com/fya0duQ
EDIT 2:
The white space beneath the quick-download div appears only to be showing in IE and Safari on my compute right now.
EDIT 3:
Link to website is removed as the problem is corrected and therefore no longer is useful.
Assuming you mean the "Quick Download" button...
The height of the navigation bar is 75px and the height of the button is 70px, creating a 5px-tall gap.
The reason your navigation bar is 75px is because your image on the left is 60px tall with margin-top: 15px;. If you want the button to be flush with the bottom of the navigation bar, you can either increase the height of the button, reduce the margin-top of the <img id="aktie-skat-logo" ...>, or reduce the image's height.
The CSS in question:
#aktie-skat-logo {
margin-top: 15px;
display: block;
}
I've actually tracked the problem down my self - however, only after checking the problem across different browsers, after posting in here. The hint came in my old version of safari and IE, and didn't show in Chrome - which is consistent with "EDIT 2" in the original post. I found that some links we're 0.4px higher than others, but only 2/5 links.
The problem apparently stems from inserting a FontAwesome icon using the css ::after selector to links that has "children" (subpages). After removing this or making these icons position:absolute the problem is solved.
As to why insering these using ::after I have no idea. The ::after element had display:inline so shouldn't have broken too much in my opinion.
I'm sorry that I might have wasted your time checking my problem and answering, but even though I found the solution my self, it was a help posting in here (wouldn't have found it otherwise). I hope this might help some other people at some point.
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 am sorry for all of the confusion and wrong post type. I will keep playing with it or try to get all the css in order so I can paste it correctly on here.
Thanks for the info and help that you were able to give.
Grady
I am not sure if anyone can help me but for some reason I can not figure out why my nav bar has a 'shadow' without any shadow tag. It is very annoying and I can not figure it out. I am able to change the entire navbar to the same color as the background but then it does not stand out. If you can offer me any advice or things to try that would be great!
Here is a picture of the nav during regular view and then I zoomed in and took another shot.
https://dl.dropboxusercontent.com/u/11217802/nav%20bar%20issue.png
I have tried border: none and box-shadow: none but nothing seems to remove that little overflow.
UPDATE:
I should have posted this to start with. I do not have the complete html/css as I'm using wordpress so the code is not exactly mine to share. You are welcome to view our site here, http://jrummy16.com/test/
I have just been using the console in Chrome or Firebug in Firefox to style it to that point.
Thanks in advance
Grady
This has nothing to do with overflow or box-shadow. What you are seeing at the edge is just the continuation of the background of the parent element.
You can fix this by correcting the positioning of your blue support nav so that it properly aligns to the far edge and doesn't leave the small section showing at the end.
EDIT:
Looking at the actual code, there are two "rogue" pixels that account for your excess right spacing. The first pixel is from the border from css line 394:
#mainmenu.scaled li.menu-item a {
border: 1px solid #E2E2E2;
}
You can either leave this here so the 1px border around elements stays constant, or you can remove it from your last nav using the :last-child pseudo-selector to set border-right:none;
So second rogue pixel comes from a clearing div that you have in the navigation. Deleting this div and applying a CSS clearing fix seems like the best solution. A basic clearing would be setting overflow:hidden; on the container element, but there are more robust css clearing you can use if your situation calls for it.
My guess is it's your padding on your grey box. Set padding:0px; on that get box element and see if that does it.
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.
I made a tabbed box using css, html, and jQuery. I would like to be able display the selected tab slightly larger or taller than the other tabs. When I increase the height and set a negative margin to the parent ul on the selected tab, the top of the border completely disappears. Here is the tabbed box I'm working on. I've been sitting here almost all day with the chrome element inspecter trying every variation I can think to make the selected tab slightly taller and cannot seem to make it work. I've come pretty close messing with the heights, margins etc..but the border on the parent div extends all the way up to the top on the right side:
This is the look I'm going for though; the video library (selected) tab is a little taller than the others. If, in addition to the link, you whould like me to post the code, let me know. I'll be happy to do so.
I've just a quicker tinker on chrome and this seems to do the trick.
If you apply the following to the active tab:
margin-top: 0px !important;
Then set margin-top: 5px; to all li elements.
Deleting this line from your CSS seemed to help me. Try playing around with the styling on a
a:hover, a:active {outline: none;}