IE6 margin problem with <li> element

[NWhite]

Hi all,

I'm trying to indent <li> items using:

li {
margin: 0 0 0 50px;}

So I expect something like the following to indent 50 pixels from the left
margin:

<ul>
<li>Item one</li>
<li>Item two</li> [...etc]
</ul>

This works fine in NS7, but in IE6 the indent only occurs after the left
floated menu-bar has been cleared. In fact, even the "bullets" don't appear
until the left float has been cleared. You can see this by resizing the
homepage (on the link above) to a narrow width. Is this an IE6 bug, and, if
so, is there a workaround? Or, of course, have I made some error that I
can't spot?

The site I'm working on is at www.nowpc.co.uk

[Quick note - this site is very much under construction and I'm aware of a
bunch of issues with it, including invalid CSS (at time of posting) caused
by using proprietary CSS "filter:blendTr ans". However, in tests (on local
machine), the problem happens with or without this code. Just so you know,
I'm currently removing this code from the site altogether, so it won't be
there for long... :-) ]

Many thanks in advance,
Neil White

[NWhite]

From previous:

[Quick note - this site is very much under construction and I'm aware of a
bunch of issues with it, including invalid CSS (at time of posting) caused
by using proprietary CSS "filter:blendTr ans".

The CSS has been repaired and now validates. The problem with the <li>
element remains... :-(

Neil.

[NWhite]

"NWhite" wrote in message

Hi all,

I'm trying to indent <li> items using:

li {
margin: 0 0 0 50px;}

So I expect something like the following to indent 50 pixels from the left
margin:

<ul>
<li>Item one</li>
<li>Item two</li> [...etc]
</ul>

This works fine in NS7, but in IE6 the indent only occurs after the left
floated menu-bar has been cleared. In fact, even the "bullets" don't appear until the left float has been cleared. You can see this by resizing the
homepage (on the link below) to a narrow width. Is this an IE6 bug, and, if so, is there a workaround? Or, of course, have I made some error that I
can't spot?

This problem can be clearly seen on this page:
http://www.nowpc.co.uk/site4you/siteforyou.html

There is an even more alarming problem with IE6 on this particular page. If
you hover over any of the links in the content to the right, the page bottom
jumps up, obscuring some of the left hand bar. If you then mouse over the
left hand menu, the page jumps back. I've heard of the IE6 "peekaboo"
effect... is this it?

Neil

[NWhite]

"NWhite" <ne********@THI Sneilwhite.org. uk> wrote in message
news:hD******** ******@nurse.bl ueyonder.net...

"NWhite" wrote in message

Hi all,

I'm trying to indent <li> items using:

li {
margin: 0 0 0 50px;}

So I expect something like the following to indent 50 pixels from the left margin:

<ul>
<li>Item one</li>
<li>Item two</li> [...etc]
</ul>

This works fine in NS7, but in IE6 the indent only occurs after the left
floated menu-bar has been cleared. In fact, even the "bullets" don't appear

until the left float has been cleared. You can see this by resizing the
homepage (on the link below) to a narrow width. Is this an IE6 bug, and,

if

so, is there a workaround? Or, of course, have I made some error that I
can't spot?

This problem can be clearly seen on this page:
http://www.nowpc.co.uk/site4you/siteforyou.html

There is an even more alarming problem with IE6 on this particular page.

If you hover over any of the links in the content to the right, the page bottom jumps up, obscuring some of the left hand bar. If you then mouse over the
left hand menu, the page jumps back. I've heard of the IE6 "peekaboo"
effect... is this it?

Well, I've solved both issues by simply flipping the layout horizontally.
Um, thanks for the help...! :-)

Neil