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)

[Ken Loomis]

On Wed, 26 Apr 2006 19:50:24 +0100, Alan Silver
<al*********@nospam.thanx.invalid> wrote:

Here I am again with another "why does IE do that" question!!
because it sucks.
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.

Just for kick, what happens if you fill in the href links?

Ken

[Ken Loomis]

On Wed, 26 Apr 2006 15:46:20 -0400, Ken Loomis
<no**************@address.com> wrote:

On Wed, 26 Apr 2006 19:50:24 +0100, Alan Silver

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.

Just for kicks, what happens if you fill in the href links?

Well, I tried that and it didn't help.

It's the background color of your page being inherited by your ul.
If you put
background: rgb(136, 192, 184);
in your ul it will look good until someone hovers on the li. Maybe you
can live with that. There's probably a better solution. (like telling
your users not to use IE)

Ken

[kchayka]

Alan Silver wrote:

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.

Any suggestions?

Same as I suggested before: add the zoom property

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

[VK]

Alan Silver wrote:

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

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.

btw if you decided to force W3C on IE, then play by the rules ;-) In
CSS1Compat mode there are not default measurement units, so IE has all
rights to ignore margin:0 declaration. It doesn't do it of a good of
its heart :-) but margin: 0px 0px would be more appropriate.

[Johannes Koch]

VK wrote:

In
CSS1Compat mode there are not default measurement units, so IE has all
rights to ignore margin:0 declaration.
Why?
It doesn't do it of a good of
its heart :-) but margin: 0px 0px would be more appropriate.

<http://www.w3.org/TR/REC-CSS1#length-units>:
After a '0' number, the unit identifier is optional.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[VK]

Johannes Koch wrote:

VK wrote:

In
CSS1Compat mode there are not default measurement units, so IE has all
rights to ignore margin:0 declaration.
Why?

Because they decided so and currently it's build into UA.
<http://www.w3.org/TR/REC-CSS1#length-units>:
After a '0' number, the unit identifier is optional.

Are you planning to develope for IE by W3C papers? :-0
A daring intention bur very unpractical :-)

Before to switch IE into CSS1Compat mode, anyone has to learn and
memorize the famous "CSS Enhancements in Internet Explorer 6" article
at
<http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp>

Is it W3C-compliant or not, but this is exactly what IE does in
CSS1Compat mode, whether you like it or not. The only other option is
to leave it in the original BackCompat mode. IE doesn't have (and
doubtfully ever will) some third W3CUpToTheLastPoint mode ;-)

In the particular "Stricter Style Sheet Parsing" section states:
<quote>
Values without unit type identifiers and values with white space
between the number and the unit type identifier are ignored.
Note: There is one exception to this rule. The line-height explicitly
accepts unitless numbers and treats them in a manner similar to a
percentage setting. For example, "line-height: 2" is similar to
"line-height: 200%," differing only in how the number inherits.
</quote>

As you can see, zero values are not in the list. And indeed margin:0
makes IE in CSS1Compat mode upset. To check that out, simply open the
OP's link in IE 6, File > Save As > Web page complete. You will get the
normalized version of the page: not what is served from the server, but
what IE sees internally. Compare the treatment for paddings and for
margin:0 in the normalized version.

[Johannes Koch]

VK wrote:

Johannes Koch wrote:

VK wrote:

In
CSS1Compat mode there are not default measurement units, so IE has all
rights to ignore margin:0 declaration.

Why?

Because they decided so and currently it's build into UA.

Sorry, I thought you meant IE is right (per some spec) to ignore "margin:0".
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[Neredbojias]

To further the education of mankind, Johannes Koch <ko**@w3development.de>
vouchsafed:

<http://www.w3.org/TR/REC-CSS1#length-units>:
After a '0' number, the unit identifier is optional.

Interestingly, at least in css2, line-height:0; triggers an error message
in the validator.

--
Neredbojias
Infinity has its limits.

[VK]

Johannes Koch wrote:

Sorry, I thought you meant IE is right (per some spec) to ignore "margin:0".

IE is awfully wrong I guess :-)

But from all glitches this is really one of smallest. Are we short on
keystrokes? To type margin: 0px 0px; instead of margin:0; doesn't take
hell of a lot (besides margin:0 is an optional shortcut, not the only
one allowed syntax).

Overall it is a common misunderstanding I guess to think of CSS1Compat
mode in IE as of a "W3C compliant" mode. Like "place an appropriate DTD
and it becomes another Firefox or Opera" :-) In fact all changes from
BackCompat mode to CSS1Compat mode are fairly spelled in the mentioned
article. You don't get any less - but nothing more. And a really
significant one is the switch into W3C box model: within some limits,
see
<http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets/browse_frm/thread/7bec5fd9a15c3ebc/>

[VK]

VK wrote:

simply open the
OP's link in IE 6, File > Save As > Web page complete. You will get the
normalized version of the page: not what is served from the server, but
what IE sees internally.

I forgot to mention that it also will reveal the sad fact that your
XHTML declaration goes by the "Unrecognized DTD" rule as spelled in the
same article (which I hope you already printed out and finished fixing
on the wall near of your computer :-)
So any XHTML (even the most Strict) in IE becomes "-//W3C//DTD HTML
4.01 Transitional//EN" pollued with all kind of trash all around :-(
;-)

[Michael Winter]

On 27/04/2006 11:15, VK wrote:

Johannes Koch wrote:

VK wrote:

In CSS1Compat mode there are not default measurement units, so IE
has all rights to ignore margin:0 declaration.
Why?

Because they decided so

No, they didn't.
and currently it's build into UA.
No, it's not.

<http://www.w3.org/TR/REC-CSS1#length-units>:
After a '0' number, the unit identifier is optional.

