Odd css button behavior

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

tomb - 21 May 2007 23:30 GMT

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;

}

Reply to this Message

JD - 26 May 2007 09:22 GMT

> 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?

Reply to this Message

tomb - 27 May 2007 16:02 GMT

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

>> 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.
[quoted text clipped - 4 lines]
>
> Your code example works here. Can you post a URL instead?

Reply to this Message

JD - 27 May 2007 20:51 GMT

> JD,
>
[quoted text clipped - 7 lines]
>
> Thanks for anything you can point out.

In IE5 or IE6, when you display an <a> element 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.

Reply to this Message

tomb - 27 May 2007 21:34 GMT

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

Tom

>> JD,
>>
[quoted text clipped - 11 lines]
> 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.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / May 2007

Odd css button behavior