Forum Moderators: not2easy
Thank you for the help!
.bullet_first {list-style-image:url(images/image.gif); font-size:18px; font-weight:bold; line-height:26px;}
.bullet_second { list-style-type: disc; font-size:14px; font-weight:bold; line-height:18px;}
<ul>
<li class="bullet_first">First level copy to go here</li>
<li class="bullet_first">First level copy to go here</li>
<ul>
<li class="bullet_second">Second level copy to go here</li>
</ul>
The html isn't quite valid IMHO, either a </ul> is missing beofer the second <ul> or either the second <ul> needs to be inside the <li> (and then at the end the first <ul> needs to be closed).
As it is now, the code makes the browser guess, always hard to predict.
I have tried the </ul> ideas but with no luck. They remove the indents from the "bullet_second" so both "bullet_first" and "bullet_second" sit along the same indent. e.g:
• bullet_first
• bullet_second
Thank you though
valid html is important as browsers will try to interpret what you meant just as I did above. Not leaving the "what you meant" unclear is done by checking the structure of the html and validating there is nothing funny about it anymore.
Validating html: [validator.w3.org...]
Validating CSS: [jigsaw.w3.org...]
So how do you write valid html for having nested lists ?
Move the second <ul> inside a <li> from the parent e.g.:
<ul>
<li class="bullet_first">First level copy to go here</li>
<li class="bullet_first">First level copy to go here
<ul>
<li class="bullet_second">Second level copy to go here</li>
</ul>
</li>
</ul>
In most real cases, one doesn't need classes all over, a class on the outer <ul> in most cases will suffice (it's a lot less html and a lot less where you can make errors)
Anyway, putting it together, I'd try to have a look at something like this:
<!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>
<title>untitled</title>
<style type="text/css">
.play li {
list-style-image:url('tiny.jpg');
font-size:18px;
line-height:26px;
font-weight:bold;
}
.play ul li {
list-style-image:none;
list-style-type: disc;
font-size:14px;
line-height:18px
}
</style>
</head>
<body>
<ul class="play">
<li>First level copy to go here</li>
<li>First level copy to go here
<ul>
<li>Second level copy to go here</li>
</ul>
</li>
<li>First level again</li>
</ul>
</body>
</html>
I didn't look at it in anything but FF3, so check it before you deploy it.
Awesome thank you for that. I totally understand where you are coming from, thanks. I am currently just starting out and learning the ropes so thank you for the advice.
I have tried the tip and it works nicely, thanks
