Problem aligning list items in IE

Hello,

I have an unordered list with 3 levels, like this:
<ul class="normalList">
<li>blabla</li>
<ul>
<li>blabla</li>
</ul>
<li>blabla</li>
<ul>
<li>blabla</li>
<ul>
<li>blabla (shifted to the right)</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
</ul>
</ul>
</ul>

The problem I have in IE 6 and 5 is that the list items of the third
level do not horizontally align with each other (the first item is
shifted to the right). It works fine in Firefox.

My CSS is this:

ul.normalList li {
margin: 1em;
padding: 0;
}

Can you help me?

Thank you

Chris

Chris wrote:

Hello,

G'morning.

I have an unordered list with 3 levels, like this:
ul class="normalList"
li>blabla</li
ul
li>blabla</li
/ul

Whoa. The only thing allowed as a direct child of a <ul> is one or
more <li>. Your inner <ul>'s need to be *within* an <li>.

<li>blabla</li>
<li>
<ul>
<li>blabla</li>
</ul>
</li> ...

--
-bts
-This space intentionally left blank.

Beauregard T. Shagnasty wrote:

Chris wrote:

Hello,


G'morning.

I have an unordered list with 3 levels, like this:
ul class="normalList"
li>blabla</li
ul
li>blabla</li
/ul


Whoa. The only thing allowed as a direct child of a <ul> is one or more
li>. Your inner <ul>'s need to be *within* an <li>.

li>blabla</li
li
ul
li>blabla</li
/ul
/li> ...

Sorry to contradict you but no. Your syntax would create additional

bullets. You could write this:

<ul class="normalList">
<li>blabla
<ul>
<li>blabla</li>
</ul>
</li>

But this would not solve my problem: there is still a shift to the
right of the first list item.

Chris wrote:

Beauregard T. Shagnasty wrote:
Whoa. The only thing allowed as a direct child of a <ul> is one or
more <li>. Your inner <ul>'s need to be *within* an <li>.

li>blabla</li
li
ul
li>blabla</li
/ul
/li> ...

Sorry to contradict you but no. Your syntax would create additional
bullets.

But no? Stuff can be outside of a <li></li>? 'Fraid not.

You could write this:

ul class="normalList"
li>blabla
ul
li>blabla</li
/ul
/li

Yes, you could do that and not have an extra bullet. But, you have now
enclosed the child <ul> within the outer <li> which is what I was
commenting on that you were doing wrong.

But this would not solve my problem: there is still a shift to the
right of the first list item.

Provide a sample URL.

--
-bts
-This space intentionally left blank.

Beauregard T. Shagnasty wrote:

Provide a sample URL.

Here it is: http://ivredimages.free.fr/produits.php

See the page with IE6 or IE5.x

Thank you

Chris wrote:

Here it is: http://ivredimages.free.fr/produits.php

See the page with IE6 or IE5.x

Win2K, IE6 and Firefox 1.0.3 look pretty much the same to me. Did your
original effort have the nested <ul> outside of an <li>?

Asides:
1. <title>Untitled Document</title>
2. It won't fit in my 800px wide browser window without horizontal
scrollbar.
Otherwise, looks good.

--
-bts
-This space intentionally left blank.

Chris wrote:

Sorry to contradict you but no. Your syntax would create additional
bullets. You could write this:

ul class="normalList"
li>blabla
ul
li>blabla</li
/ul
/li

The only difference between yours and Beauregard's is that you have

text for the <li>.

But this would not solve my problem: there is still a shift to the
right of the first list item.

Did you try it with the correct syntax?
This goes a *lot* faster if you provide an URL demonstrating the problem.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Beauregard T. Shagnasty wrote:

Chris wrote:


Beauregard T. Shagnasty wrote:

Whoa. The only thing allowed as a direct child of a <ul> is one or
more <li>. Your inner <ul>'s need to be *within* an <li>.

li>blabla</li
li
ul
li>blabla</li
/ul
/li> ...


Sorry to contradict you but no. Your syntax would create additional
bullets.


But no? Stuff can be outside of a <li></li>? 'Fraid not.

I think the point is that that's not the way a nested list works. He wants

* Level 1
* Level 2
* Level 2
* Level 1
* Level 1

Your way gives

* Level 1
* *Level 2
*Level 2
* Level 1
* Level 1

or something like that.

You could write this:

ul class="normalList"
li>blabla
ul
li>blabla</li
/ul
/li


Yes, you could do that and not have an extra bullet. But, you have now
enclosed the child <ul> within the outer <li> which is what I was
commenting on that you were doing wrong.

No, you were commenting that he can't have child UL inside parent UL,
which is correct. This is child UL inside parent LI, which is perfectly
good HTML (though I would then also put the "blabla" right after the
<li> tag into its own explicit block; otherwise, the UA will wrap it in
an anonymous one).

But this would not solve my problem: there is still a shift to the
right of the first list item.

Provide a sample URL.

Yes, please, I'm likewise not seeing why this would happen. I use this
approach all the time.

Beauregard T. Shagnasty wrote:

Chris wrote:

Here it is: http://ivredimages.free.fr/produits.php

See the page with IE6 or IE5.x


Win2K, IE6 and Firefox 1.0.3 look pretty much the same to me. Did your
original effort have the nested <ul> outside of an <li>?
For me, it is okay under Firefox. But under IE, the first line item is

shifted to the right a few pixels. The <ul> are nested inside <li> in
this page.

Asides:
1. <title>Untitled Document</title
Yes I know but this page is just an attempt to find the right design.

There are still a few things I do not quite like.

2. It won't fit in my 800px wide browser window without horizontal
scrollbar.
The width of this design is 800px. I should make it a bit smaller then.

Thank you for your remarks.

Harlan Messinger wrote:

No, you were commenting that he can't have child UL inside parent
UL, which is correct. This is child UL inside parent LI, which is
perfectly good HTML

...except that in his first post, the child UL was not inside an <li>.
Easy to miss that at a glance.

(though I would then also put the "blabla" right after the <li> tag
into its own explicit block; otherwise, the UA will wrap it in an
anonymous one).

So would I. <g> My point was to show that UL needs to be inside LI.

Provide a sample URL.

Yes, please, I'm likewise not seeing why this would happen. I use
this approach all the time.

Did you see his sample page? It appears to be (now) correctly written.
(though it has a couple of other unrelated errors.)

--
-bts
-This space intentionally left blank.