[snip]
In the particular "Stricter Style Sheet Parsing" section states:
<quote>
Values without unit type identifiers and values with white space
between the number and the unit type identifier are ignored.
Note: There is one exception to this rule. The line-height explicitly
accepts unitless numbers and treats them in a manner similar to a
percentage setting. For example, "line-height: 2" is similar to
"line-height: 200%," differing only in how the number inherits.
</quote>

As you can see, zero values are not in the list.
It doesn't need to be. A length value of zero (0) is a rather obvious
special case: a value of zero, in any unit, is still zero.
And indeed margin:0 makes IE in CSS1Compat mode upset.
Rubbish.
To check that out, simply open the OP's link in IE 6, File > Save As

Web page complete. You will get the normalized version of the page:

not what is served from the server, but what IE sees internally.
Compare the treatment for paddings and for margin:0 in the normalized
version.

You mean,

margin: 0px;

rather than:

margin: 0;

So what? They are equivalent.

If MSIE chooses to normalise zero length values to '0px', that's its
business. It does far stranger (and patently wrong) things when
'normalising' markup. One could only claim that it ignores declarations
containing unit-less zero values if those declarations were actually
removed during the normalisation process, but they aren't. Compare its
behaviour with unit-less non-zero values: these /are/ removed.

Once again, you observe simple behaviour, and somehow manage to draw the
wrong conclusions.

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

[Alan Silver]

In article <11**********************@u72g2000cwu.googlegroups .com>, VK
<sc**********@yahoo.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.

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

[Alan Silver]

In article <11**********************@u72g2000cwu.googlegroups .com>, VK
<sc**********@yahoo.com> writes

btw if you decided to force W3C on IE, then play by the rules ;-) In
CSS1Compat mode there are not default measurement units, so IE has all
rights to ignore margin:0 declaration. It doesn't do it of a good of
its heart :-) but margin: 0px 0px would be more appropriate.

Funny, I used to use units for zero measurements, but having seen people
here say many times that you don't need them, I thought I'd be al grown
up and leave them off. Looks like I should have stuck with my old
habits!!

Ta ra

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

[Alan Silver]

In article <11*********************@g10g2000cwb.googlegroups. com>, VK
<sc**********@yahoo.com> writes

VK wrote:

simply open the
OP's link in IE 6, File > Save As > Web page complete. You will get the
normalized version of the page: not what is served from the server, but
what IE sees internally.
I forgot to mention that it also will reveal the sad fact that your
XHTML declaration goes by the "Unrecognized DTD" rule as spelled in the
same article (which I hope you already printed out and finished fixing
on the wall near of your computer :-)

Printing out even as we speak. Will probably be stuck on the toilet
wall, partly as it is more likely to be read there, and partly because
it seems like an appropriate place to put an article about IE's
"advanced" handling on CSS!!
So any XHTML (even the most Strict) in IE becomes "-//W3C//DTD HTML
4.01 Transitional//EN" pollued with all kind of trash all around :-(
;-)

Harumph. Dontcha just *lurve* IE?

Ta ra

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

[Michael Winter]

On 27/04/2006 16:03, Alan Silver wrote:

[snip]

Funny, I used to use units for zero measurements, but having seen people
here say many times that you don't need them, I thought I'd be al grown
up and leave them off. Looks like I should have stuck with my old habits!!

When the majority say something - in this case, that units are optional
for zero length values - and VK says something else, ignore the latter.

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

[Ken Loomis]

On Thu, 27 Apr 2006 16:02:40 +0100, Alan Silver
<al*********@nospam.thanx.invalid> wrote:

In article <11**********************@u72g2000cwu.googlegroups .com>, VK
<sc**********@yahoo.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.

Ken

[Alan J. Flavell]

On Thu, 27 Apr 2006, Michael Winter wrote:

On 27/04/2006 16:03, Alan Silver wrote:

Funny, I used to use units for zero measurements, but having seen
people here say many times that you don't need them, I thought I'd
be al grown up and leave them off. Looks like I should have stuck
with my old habits!!

When the majority say something - in this case, that units are
optional for zero length values - and VK says something else, ignore
the latter.

As always with usenet, it's best to use the answers as clues, and go
read the specification to see what it really says. Even those of us
who care about giving accurate answers are going to make mistakes from
time to time.

[VK]

Michael Winter wrote:

On 27/04/2006 16:03, Alan Silver wrote:

[snip]

Funny, I used to use units for zero measurements, but having seen people
here say many times that you don't need them, I thought I'd be al grown
up and leave them off. Looks like I should have stuck with my old habits!!

When the majority say something - in this case, that units are optional
for zero length values - and VK says something else, ignore the latter.

OK, OK! In the very first post here I said <q>IE has all rights to
ignore margin:0 declaration. It doesn't do it of a good of its heart
:-)</q>
(where once again "rights" are based on Microsoft own specs, not W3C
ones).

So later assumption (that it makes it upset) was wrong. I just did not
read right the "normalized" source code. It appears that while IE rolls
up PADDING shortcut so it becomes PADDING-LEFT, PADDING-TOP etc., the
MARGIN shortcut is not rolled up. I originally thought that if was
caused by margin:0; declaration, but it stays the same for any
declaration.

So yes, everyone is entitled for his holly right to use margin:0
shortcut :-)

About the statement the "0 is always 0 in any mesures" it is correct
for a simple case like margin:0;
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? But of course W3C thought all detail to
the end I'm sure.

[Alan Silver]

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

Ta ra

--
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*********@nospam.thanx.invalid> 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**********************@u72g2000cwu.googlegroups .com>, VK
<sc**********@yahoo.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*********************@i39g2000cwa.googlegroups. com>, VK
<sc**********@yahoo.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**********************@y43g2000cwc.googlegroups .com>, VK
<sc**********@yahoo.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)