IE nested list: li element spans child ul

[heisters]

I have a nested list like this:

<ul>
 <li>Stuff</li>
 <li class="myClass">Things</li>
 <ul>
  <li>Foo</li>
  <li>Bar</li>
 </ul>
 <li>Other stuff</li>
</ul>

It works nicely, FF can apply CSS to it just as I would expect. However, any CSS styles that apply to the myClass class gets applied to its child ul in Internet Explorer. eg. If I were to do:

.myClass {
 background: red;
}

The nested ul will have a red background, not just the list item.

I would think this would be a common problem, but I haven't been able to find any solutions on google.

Thanks very much for any help. Let me know if you would like to see a less abstract example.

[Robin_reala]

That HTML isn't correct. <ul> elements can only contain <li> elements. You'll need to nest each sub<ul> inside a parent <li>.

[benihana]

Your nesting in the example is incorrect.

It should be.

<ul> 
<li>Stuff</li> 
<li class="myClass">Things
<ul> 
<li>Foo</li> 
<li>Bar</li> 
</ul> 
</li> 
<li>Other stuff</li> 
</ul>

However this will make the problem you are having appear in both browsers.

to over come this, you ned to overwrite the myclass bg, like so:

.myClass {
background: red;
}

.myClass ul{
background: green;
}

[heisters]

Okay, that works mostly. Thanks. The problem now is with borders. The background is a bad example because by setting the "myClass ul" you can create an overlapping bg that hides the myClass bg. However, borders don't overlap. So if you set it like this:

.myClass { 
 border-left: thin solid red; 
} 
.myClass ul { 
 border-left: none; 
} 

You end up with something like this (forgive ASCII):

¦Thing 
¦ ¦Foo 
¦ ¦Bar 
Other Stuff 

Which makes sense, because the li.myClass is that big. What I'd like is this:

¦Thing 
  ¦Foo 
  ¦Bar 
Other Stuff 

Now, you could just apply the border styling to the contents of li.myClass like so

.myClass a { 
 border-left: thin solid red; 
} 

However, this has problems if the line wraps. In that case, the top line of the text has a border, but the wrapped line doesn't. I would like a border on both. So this:

¦Long wrapping 
¦text 
 ¦Foo 
 ¦Bar 

as opposed to

¦Long wrapping 
text 
 ¦Foo 
 ¦Bar 

Any suggestions for that? Thanks much for the help you've offered so far.

[Setek]

I don't know if there are better ways around this, but I would:

1. Set the parent

<li>

a background image of a border on the left (

li { background: #fff url('images/border.jpg') repeat-y; }

)

2. Set the nested

<ul>

to remove its default margin and replace it with padding instead (

li ul { margin: 0px; padding: 5px 10px 5px 25px; }

)

3. Set nested

<ul>

's to have another background image, which is your different type of border (whether it's just an image with 10px of whitespace to the left of it or whatever)

Check: Dependent on whether you want this border to show throughout the entire parent

<ul>

, you can set the background image to the

<ul>

itself, instead of the

<li>

in step 1.

Hope that helps :)

[heisters]

The solution I ended up using, which is a slightly different effect, but works in IE without javascript, is to just use an a:hover rule that sets the left border, then apply a display: block to the links so that the border spans all lines of the link. A little margin/padding manipulation on hover ensures that the new border doesn't displace the text.