By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,846 Members | 1,836 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,846 IT Pros & Developers. It's quick & easy.

IE6 margin problem with <li> element

P: n/a
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:blendTrans". 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
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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:blendTrans".


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

Neil.
Jul 20 '05 #2

P: n/a
"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
Jul 20 '05 #3

P: n/a
"NWhite" <ne********@THISneilwhite.org.uk> wrote in message
news:hD**************@nurse.blueyonder.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
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.