margins on li elements with IE

[Thomas Mlynarczyk]

Hello,

I noticed that IE seems to put some kind of default margins on <li> elements
and the only way to get rid of them seems to be asigning negative margins.
To make things worse, IE5 and IE6 seem to have different defaults. Is there
an elegant way to remove these stupid margins?

Greetings,
Thomas

[Spartanicus]

Thomas Mlynarczyk wrote:

I noticed that IE seems to put some kind of default margins on <li> elements
and the only way to get rid of them seems to be asigning negative margins.
To make things worse, IE5 and IE6 seem to have different defaults. Is there
an elegant way to remove these stupid margins?

http://www.alistapart.com/articles/taminglists/

--
Spartanicus

[Anne van Kesteren]

Spartanicus wrote:

Thomas Mlynarczyk wrote:

I noticed that IE seems to put some kind of default margins on <li> elements
and the only way to get rid of them seems to be asigning negative margins.
To make things worse, IE5 and IE6 seem to have different defaults. Is there
an elegant way to remove these stupid margins?

http://www.alistapart.com/articles/taminglists/

In short: applying a 'border-bottom' *or* removing all the spaces
between the elements.

--
Anne van Kesteren
<http://www.annevankest eren.nl/>

[Spartanicus]

Anne van Kesteren wrote:

http://www.alistapart.com/articles/taminglists/

In short: applying a 'border-bottom' *or* removing all the spaces
between the elements.

Teach how to fish.

--
Spartanicus

[Anne van Kesteren]

Spartanicus wrote:

Anne van Kesteren wrote:

http://www.alistapart.com/articles/taminglists/

In short: applying a 'border-bottom' *or* removing all the spaces
between the elements.

Teach how to fish.

You are correct, but from what I can remember, the second method
(removing the spaces), isn't mentioned at all.

--
Anne van Kesteren
<http://www.annevankest eren.nl/>

[Thomas Mlynarczyk]

>>>> http://www.alistapart.com/articles/taminglists/

Thanks for that link - I had been looking for it for some time but couldn't
remember where it was.

In short: applying a 'border-bottom' *or* removing all the spaces
between the elements.

I've put an example of my code online:
http://www.mlynarczyk-webdesign.de/menulist/. These are the problems:

- IE used to leave a space between the menu items, i.e. it made the li
elements a few pixels higher than their contents would require. I added some
negative margins (different ones for IE5 and IE6). Now this seems to work,
even though when I choose a different font size in IE6 (like "smallest" or
"bigger" - but it works with the others), there is still either a tiny space
between the menu items or they overlap. And the mess I had to create in my
CSS does not look very elegant either.

- OP (tested with OP6) overlaps "Subitem One" and "Second Item". Strangely,
if I set a background color for #submenu, the overlapping is reduced, but
still there.

Any ideas?

[Tim]

On Sun, 11 Jan 2004 23:54:19 +0100,
"Thomas Mlynarczyk" <bl************ *@hotmail.com> wrote:

I noticed that IE seems to put some kind of default margins on <li> elements
and the only way to get rid of them seems to be assigning negative margins.
To make things worse, IE5 and IE6 seem to have different defaults. Is there
an elegant way to remove these stupid margins?

Different browsers have different defaults (margins and/or padding), if
you want to make anything customised, you're best to adjust all the
parameters that might be needed (set margins and paddings, as suits your
needs; which may also mean setting them on adjacent elements). That
way, you're not leaving things to chance, and you're not playing with
kludges to suit particular browsers.

--
My "from" address is totally fake. The reply-to address is real, but
may be only temporary. Reply to usenet postings in the same place as
you read the message you're replying to.

This message was sent without a virus, please delete some files yourself.

[Thomas Mlynarczyk]

Also sprach Tim:

Different browsers have different defaults (margins and/or padding),
if you want to make anything customised, you're best to adjust all the
parameters that might be needed (set margins and paddings, as suits
your needs; which may also mean setting them on adjacent elements).
That way, you're not leaving things to chance, and you're not playing
with kludges to suit particular browsers.

I think I have done all that - please have a look at:
http://www.mlynarczyk-webdesign.de/menulist/
But still, without this extremely ugly "workaround " (commented in the style
sheet), IE will leave that space between the menu items which seems to be
due to the fact that IE makes li elements higher than necessary for the
contents. And I still don't understand why Opera overlaps the submenu with
its heading main menu item.

[Brian]

Anne van Kesteren wrote:

Spartanicus wrote:

Thomas Mlynarczyk wrote:

I noticed that IE seems to put some kind of default margins on
<li> elements and the only way to get rid of them seems to be
asigning negative margins. To make things worse, IE5 and IE6
seem to have different defaults. Is there an elegant way to
remove these stupid margins?

http://www.alistapart.com/articles/taminglists/

In short: applying a 'border-bottom' *or* removing all the spaces
between the elements.

That's unlikely to make any difference. Assigning incorrect widths to
IE/Win, and then correcting them for conforming browsers via a child
selector, is probably more useful advice. The link provided by
Spartanicus gives the gory details.

--
Brian
follow the directions in my address to email me

[Anne van Kesteren]

Brian wrote:

In short: applying a 'border-bottom' *or* removing all the spaces
between the elements.

That's unlikely to make any difference. Assigning incorrect widths to
IE/Win, and then correcting them for conforming browsers via a child
selector, is probably more useful advice. The link provided by
Spartanicus gives the gory details.

I think you are reffering to "remove all spaces", like:

"<li>...</li><li>...</li>"

It works and has been tested.
--
Anne van Kesteren
<http://www.annevankest eren.nl/>