Full a:hover backgound not "live" in IE, OK in FF

Similar markup has worked for both before

[kiwibrit]

I have a vertical row of nav buttons for the LH side of my page.

In Firefox, when the mouse pointer is hovered over any part of the field, text or just background, the a:hover properties show. However, In IE6, the hover properties show only if the text is hovered over - the button is dead if just the background is pointed at.

I would like the buttons to behave in IE as thy do in Firefox. I'd be grateful for advice. On my own, I'm defeated. Similar coding has worked OK for me before.

Here's the CSS:

/************* #sectionLinks styles for LH nav buttons ***************/
#sectionLinks {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
float: left;
border-bottom: 1px solid #E6E6E6;
width: 80%;
margin-left:0;
margin-top:.5em;
margin-bottom:1em;
} 
#sectionLinks a:link{
border-top: 1px solid #990000;
padding: 2px 0px 2px 10px;
}
#sectionLinks ul { 
 list-style: none; 
 margin: 0; 
 padding: 0; 
 font-size: .8em; 
 line-height: 1.2em; 
} 
#sectionLinks ul li { 
background-color:#990000;
margin-bottom:.5em;
}
#sectionLinks a:link, #sectionLinks a:visited{
text-decoration: none;
color:#FFFFFF;
}
#sectionLinks ul a:link, #sectionLinks ul a:visited {
display: block;
}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#sectionLinks li {border-bottom: 1px solid #990000;}
/* fix for browsers that don't need the hack */
html>body #sectionLinks li {border-bottom: none;}
#sectionLinks a:visited{
color:#FFFFFF;
border-top: 1px solid #990000;
padding: 2px 0px 2px 10px;
}
#sectionLinks a:hover, #sectionLinks a:focus{
border-top: 1px solid #E6E6E6;
color:#0000FF;
background-color: #FFFF66;
padding: 2px 0px 2px 10px;
}

[coopersita]

Try adding display:block to the a:hover.

[kiwibrit]

Unfortunately,

#sectionLinks a:focus, #sectionLinks a:hover{
display:block
border-top: 1px solid #E6E6E6;
color:#0000FF;
background-color: #FFFF66;
padding: 2px 0px 2px 10px;
}

does not resolve the problem. I even tried removing #sectionLinks a:focus - still no joy. Very frustrating.

[coopersita]

Is the ; after display:block missing in the actual code, or you just missed it when posting in the forum?

[kiwibrit]

I can't believe I did that. But correction doesn't solve the problem, sadly.

[coopersita]

I think I found the solution in A List Apart (Sliding doors 2):

Fortunately for us, we can exploit a different flaw in IE/Win’s implementation of CSS, forcing the expansion of the clickable region in this browser, without needing to guess at an arbitrary width. All we need to do is specify a small width for the anchor. Most browsers will pay attention to — and honor — the width property for a block-level element, even if the contents inside the element don’t fit within that width. The element will shrink to the specified width, even if it makes the text inside poke beyond the element’s boundaries. But IE/Win will only shrink the element to the width of the longest non-wrapping line of text.

So even if we specify a tiny width for the anchor (like .1em), IE/Win will still allow the anchor to be as wide as the text inside. At the same time, IE will also expand the clickable region to fill the entire tab:

#header a {
float:left;
display:block;
width:.1em;
background:url("right.gif")
no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}

This makes no sense whatsoever, as the two concepts work in direct opposition to each other. But it works, and fixes the clickable region for IE/Win. We need to keep in mind that other browsers honor this width specification, and will actually attempt to shrink the width of each tab down to .1em + padding. Happily, IE/Win (6.0 and lower) also doesn’t understand the CSS child selector — so we can use one to reset the width of the anchor back to “auto” for all other browsers, allowing the tabs to expand and contract as normal:

#header > ul a {width:auto;}

[kiwibrit]

coopersita, thanks for your help on this.

Following p on your suggestion, I found the following CSS ( additional to that already discussed) achieved the desired effect:

#sectionLinks a {
display:block;
width:100%;
text-decoration:none;
color:#765;
}

#sectionLinks > ul a {width:auto;}

Even with the a width set to 100% ( the width is limited by an enclosing div to sectionLinks), the additional child width:auto was required to overcome a slight anomaly in appearance in Firefox.

Now I have to figure out why the navbars have gone walkabout in Opera ..... ;-)