- This topic is empty.
October 13, 2015 at 2:57 pm #209647
I have a nav menu that uses border-bottom to designate currently active pages. Basically the way it’s set up is a border underneath the entirety of the nav bar, and then the active menu item has its own border that lays on top.
The way I achieved this was to apply a transparent border on each item which changes color with active state, and then apply a negative margin to pull the bottom of the container upward to offset that border. Here’s a Pen demoing what I mean..
This works just fine for me, until I zoom in or out with the browser, at which point things become misaligned by fractions of a pixel. Is there anything that can be done? Here are some screenshots:
Zoomed out 10%:
Admittedly difficult to see in the screenshot but if you zoom in/out on the Pen (tested in Chrome/FF) it should be obvious.October 13, 2015 at 4:13 pm #209650
Here it is in context since I decided that those screenshots were pretty useless. This does a much better job illustrating why it’s a problem (or is it? should I care about how things align when users zoom the window? is there a consensus on that?)October 14, 2015 at 8:27 am #209683
That doesn’t fix it for me at all— it’s not broken at all zoom levels, 50% and 200% both seem to be fine regardless of the box sizing property.
The size of the border also seems to matter… I couldn’t reproduce the issue with a 10px border, 3px was worse than 5px, etc. It’s not just ‘bigger borders are better,’ either, because I was able to reproduce with a 22px border.
Very frustrating :(October 14, 2015 at 8:51 am #209694
The shadow does seem maybe a bit better as far as maintainability but it definitely doesn’t fix the issue.
I’m aware that fractional pixels aren’t really a thing and it’s definitely a rounding issue but I don’t understand why the two boxes don’t round the same way given that one is sized by the other.
Probably just going to have to mark this as a won’t-fix and move on for now :/
- The forum ‘CSS’ is closed to new topics and replies.