Why is IE stretching my rollover backgrounds?

Im trying to create a rollover effect for my navbar, but as usual, IE
is screwing things up! Everything is fine in Firefox (as usual!) but
IE seems to be stretching the elements to the end of the page when I
Hover over.

http://www.ainewmedia.co.uk/index.asp

ul#navList li a:link, ul#navList li a:visited {
font-family:"Trebuchet MS", Verdana, Arial;
font-size:14px;
color:#FFFFFF;
text-decoration: none;
padding-right: 7px;
padding-left: 5px;
}
ul#navList li a:hover{
font-family:"Trebuchet MS", Verdana, Arial;
color:#FFFFFF;
text-decoration: none;
padding-right: 7px;
padding-left: 5px;
display:block;
background-color:#FF6600;
height: 100%;
width: 100%;
}

I added the height and width to 100% to the above rule to get the
effect.

PS - Ive just noticed the text appears to be jumping up one pixel when
you roll over. Any reason for this???

John wrote:

Im trying to create a rollover effect for my navbar, but as usual,
IE is screwing things up! Everything is fine in Firefox (as
usual!) but IE seems to be stretching the elements to the end of
the page when I Hover over.

Very peculiar effect! At first glance, it appears to be something to
do with a ':hover' pseudoclass.

ul#navList li a:link,
ul#navList li a:visited {
font-family:"Trebuchet MS", Verdana, Arial;
font-size:14px;
color:#FFFFFF;
text-decoration: none;
padding-right: 7px;
padding-left: 5px;
}

All looks fine

ul#navList li a:hover{
font-family:"Trebuchet MS", Verdana, Arial;
color:#FFFFFF;
text-decoration: none;
padding-right: 7px;
padding-left: 5px;
display:block;
background-color:#FF6600;
height: 100%;
width: 100%;
}

Looks a bit odd. It's usually more straighforward to load the CSS
into the A tag, THEN alter the fine detail (colour, background, text
decoration etc) in the :hover. Otherwise you'll experience 'moving
hover' syndrome.

The problem you see is caused by the LI styling having no width. The
hover pushes the width of the LI to fill the page.

I see you're using the inline/block trick to highlight the hover.
This is great, but you're going about it the wrong way. Style the A
tag, changing only the colours in the hover; and fix the width of the
LI, if you want to turn the A tags into blocks.

I added the height and width to 100% to the above rule to get the
effect.

PS - Ive just noticed the text appears to be jumping up one pixel
when you roll over. Any reason for this???

Probably to do with setting the height, but I'd have to check.
There's no need to set the height.

--
K A Nuttall
www.yammer.co.uk
Re-type the e-mail address how it sounds, remove .invalid