Why does IE add a pixel of white space around my links?

Alan Silver wrote:

In article <r4o152ploq1fegoviaoes547jfkt3aodv3 (AT) 4ax (DOT) com>, Ken Loomis
not_a_real_email (AT) address (DOT) com> writes
Must be because the link boxes are having "pack width" as opposed to
"max width". By setting width:100% for LI elements eliminates the gaps.

Thanks, that was the simplest solution.

It doesn't work for me. The li width has to be 99% and the visited,
etc. width has to be 100%. And I haven't tested on different
resolutions.

Hmm, I just tried it on IE6, FF and Opera and they all worked fine. IE5
showed some extraneous spaces below the links, but the widths were fine.

What browser, font size, etc were you using when it didn't work?

I bet margins or padding were not set to 0. width:100% works reliably
for W3C box only with zero margin/paddings, otherwise your layout easy
goes to trash (or an additional wrapping box is needed).

Alan Silver wrote:

In article <r4o152ploq1fegoviaoes547jfkt3aodv3 (AT) 4ax (DOT) com>, Ken Loomis wrote:
It doesn't work for me. The li width has to be 99% and the visited,
etc. width has to be 100%. And I haven't tested on different
resolutions.

I've updated the sample page to show my latest incarnation. Please try
this one and see if it works for you. I'm puzzled as to how it works for
me and not you.

http://www.kidsinaction.org.uk/fd/homepage.html

Of course it works - looks very nice btw. To experience the troubles of
Ken Loomis, simply set top/left margin or padding (yours to choose) to
say 5px while still having width:100%
W3C Box falls apart right away: you need extra wrapper for LI's now.

VK wrote:

Els wrote:
VK wrote:

It is getting more puzzling in a case like margin: 0 .5em (space after
0). Should UA interpret it as margin:0.5em or as margin: 0px 0.5em or
as an incorrect declaration?

Neither - they should interpret it as a correct declaration, meaning 0
margin for top and bottom, and a .5em margin for left and right.

Are you referring to a relevant W3C specification or is it your own
interpretation of the sentence "After a '0' number, the unit identifier
is optional." ?

It is neither. I am not referring to anything, other than general CSS
rules for shorthand declarations: one space between each component.
Hence, a space after a 0, means the 0 has finished. I don't need
specific W3C specifications related to optional unit identifiers for
that.

On practice yes, it works the way you suggested.

Of course it does. I always write my style rules like that, entirely
on purpose.

Moreover margin:0. 5em
(space after period) sets left/right to 0px and top/bottom to 5em.

Likely the reverse: 0 margin top and bottom (0. = 0.0 = 0 = 0px = 0em
= 0 anything), and 5em left and right.

A very nice AI feature :-)

AI as in... ?? Not anything with intelligence, is it? ;-)

though can be very far from the intended rule
(if an erroneus space).

*Anything* can be very far from what was intended when errors have
been made.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Rush - Dreamline

In article <1146153707.794757.222890 (AT) y43g2000cwc (DOT) googlegroups.com>, VK
<schools_ring (AT) yahoo (DOT) com> writes

Alan Silver wrote:
In article <r4o152ploq1fegoviaoes547jfkt3aodv3 (AT) 4ax (DOT) com>, Ken Loomis
not_a_real_email (AT) address (DOT) com> writes
Must be because the link boxes are having "pack width" as opposed to
"max width". By setting width:100% for LI elements eliminates the gaps.

Thanks, that was the simplest solution.

It doesn't work for me. The li width has to be 99% and the visited,
etc. width has to be 100%. And I haven't tested on different
resolutions.

Hmm, I just tried it on IE6, FF and Opera and they all worked fine. IE5
showed some extraneous spaces below the links, but the widths were fine.

What browser, font size, etc were you using when it didn't work?

I bet margins or padding were not set to 0. width:100% works reliably
for W3C box only with zero margin/paddings, otherwise your layout easy
goes to trash (or an additional wrapping box is needed).

Dunno, the page I posted had margins all set to zero. I had done that
early on to try and eliminate a problem with IE adding extra space
between the links.

--
Alan Silver
(anything added below this line is nothing to do with me)

In article <1146155196.010346.40420 (AT) i39g2000cwa (DOT) googlegroups.com>, VK
<schools_ring (AT) yahoo (DOT) com> writes

Alan Silver wrote:
In article <r4o152ploq1fegoviaoes547jfkt3aodv3 (AT) 4ax (DOT) com>, Ken Loomis wrote:
It doesn't work for me. The li width has to be 99% and the visited,
etc. width has to be 100%. And I haven't tested on different
resolutions.

I've updated the sample page to show my latest incarnation. Please try
this one and see if it works for you. I'm puzzled as to how it works for
me and not you.

http://www.kidsinaction.org.uk/fd/homepage.html

Of course it works - looks very nice btw. To experience the troubles of
Ken Loomis, simply set top/left margin or padding (yours to choose) to
say 5px while still having width:100%
W3C Box falls apart right away: you need extra wrapper for LI's now.

Oh I see. I thought the problem was with my page as I had it. I would
have thought that having a width of 100% and a non-zero margin was
asking for trouble as it adds up to more than 100%.

Ta ra

--
Alan Silver
(anything added below this line is nothing to do with me)

On Thu, 27 Apr 2006 16:53:32 +0100, Alan Silver
<alan-silver (AT) nospam (DOT) thanx.invalid> wrote:

In article <r4o152ploq1fegoviaoes547jfkt3aodv3 (AT) 4ax (DOT) com>, Ken Loomis
not_a_real_email (AT) address (DOT) com> writes
Must be because the link boxes are having "pack width" as opposed to
"max width". By setting width:100% for LI elements eliminates the gaps.

It doesn't work for me. The li width has to be 99% and the visited,
etc. width has to be 100%. And I haven't tested on different
resolutions.

I've updated the sample page to show my latest incarnation. Please try
this one and see if it works for you. I'm puzzled as to how it works for
me and not you.

OK, you put width:100% in the <h3> too. That fixed it for me.

Ken