On Thursday, October 22, 2009 6:17:15 am Hugh Guiney wrote: > 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? >
It looks like a rounding error. Since with font-size: 1.4em, you're setting the font size to 22.4px, it runs into trouble occasionally. And I can never get it to shift more than 1px, no matter how much I zoom. I didn't test it throughly, but resetting the font-size to 1.375em (22px off of a 16px default), appeared to make the shifting go away. ---Tim ______________________________________________________________________ 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/
