I've been experimenting with making a HTML/CSS navigation bar with chevron-shaped list items. I've made my code available here: https://github.com/twslankard/css-chevron-bar/blob/master/index.html
Since my question is fairly specific, I'm offering up the code as public domain in the off chance that one of you CSS wizards will help me. :)
Now for my question. I've been trying to design the bar so that it scales properly, e.g. when someone modifies the font-size property of ul.chevronbar li or when the user hits Control+ or Control- in the browser.
I tried using two different CSS resets, both Eric Meyers Reset CSS 2.0 and YUI 3. However, in Firefox the scaling/zooming "mostly" works, and in Chrome it does not work (especially when zooming in). If possible, I'd like some advice on how to get this to work better in Chrome.
Here's an image illustrating the issue. Your help is greatly appreciated.
EDIT: this is what I ended up with eventually. Pardon the messy CSS. I'll get around to cleaning it up later.
https://github.com/twslankard/css-chevron-bar-2
EDIT 2: Another person generously provided their solution to this problem here: http://jsfiddle.net/pXBTK/3/