PDA

View Full Version : CSS - Styled List Firefox Query


lux
12-21-2006, 10:26 PM
I have taken this from a magazine example. It works correctly in IE7 but not firefox2.0

would anyone be able to identify what is wrong with the css in this page?

thanks guys


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Styled List</title>

<style type="text/css">

<!--

body {
font: small Verdana, Arial, sans-serif;
padding: 20px;
margin: 0;
}

#navigation {
width: 250px;
}


#navigation a {
text-decoration: none;
}

#navigation hover {
text-decoration: underline;
}

#navigation ul{
list-style-type: none;
padding: 0;
margin: 0;
background: url(level_one_underline.gif) 0 32px repeat-x;
}

#navigation ul ul{
margin-top: 8px;
margin-left: 10px;
padding-top: 10px;
padding-left: 10px;
border-left: 1px dotted #7c7c7c;
background: none;
}

#navigation ul ul ul{
background:none;
padding: 4px 0 0;
margin:0;
border:0;
}

#navigation li{
font: bold 24px/24px Arial, sans-serif;
}

#navigation li li{
font: bold 18px/24px Arial, sans-serif;
}

#navigation li li li{
font: normal 12px/13px Verdana, Arial, sans-serif;
background: url(level_three_gif.gif) 0 0px no-repeat;
padding: 0px 0 4px 20px;
}

#navigation li a{
color: #0072bc;
}

#navigation li li a{
color: #7c7c7c;
}

#navigation li li li a{
color: #222222;
}


-->

</style>


</head>

<body>

<div id="navigation">
<ul>
<li><a href="#">About web design...</a></li>
<ul>
<li><a href="#">Mark-up for the masses</a></li>
<li><a href="#">You've got to have style</a></li>
<ul>
<li><a href="#">Cascading Style Sheets</a></li>
<li><a href="#">How to work with colour</a></li>
</ul>
<li><a href="#">Battling with browsers</a></li>
</ul>
</li>
</ul>
</div>




</body>
</html>

domedia
12-22-2006, 03:33 PM
I can't test your code right now to see what's wrong in FF, but your list is structured wrong. You cannot put a UL directly inside a UL, you need to put it inside another LI like this:
<ul>
<li>
<ul>

lux
12-22-2006, 05:13 PM
cheers for the reply.

heres the working html

and i had one mistake in the css:

#navigation a:hover:{ not #navigation hover {



<div id="navigation">
<ul>
<li><a href="#">About web design...</a>
<ul>
<li><a href="#">Mark-up for the masses</a></li>
<li><a href="#">You've got to have style</a>
<ul>
<li><a href="#">Cascading Style Sheets</a></li>
<li><a href="#">How to work with colour</a></li>
</ul>
</li>
<li><a href="#">Battling with browsers</a></li>
</ul>
</li>
</li>
</ul>
</div>

chriskq
01-02-2007, 12:44 AM
can u or have u put the code online anywhere?

the css styling looks ok to me (i kno dom that it is technically not valid, but i had to make a menu like that and i got it functioning 100% in all browsers... weird client request thou)

lux8uk it may be a good idea if u have a look at mollio, their listing styling is similar and mollio is opensource
http://www.mollio.org/

let us kno if u put it online anywhere

lux
01-03-2007, 08:32 AM
to be honest i was just going through a couple of examples of styling lists from some magazines i picked up, so im not looking to add them to any sites just yet.

that link is great,

whats up with the dom in the example? any pointers would be really cool.