1. Home
  2. Forums Index
  3. Browser Side / CSS 5:24 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Sub list background problem

         

greencode

4:47 pm on Feb 7, 2010 (gmt 0)

10+ Year Member Top Contributors Of The Month



I'm trying to create a list and then have sub items within that list. The background for list items is yellow (for this example anyway) and the sub items background is orange. Now, this works until I start adding padding (to indent the lists) and that's when IE decides to continue the yellow background of the main list item down through the sub items. I'm sure this is something very simple but I've been going through it now for a while and can't figure it out. Any help would be greatly appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css" title="text/css">
<!--
ul#options {
padding: 0;
margin: 0;
}

ul#options ul {
padding: 0;
margin: 0;
}

ul#options li {
background-color: yellow;
margin: 0 0 2px;
list-style-type: none;
padding-top: 0;
padding-left: 10px;
padding-right: 0;
}

ul#options ul li {
background-color: orange;
margin: 0 0 2px;
padding: 0 0 0 20px;
}
-->
</style>
<title></title>
</head>
<body>
<ul id="options">
<li class="select"><a href="#">Option 1</a></li>
<ul>
<li><a href="#">Sub option a</a></li>
<li><a href="#">Sub option b</a></li>
<li><a href="#">Sub option c</a></li>
</ul>
</li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</body>
</html>

rocknbil

7:04 pm on Feb 7, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



1. You have a half doctype. Use a full doctype to stay in Standards Compliance Mode, Quirks mode will give you unexpected results with some selectors. More about doctypes [webmasterworld.com].

2. (unrelated) Keep the title tag to the top, and title attribute on CSS is not needed (not even sure if it's valid.)

3. You have a ul improperly nested, this is invalid

<ul><li>first item</li>
<ul><li>first nested item</li></ul>
</ul>

This is what you want (You have this, you just have an extra </li>)

<ul><li>first item
<ul><li>first nested item</li></ul></li>
</ul>

4. (Optional approach) With just the changes to the HTML it seems to work in IE, but I've had far better luck zeroing out the LI's and manipulating the anchors instead, I've exaggerated the changes in my version of the CSS for effect.

Working validated example [validator.w3.org]: 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<!-- doctype on one line --> 
<html lang="en"> 
<head> 
<title>Example</title> 
<style type="text/css"> 
#options,#options li, #options ul, #options ul li { 
 padding: 0; 
 margin: 0; 
 list-style-type: none; 
} 
/* if you want them spaced out */ 
#options li, #options ul li { margin: 2px 0 2px 0; } 
#options li a { 
 background-color: yellow; 
 margin: 0; 
 display:block; 
 padding: 3px 4px 6px 12px; 
} 
#options ul li a { 
 background-color: orange; 
 margin: 0; 
 padding: 3px 4px 6px 48px; 
} 
</style> 
</head> 
<body> 
<ul id="options"> 
 <li><a href="#">Option 1</a> 
 <ul> 
  <li><a href="#">Sub option a</a></li> 
  <li><a href="#">Sub option b</a></li> 
  <li><a href="#">Sub option c</a></li> 
 </ul> 
 </li> 
 <li><a href="#">Option 2</a></li> 
 <li><a href="#">Option 2</a></li> 
</ul> 
</body> 
</html>

greencode

7:30 pm on Feb 7, 2010 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thank you so much for this - it's perfect. With regards to the doc type and title tags - I just very quickly made this example - the actual document has exactly what you've said. Thanks again.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 5:24 pm May 1, 2026