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.annevankesteren.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.annevankesteren.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.annevankesteren.nl/>

[Brian]

Anne van Kesteren wrote:

Brian wrote:

In short: applying a 'border-bottom' *or* removing all the
spaces between the elements.
That's unlikely to make any difference.

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

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

But these are block level elements. How does removing the space affect
their margins?
It works and has been tested.

Is your test case online?

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

[Anne van Kesteren]

Brian wrote:

But these are block level elements. How does removing the space affect
their margins?
Not really: 'list-item' is the default. But IE is crazy.
Is your test case online?

Nope, an example:

<style type="text/css">
ul{
margin:0;
padding:0;
list-style:none;
width:100px;
}
li{
margin:.1em;
padding:0;
display:block; /* normal is display:list-item; */
background:lime;
}
a{
display:block;
}
</style>

<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>

<ul><li><a href="">1</a></li><li><a href="">2</a></li><li><a
href="">3</a></li></ul>
--
Anne van Kesteren
<http://www.annevankesteren.nl/>

[Brian]

Anne van Kesteren wrote:

Brian wrote:

But these are block level elements. How does removing the space affect
their margins?
Not really: 'list-item' is the default.

Anything with display: list-item is block level:

http://www.w3.org/TR/CSS21/visuren.html#block-level

9.2.1 Block-level elements and block boxes

Block-level elements are those elements of the source document that
are formatted visually as blocks (e.g., paragraphs). Several values of
the 'display' property make an element block-level: 'block',
'list-item', and 'run-in' (part of the time; see run-in boxes), and
'table'.
To confirm, I removed the following line from your style element:

display:block; /* normal is display:list-item; */

There were no rendering differences in O7, Moz 1.x, or MSIE 5.0/Win2k.
But IE is crazy.
So it seems.
<style type="text/css"> /* styles snipped */ a{display:block;}
</style>

<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>

<ul><li><a href="">1</a></li><li><a href="">2</a></li><li><a
href="">3</a></li></ul>

Yep, that's crazy. MSIE creates a block within the block, I guess.
Very strange.

To the op: You can preserve whitespace (to keep code readable), by
assigning widths:

a {width: 100%} /* incorrect, but fixes margins problem in ieWin */

li>a {width: auto;} /* corrects width for conforming browsers that
understand child selectors */

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

[Stan Brown]

It seems "Thomas Mlynarczyk" wrote in
comp.infosystems.www.authoring.stylesheets in article
<bt*************@news.t-online.com>:

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?

Besides different versions of IE, different versions of other
browsers do this still differently. Fortunately, there's help:

http://devedge.netscape.com/viewsour...2/list-indent/

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Tim]

Also sprach Tim (with full fanfare from Khatchaturian):

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.

"Thomas Mlynarczyk" <bl*************@hotmail.com> wrote:
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.

In my MSIE, I see the items overlapping (not as much as what Opera is
doing, though), as I'd expect when one plays with negative values.

Considering MSIE's very crap child/parent/descendent/etc. selection
handling, have you tried setting special classes for your menu LI
elements? It may be less of a headache to work out (your stylesheet's
certainly too complex for me to *quickly* analyse), and it seems to me,
that you might be relying on tweaking for different browsers based on
what sort of things they currently ignore (which is unreliable and
changing information, as well as only covering the browsers that you
currently hear about).

What's the peculiar stuff with the voice-family for, by the way?

--
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]

I tried removing the whitespace between </li> and <li>. It had no effect on
my code. While experimenting with different styling I noticed that there is
indeed a case where removing the whitespace helps, but as I said it does not
work on my original code.

[Thomas Mlynarczyk]

Also sprach Tim:

Considering MSIE's very crap child/parent/descendent/etc. selection
handling, have you tried setting special classes for your menu LI
elements? It may be less of a headache to work out (your stylesheet's
certainly too complex for me to *quickly* analyse), and it seems to
me, that you might be relying on tweaking for different browsers
based on what sort of things they currently ignore (which is
unreliable and changing information, as well as only covering the
browsers that you currently hear about).
In fact, yesterday I started to re-create my style sheet from scratch and it
looks as if I have even found a solution to the IE space problem, but I
haven't really tested it yet. In exchange, it is now Opera 6 which puts the
extra space. My basic idea is now to have li {display:inline;} and force
them to be aligned vertically by assigning a width to the parent element.
What's the peculiar stuff with the voice-family for, by the way?

A hack to hide CSS from IE < 6, but still make it visible for IE6.
Fortunately, in my new style sheet, I won't need this hack anymore.

