Odd css button behavior

[tomb]

In FF 2 and Netscape 7.2 this button works exactly as desired, and that
is hovering anywhere over the button activates the hover action. But in
IE 6, only mousing over the text of the link activates the hover. Can
you see what I'm missing? It's making me crazy!!

TIA

Tom

The html:

<div id="navLeft">
<ul id="navLeftmenu">
<li><a class="navLinkLeft" href="index.html">Home</a></li>
<li><a class="navLinkLeft" href="about.html">About</a></li>
</ul>
</div>

The css:
#navLeftmenu a.navLinkLeft:visited{
color: #FFFFFF;
text-decoration:underline;
background-color: #000055;
border-color: #0000FF;
border-style: outset;
border-size: 3px;
display:block;
}

#navLeftmenu a.navLinkLeft:link{
color: #FFFFFF;
text-decoration:underline;
background-color: #000055;
border-color: #0000FF;
border-style: outset;
border-size: 3px;
display:block;
}

#navLeftmenu a.navLinkLeft:hover{
color: #FFFFFF;
text-decoration: none;
background-color: #0000DD;
border-style: inset;
border-color: #000099;
border-size: 3px;
display:block;
}

#navLeftmenu a.navLinkLeft:active{
color: #FFFFFF;
text-decoration: none;
background-color: #0000DD;
border-style: inset;
border-color: #000099;
border-size: 3px;
display:block;
}

#navLeftmenu li a.navLinkLeft:visited{
list-style-type:none;
display:block;
padding:3px 0px 3px 6px;

}

#navLeftmenu li a.navLinkLeft:link{
list-style-type:none;
display:block;
padding:3px 0px 3px 6px;

}

#navLeftmenu li a.navLinkLeft:hover{
list-style-type:none;
display:block;
padding:3px 0px 3px 6px;

}

#navLeftmenu li a.navLinkLeft:active{
list-style-type:none;
display:block;
padding:3px 0px 3px 6px;

}

[JD]

tomb wrote:

In FF 2 and Netscape 7.2 this button works exactly as desired, and that
is hovering anywhere over the button activates the hover action. But in
IE 6, only mousing over the text of the link activates the hover. Can
you see what I'm missing? It's making me crazy!!

<snip>

Your code example works here. Can you post a URL instead?

[tomb]

JD,

Thanks for your input. Here is the sample page:

http://www.technetcenter.com/declarationonline/

I would really like to have it respond in IE the same way as FireFox,
but I just can't get it to do that. In IE, I have to hover the text for
the button to respond.

Thanks for anything you can point out.

Tom

JD wrote:

tomb wrote:

>In FF 2 and Netscape 7.2 this button works exactly as desired, and
that is hovering anywhere over the button activates the hover action.
But in IE 6, only mousing over the text of the link activates the
hover. Can you see what I'm missing? It's making me crazy!!

<snip>

Your code example works here. Can you post a URL instead?

[JD]

tomb wrote:

JD,

Thanks for your input. Here is the sample page:

http://www.technetcenter.com/declarationonline/

I would really like to have it respond in IE the same way as FireFox,
but I just can't get it to do that. In IE, I have to hover the text for
the button to respond.

Thanks for anything you can point out.

In IE5 or IE6, when you display an <aelement as a block in a fixed
width container, only the text portion of the element will be clickable.
To fix this, you need to give the a element an explicit width.

[tomb]

You, Sir, are a genius! Thanks so much.

Tom

JD wrote:

tomb wrote:

>JD,

Thanks for your input. Here is the sample page:

http://www.technetcenter.com/declarationonline/

I would really like to have it respond in IE the same way as FireFox,
but I just can't get it to do that. In IE, I have to hover the text
for the button to respond.

Thanks for anything you can point out.

In IE5 or IE6, when you display an <aelement as a block in a fixed
width container, only the text portion of the element will be
clickable. To fix this, you need to give the a element an explicit width.