Hi all, new to the list. I recently started a complete redesign of my Web site, and because cross-browser support for CSS3 is finally on the rise, decided to throw in some goodies in the form of rounded corners and RGBA backgrounds.
But while working on my navigation list I discovered something strange. I am styling hyperlinks that have no background color or border until being in a hover state. I have extra padding in the non-hover state to compensate for the width and height added by the border so that the sizes match and it just appears as though the links are being selected, without moving. And yet when I hover over them, they are shifting to the left because the hover state is somehow bigger than the non-hover state. I have tried to correct this both by tweaking the left margin and the padding, and although I can get it to look right in certain text sizes, when I zoom in or out, the shifts become parent again (everything's in ems so the shifts are exaggerated relative to the text size). I have come up with a solution but it involves applying an invisible background color and border using RGBA. While it works nicely, it won't work for the majority of browsers so I can't really rely on it. I have created a test page demonstrating the two methods: http://www.nospoon.tv/test/bgcolor.html. I have tried this in Firefox 3.5.3 and Chrome 3.0.195.27 on Windows XP and the result is the same. Oddly enough, IE7 renders them exactly the opposite. So, barring that, how do I get the first example to render the same as the second in 2.1 without using the same code? Thanks! ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
