Okay, here’s the issue: I’m floating a nav menu right with the goal of it being flush with the right side of it’s container. However, no matter what I’ve tried, the menu is still off by a pixel or less. I’m using a reset.css file, Response Grid System’s 12 column css file, and my own styling css file, of course.
Any help or insight is greatly appreciated! I’m pulling my hair out over this one.
*Note: To replicate the problem, make sure the view is wide enough that the blue background appears on both sides of the white container. Then hover your mouse over the Contact link. You should see that it is off ever so slightly.
Hi ronpat, thanks for the reply. Floating the li elements right produces the same results. But following up on that rounding of fractional pixels. I changed the column widths so that every column width is now a whole number (e.g. 70 and 30 vs 67.6666 and 33.3333 ). This actually made a difference, but for some reason there is still a slight gap. I’ve updated the code to demonstrate.
li {
height: 100%;
width: 33.33%;
float: [color=red]left[/color]; /* change to "[color=blue]right[/color]" */
border: none;
text-align: center;
}
You will have to reorder the list items in HTML to restore the order.
I guess it’s possible that I’m looking at the wrong thing.
BTW: 70 - 30 vs 66.6666 - 33.3334 doesn’t matter. They are both units of percent which the browser has to translate to pixels to render in the viewport.
Sorry I forgot to include the actual link to the code. It appears to be the same link, but the code has been updated. http://codepen.io/anon/pen/rKBnt I had tried floating right previously. It’s hard to distinguish but there is still a slight gap. And thanks for taking the time to help, it’s much appreciated.
Okay, it seems that when I changed the column widths to whole numbers that actually resolved the issue. It’s also become evident that I’m going crazy. I zoomed in on multiple browsers and sure enough the pixels line up perfectly. It must just be tricking my eyes at this point. Thank you so much for the help! I needed that second set of eyes.
The pixel jog is browser width dependent. Sometimes you see it, sometimes you don’t. Change with width of the viewport and it will come and go. You’re not going crazy and changing the widths to whole numbers did not affect the issue. It’s still alive and well in Opera… and Chrome. IE8 and Firefox get it right.
Your to compounded rounding errors. Actually it’s not so much the frame work but, as mentioned by Ronpat the use of percentages for element sizes will lead to pixel errors on some browsers. This of course is compounded if you have nested elements with their own pixel errors.
This is a technique I use, when possible, to eliminate that effect.
That’s the method I advocate also as it cures the pixel gap completely. The last non floated element will stretch to fill the available space on the line automatically. The overflow:hidden creates a rectangular block next to the float (almost like a float) and removing the width allows the element to stretch to the end of the line perfectly (note that ie7 and under would need haslayout to achieve the same effect).
Most grids suffer from this ‘gap’ problem (even bootstrap) because they deal with floated columns and percentages and must round up or down depending on the viewport width. You thus end up with ridiculously long decimal point numbers in an effort to minimise the effect but having 4 or more decimal numbers is usually a sign that something is wrong with the concept.
Some browsers will keep a running total of all the rounding in an effort to minimise the gap and others are not quite so good so you get variances between browsers. Opera used to be the worst offender and would not honour a fraction of a percent at all but luckily the modern versions are ok now although they will still have rounding errors.
Therefore if you want a seamless join between columns then don’t use a grid. Come out of the grid and use a technique such as in Dresden’s post above.
Thanks for the informative response guys! I had a feeling it was the percentages causing grief. I will try to implement dresdens technique, so far I’ve managed to make it significantly less noticeable. It’s good to know what causes the gap so that I can prevent it in the future.
katten, I’ve repeated the tests and the following colored items seem to matter. Paul’s fix seems to depend on floating the list items to the right. Nothing more. No need to apply the “test” fix to the last list item.
If this does not work for you, please post the code in CodePen and tell us more about your testing environment. In what browser(s) are you testing? You’ve mentioned “barely noticable” a couple of times… do you have a retina display?
For me, applying the fix that Paul and DP gave, plus floating the list items to the right, fixes the jog in Opera.