[Thomas Mlynarczyk]

Also sprach Stan Brown:

Besides different versions of IE, different versions of other
browsers do this still differently. Fortunately, there's help:

http://devedge.netscape.com/viewsour...2/list-indent/

Thanks for the link, but there they talk about list indentation (thus, a
"horizontal matter"), while my problem relates to a vertical space.

[Stephen Poley]

On Mon, 12 Jan 2004 17:21:10 +0100, "Thomas Mlynarczyk"
<bl*************@hotmail.com> wrote:

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.

It looks OK to me in IE 6. Can't immediately see the cause of the Opera
problem.

You would do better with widths in ems though, in case the user sets a
large font size.

One other suggestion: I'd hide the stylesheet completely from NN4 (using
@import) and give NN4 users a plain list of links. You could then
simplify the stylesheet somewhat. The number of NN4 users is now so low
(3% for my site, and most sites are reporting less than that) that it
isn't really worth worrying about cosmetic details for them. If they can
read the site without difficulty, that's good enough. Unless you have an
unusually high number of NN4 visitors, anyway.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Thomas Mlynarczyk]

Also sprach Stephen Poley:

It looks OK to me in IE 6. Can't immediately see the cause of the
Opera problem.
I was able to fix that meanwhile - see link below.
You would do better with widths in ems though, in case the user sets a
large font size.
I will certainly consider that. This is by no means a "final version".
Thanks for the hint.
One other suggestion: I'd hide the stylesheet completely from NN4
(using @import) and give NN4 users a plain list of links. You could
then simplify the stylesheet somewhat. The number of NN4 users is now
so low (3% for my site, and most sites are reporting less than that)
that it isn't really worth worrying about cosmetic details for them.
If they can read the site without difficulty, that's good enough.
Unless you have an unusually high number of NN4 visitors, anyway.

I always try to make sites look well in older browsers too, at least to the
limit of what they can support. Of course, your suggestion of hiding all CSS
from NN4 would be the simplest approach and save a lot of trouble. But in my
experience, there are still too many NN4 users around... In the near future,
however, I think I will reconsider this.

Meanwhile I have considerably improved my style sheet and I was able to fix
the spacing problem:

http://www.mlynarczyk-webdesign.de/menulist2/

Now, however, I have a new problem: In the submenu (and only there!) IE
seems to restrict the clickable area to the actual text, even though it
extends the <a> element itself to the desired width. Does anyone have an
explanation for this strange behaviour?

Thanks to everyone for your help!

Greetings,
Thomas

[Stan Brown]

It seems "Thomas Mlynarczyk" wrote in
comp.infosystems.www.authoring.stylesheets in article
<bu*************@news.t-online.com>:

Also sprach Stan Brown:

Besides different versions of IE, different versions of other
browsers do this still differently. Fortunately, there's help:

http://devedge.netscape.com/viewsour...2/list-indent/
Thanks for the link, but there they talk about list indentation (thus, a
"horizontal matter"), while my problem relates to a vertical space.

Gee, if only you had said so in your original article:Message-ID: <bt*************@news.t-online.com>

You could have saved us both some wasted time.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Michael Rozdoba]

Stephen Poley wrote:

[snip]

The number of NN4 users is now so low (3% for my site, and most sites
are reporting less than that) that it isn't really worth worrying
about cosmetic details for them.

Does anywhere reliable track such statistics using some mechanism which
makes them meaningful in a web wide context?

I recently needed to justify use of CSS in a project & although I could
clarify support on a per browser basis, I was unable to quote usage
levels for the browsers themselves.

Cheers.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Andrew Thompson]

"Michael Rozdoba" <mr**@nowhere.invalid> wrote in message
news:40*********************@lovejoy.zen.co.uk...
| Stephen Poley wrote:
....
| > The number of NN4 users is now so low (3% for my site, and
most sites
| > are reporting less than that) that it isn't really worth
worrying
| > about cosmetic details for them.
|
| Does anywhere reliable track such statistics using some
mechanism which
| makes them meaningful in a web wide context?

I have trouble taking such statistics seriously.

E.G. A NN4 user comes to a page once
and sees a blank screen/gibberish/whatever.
They leave and do not come back.
An IE 6 user comes to the page, likes it so
much they bookmark it and visit 9 times.
(or tell nine friends about it)

The stats would indicate IE6 90%, NN4 10%.
Wouldn't they?

My point being that a site showing low stats for
NN4 may simply be unuseable in that browser.

( ..I hope I have not offended you deeply in the
event that you went to extraodrinary lengths to
ensure your pages _were_ usable by NN4!
And yes, that would blow my argument out
of the water in this case.. )

