[thelist] Display block on list items in IE
Mark Groen
markgroen at gmail.com
Sat Mar 19 11:44:52 CST 2005
On Sat, 19 Mar 2005 10:05:03 -0500, Michele Foster (WizarDev) <> wrote:
> Can anyone see what I've done wrong. The menu items on the left are not
> "blocked" in IE-based browsers. One must position their mouse over the
> words before the item changes colour (subtle I know) and the item is
> clickable. I'd like the entire width of the menu item clickable, especially
> the "Donate Now" block.
>
> Here's the template page: http://tinyurl.com/6jt3e
I usually apply the hover to the parent ul instead:
<div id="navwrap">
<ul id="navlink">
<li><a href="/author.htm">AUTHOR'S<br />GREETING</a></li>
<li><a href="/overview.htm">OVERVIEW</a></li>
<li><a href="/activities.htm">ACTIVITIES</a></li> etc.
#navlink a:link, #navlist a:visited a:active{
color:#000080;
text-decoration: none;
margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px;
}
#navlink a:hover {
background-color: #FFFFE6;
color: #FF0000;
width: 120px;
margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px;
border-top:1px solid #B6B6DC;border-right:1px solid
#B6B6DC;border-bottom:none;border-left:1px solid #B6B6DC;
}
I didn't see that your style sheet was complete, about halfway down
this page mentions the need to include all the states of the psuedo
hover to make it work:
Note: a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order
to be effective!!
Great learning resource btw:
http://www.w3schools.com/css/css_pseudo_classes.asp
cheers,
Mark
MG Web Services
www.mgwebservices.ca
Your Canadian West Coast web site development and hosting solution.
More information about the thelist
mailing list