[thelist] Display block on list items in IE

[Mark Groen]

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.