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

[Alan Silver]

Hello,

Here I am again with another "why does IE do that" question!!

Please have a look at http://www.kidsinaction.org.uk/fd/homepage.html
and see if you can work out why IE adds a one pixel white space on the
left and right side of the links with the light-green backgrounds. It
doesn't do it on the header links, which have darker green backgrounds.

FF and Opera don't add the pixel at all, which is what I would expect as
I set left and right margins to zero for all relevant elements.

Any suggestions? TIA

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

[Els]

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.

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

Now playing: Camel - Skylines

[VK]

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." ?

On practice yes, it works the way you suggested. Moreover margin:0. 5em
(space after period) sets left/right to 0px and top/bottom to 5em. A
very nice AI feature :-) though can be very far from the intended rule
(if an erroneus space).

[VK]

Alan Silver wrote:

In article <r4************ *************** *****@4ax.com>, Ken Loomis
<no************ **@address.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).

[VK]

Alan Silver wrote:

In article <r4************ *************** *****@4ax.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.

[Els]

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

[Ken Loomis]

On Thu, 27 Apr 2006 16:53:32 +0100, Alan Silver
<al*********@no spam.thanx.inva lid> wrote:

In article <r4************ *************** *****@4ax.com>, Ken Loomis
<no*********** ***@address.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

[kchayka]

Alan Silver wrote:

In article <11************ **********@u72g 2000cwu.googleg roups.com>, VK
<sc**********@y ahoo.com> writes

By setting width:100% for LI elements eliminates the gaps.

Thanks, that was the simplest solution.

That does not, however, let you specify padding or borders along with
it, and still get a consistent result across browsers.

For IE work-arounds, not much beats the zoom property. It whips IE
into shape and other browsers ignore it. Who cares that it's
non-standard when it does so much good?

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Alan Silver]

In article <11************ *********@i39g2 000cwa.googlegr oups.com>, VK
<sc**********@y ahoo.com> writes

Alan Silver wrote:

In article <r4************ *************** *****@4ax.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)

[Alan Silver]

In article <11************ **********@y43g 2000cwc.googleg roups.com>, VK
<sc**********@y ahoo.com> writes

Alan Silver wrote:

In article <r4************ *************** *****@4ax.com>, Ken Loomis
<no************ **@address.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)