PDA

View Full Version : Nested UL Displays properly in IE6 but not in FF (go figure)



betoranaldi
Nov 16th, 2006, 10:57 PM
I was hoping someone could help me out here. I am at a loss with this one. the page below displays properly in IE but not in FF.

Hopefully someone sees my error.

Thanks
Brian


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
ul.mainnav { list-style-type:none; margin:0; padding:0; }
ul.mainnav li { float:right; margin:0; padding:0; }
ul.mainnav li a:link, ul.mainnav li a:visited { font-weight:700; color:#339E35; text-decoration:none; display:block; margin:0; padding:7px 10px; }
ul.mainnav li a:hover { font-weight:700; color:#00546B; text-decoration:none; background-image:url(i/bg_blue_bar.gif); background-position:bottom; background-repeat:repeat-x; display:block; margin:0; padding:7px 10px; }
ul.mainnav li a:active { font-weight:700; color:#339E35; text-decoration:none; display:block; margin:0; padding:7px 10px; }

ul.mainnav li a.activenav:link, ul.mainnav li a.activenav:visited { font-weight:700; color:#666D70; text-decoration:none; display:block; margin:0; padding:7px 10px; }
ul.mainnav li a.activenav:hover { font-weight:700; color:#00546B; text-decoration:none; display:block; margin:0; padding:7px 10px; }
ul.mainnav li a.activenav:activ { font-weight:700; color:#666D70; text-decoration:none; display:block; margin:0; padding:7px 10px; }

li.mainNavDropdown ul { background-color: #FBFBF9; border: 1px solid #ddd; padding:0; margin:0; list-style-type: none; font-size: .9em; font-weight:700; color:#333; width: 280px; }

li.mainNavDropdown ul li a:link { padding: 4px 12px; display: block; margin:0; background-image:url(i/bullet_arrow.gif); background-position: 5px 8px; background-repeat:no-repeat; text-decoration: none; color:#333; width: 256px;}
li.mainNavDropdown ul li a:visited { padding: 4px 12px; display:block; background-image:url(i/bullet_arrow.gif); background-position: 5px 8px; background-repeat:no-repeat; text-decoration: none; color:#333; width: 256px;}
li.mainNavDropdown ul li a:hover { background-color: #ddd; text-decoration: underline; color:#333; width: 256px;}
li.mainNavDropdown ul li a:active { padding: 4px 12px; display: block; margin:0; background-image:url(i/bullet_arrow.gif); background-position: 5px 8px; background-repeat:no-repeat; text-decoration: none; color:#333; width: 256px;}

li.mainNavDropdown ul li ul { border:none; }
li.mainNavDropdown ul li ul li a:link { font-weight: normal; padding: 4px 15px 4px 25px; display:block; text-decoration:none; background-image:url(i/bullet_middot.gif); background-position: 20px 11px; background-repeat:no-repeat; color:#333; width: 240px;}
li.mainNavDropdown ul li ul li a:visited { font-weight: normal; padding: 4px 15px 4px 25px; display:block; text-decoration:none; background-image:url(i/bullet_middot.gif); background-position: 20px 11px; background-repeat:no-repeat; color:#333; width: 240px;}
li.mainNavDropdown ul li ul li a:hover { font-weight: normal; background-color: #ddd; text-decoration: underline; color:#333; width: 240px; }
li.mainNavDropdown ul li ul li a:active { font-weight: normal; padding: 4px 15px 4px 25px; display:block; text-decoration:none; background-image:url(i/bullet_middot.gif); background-position: 20px 11px; background-repeat:no-repeat; color:#333; width: 240px;}

-->
</style>
</head>
<body>
<ul class="mainnav">
<li><a href="#">List Item 3 </a></li>
<li><a href="#" class="activenav">List Item Active </a></li>
<li class="mainNavDropdown"><a href="#">List Item 1 </a>
<ul>
<li><a href="#">List Item</a>
<ul>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul>
</li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul>
</li>
</ul>
</body>
</html>

_Aerospace_Eng_
Nov 16th, 2006, 11:59 PM
You seem to be having the same issue as this person. And its not Firefox that is wrong its IE that is wrong (go figure).

http://www.codingforums.com/showthread.php?t=100742