CSS menu mouseover query

Using I/Explorer in Windows XP the mouseover effect only works on the text, but using I/Explorer in Vista it works on the entire table cell. We would like the effect to work on the entire cell for visitors using XP as well. Anyone suggest how/if we can modify the code for this? Here it is --

.buttonscontainer {width: 200px;}
.buttons a {color: #006699;
background-color: #F1F3F5;
padding: 2px;
padding-left: 9px;
display: block;
border-bottom: 1px solid #DDDDDD;
border-left: 6px solid #2872B6;
font: 12px Arial, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: left;}

.buttons a:hover {color: #1E6CA2;
text-decoration: underline;
background-color: #FFFFFF;
border-left: 6px solid #9544F0; }

and here is how the html looks (all within 1 table cell) --

<div class="buttonscontainer">
<div class="buttons">
<a href="intro.htm">Introduction</a>
<a href="essential.htm">The xxx business</a>
<a href="earnings.htm">Financial rewards</a>
<a href="package.htm">The package</a>
<a href="faqs.htm">FAQ's</a>
<a href="guidance.htm">The manual</a>
<a href="additions.htm">Software & website</a>
<a href="testimonials.htm">Testimonials</a>
<a href="benefits.htm">Summary of benefits</a>
<a href="about.htm">About / Contact us</a>
</div>
</div>


Thanks
Mikey
--

 

I take it that you are using IE6 on XP and Vista has IE7 installed hence the difference.

Any chance of a link to the page in question?

 

This is a popular "bug." I doubt it's XP and Vista that's the problem, but IE6 vs IE7. If this is internal only, just upgrade everyone to IE7. Otherwise, you need javascript.

IE6 only obeys :hover on anchors <a> but nothing else. You can add an .htc file from Peterned (sorry I can't find the actual file because I've got it bookmarked on my machine only) or there are like 12 lines of Javascript you can find at the Suckerfish page at HTMLdog.

I believe these 3 are your only choices.

 

OK webdesigner has provided me the solution by PM, as follows:

Simply add a tag height in the css, thus--

.buttonscontainer {width: 200px;}
.buttons a {color: #006699;
height: 20px;
background-color: #F1F3F5;
padding: 2px;
padding-left: 9px;
display: block;
border-bottom: 1px solid #DDDDDD;
border-left: 6px solid #2872B6;
font: 12px Arial, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: left;}

Works great in IE7 also FFox.

MikeyP
==

 

Yup - and here's why. Adding a height trips 'haslayout'. If you do not want to fix the height, and the container itself isn't set to overflow:hidden or auto and is not inside a container that has a height, you can use height:1%; safely there (since % heights are changed to height:auto if the wrapping container has no height declared, but still trips haslayout) - aka the so called 'holly hack'.

 

Thanks deathshadow. nice name ;-(

==