--
Andrew Thompson
* http://www.PhySci.org/ PhySci software suite
* http://www.1point1C.org/ 1.1C - Superluminal!
* http://www.AThompson.info/andrew/ personal site

[kaeli]

In article <ox*****************@news-server.bigpond.net.au>, andrew64
@bigNOSPAMpond.com enlightened us with...

The stats would indicate IE6 90%, NN4 10%.
Wouldn't they?

My point being that a site showing low stats for
NN4 may simply be unuseable in that browser.

I think all pages should be unusable in that POS so people upgrade.

/half-kidding and tired of supporting the darn thing

--
--
~kaeli~
If a parsley farmer is sued, can they garnish his wages?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[Michael Rozdoba]

Andrew Thompson wrote:
[browser usage stats]

I have trouble taking such statistics seriously.

E.G. A NN4 user comes to a page once and sees a blank
screen/gibberish/whatever. They leave and do not come back. An IE 6
user comes to the page, likes it so much they bookmark it and visit 9
times. (or tell nine friends about it)

The stats would indicate IE6 90%, NN4 10%. Wouldn't they?
I realise that - unless some workaround could be found tracking users or
recording browsers for a given site over a small period of time -
perhaps randomising the sites checked.

It would all be hacky & difficult to implement, but I'd have thought
someone must have made a moderately educated guess at stats.

How about accesses to browser upgrade sites or other resources?
My point being that a site showing low stats for NN4 may simply be
unuseable in that browser.

( ..I hope I have not offended you deeply in the event that you went
to extraodrinary lengths to ensure your pages _were_ usable by NN4!
And yes, that would blow my argument out of the water in this case..
)

Terribly; I shall never speak to you again. Just as well this is written
really :)

As to the above question, no. I'm just getting into web design & wanted
some evidence to back my intentions up.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Stan Brown]

It seems "Andrew Thompson" wrote in
comp.infosystems.www.authoring.stylesheets in article
<ox*****************@news-server.bigpond.net.au>:

I have trouble taking such statistics seriously.
As do I, and as does everyone except those whose pet browser scores
high.

[scenario snipped]The stats would indicate IE6 90%, NN4 10%.
Wouldn't they?

I suspect a far larger distortion is introduced by big ISPs that
cache Web pages.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Stephen Poley]

On Fri, 16 Jan 2004 20:08:52 GMT, "Andrew Thompson"
<an******@bigNOSPAMpond.com> wrote:

"Michael Rozdoba" <mr**@nowhere.invalid> wrote in message
news:40*********************@lovejoy.zen.co.uk. ..
| Stephen Poley wrote:
...
| > The number of NN4 users is now so low (3% for my site, and
most sites
| > are reporting less than that) that it isn't really worth
worrying
| > about cosmetic details for them.
|
| Does anywhere reliable track such statistics using some
mechanism which
| makes them meaningful in a web wide context?

I have trouble taking such statistics seriously.

E.G. A NN4 user comes to a page once
and sees a blank screen/gibberish/whatever.
They leave and do not come back.
An IE 6 user comes to the page, likes it so
much they bookmark it and visit 9 times.

Well indeed, and I suspect that the NN4 figures for my site are higher
than many, precisely because I do try to keep it readable for NN4. But
most of my CSS is now hidden from NN4, so its users get a somewhat
inelegant page. (Admittedly I don't check the NN4 appearance as often as
I used to, but I think most pages are still pretty much OK.)

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Andrew Thompson]

"Stephen Poley" <sb******************@xs4all.nl> wrote in message
news:sm********************************@4ax.com...
| On Fri, 16 Jan 2004 20:08:52 GMT, "Andrew Thompson"
| <an******@bigNOSPAMpond.com> wrote:

| >E.G. A NN4 user comes to a page once
| >and sees a blank screen/gibberish/whatever.
| >They leave and do not come back.
....
| Well indeed, and I suspect that the NN4 figures for my site are
higher
| than many, precisely because I do try to keep it readable for
NN4. But
| most of my CSS is now hidden from NN4, so its users get a
somewhat
| inelegant page. (Admittedly I don't check the NN4 appearance as
often as
| I used to, but I think most pages are still pretty much OK.)

I just did, and yes, they are.
[ subtract 15 or so from the NN4 numbers as
being down to 'just curious' ;-) ]

--
Andrew Thompson
* http://www.PhySci.org/ PhySci software suite
* http://www.1point1C.org/ 1.1C - Superluminal!
* http://www.AThompson.info/andrew/ personal site