hover causing 1px shift in whole page

[esllou]

I have a problem I've never had before.

The whole design of my site keeps shifting by a pixel or so whenever I hover over links. The only hover CSS I have is this:

#content a:hover{
color:navy;
text-decoration:none;
border-bottom:1px solid blue;
}

and in the menu:

#right-menu a:hover {
background:#6699CC;
color:#FFF;
text-decoration: none;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding-right:3px;
}

This is in IE. Has anyone seen this one-pixel shift before? It is not in quirks mode either.

[JAB Creations]

I have a 100px div with 100% width hyperlinks...when the hyperlink is focused it adds a very lightly colored border and also a horizontal scrollbar (as the div is set to overflow).

You may want to reduce the width on your a:hover.

Remember box model adds width, border, margin, and padding to get the final width.

You might also try reducing the font-size by 1px on the hover state.

I hope these ideas help you make some progress. :)

John

OHHH...*EDIT* you lastly mentioned that it happens in IE...I am assuming *JUST* IE?

<!--[if IE]>
<link href="style-ie.css" media="screen" rel="stylesheet" title="city" type="text/css" />
<![endif]-->

Read about IE conditional comments here...
[msdn.microsoft.com...]

Basically take the CSS code that isn't working in IE and just mod it in your IE only CSS file (which you should put my quoted code in to your page's header after the main stylesheet). The page will still validate and you can specify versions of IE only or all of them. IECC will work in IE 5.0+.

[esllou]

ok, thanks for that. It worked fine!

[JAB Creations]

No prob, IECC works great for IE specific style bugs. :)