Forum Moderators: open
Here is a test case (taken for actual code so iot's a little long and positioning isn't correct. I've made the CSS internal for this example .... but have tested it externally and get same results:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
a:link{
color:#FFFFFF;
text-decoration: none;
}
a:visited{
color:#FFFFFF;
}
a:hover{
color:#FFCC00;
}
body{
background:#00FF00
font:10pt "Comic Sans MS";
min-width:600px;
text-align:center;
text-transform: none;
background: #0000FF;
}
.shortheight1 {
line-height: 80%;
}
ul.menulcol{
text-align:justify;
font-size: 160%;
font-weight: bold;
list-style: disc outside;
color: #FFFFFF;
margin-top: 8%;
margin-left: 60px;
line-height: 200%;
}
.coltitle {
font-size: 160%;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
margin-top: 2%;
}
}
-->
</style>
</head>
<body>
<div class="coltitle">CANINE</div>
<ul class="menulcol">
<a href="CVacs1.shtml"><li class="shortheight1">2006 AAHA<br>
Canine Guidelines</li></a>
<a href="Cannprot.shtml"><li>Annualized Protocols</li></a>
<a href="CVTypes.shtml"><li>Vaccine Types</li></a>
<a href="CSheltr.shtml"><li>Shelter Guidelines</li></a>
<a href="CFacts.shtml"><li>Fact Finders</li></a>
</ul>
</div>
</body>
</html>
I also validated this and it validated
(Didn't try validating old code - with anchors first - taking your word - if IE works code is probably wrong.)
In IE6 (don't have IE7) the Link Type (a disc in this case)changes color when in 'hover' mode but FF2.0.0.11 doesn't.
If I'm understanding this correctly, the 'disc' is part of the LI, not the anchor. And yes, the anchor needs to be within the LI, as tedster suggests, for it to validate. You need to add a :hover psuedo class to the LI for it to work in FF, but this won't work in IE6 (although OK in IE7). IMHO to achieve this cross-browser you need to use JavaScript.
However, an alternative CSS solution might be to get rid of the list-style-type altogether and to simply have a background-image on the anchor that you can change in the anchors :hover class?
I suspect the best thing is to 'can' the list-style-type ... actually I experimented with custom images for the anchors so have one part done already. Thanks again.
