 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / April 2006Why does IE add a pixel of white space around my links?
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  SignatureAlan Silver (anything added below this line is nothing to do with me) >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 >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 > 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 SignatureReply email address is a bottomless spam bucket. Please reply to the group so everyone can share. > Hello, > [quoted text clipped - 9 lines] > > 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. > 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. SignatureJohannes Koch In te domine speravi; non confundar in aeternum. (Te Deum, 4th cent.) > > 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. >>>In >>>CSS1Compat mode there are not default measurement units, so IE has all [quoted text clipped - 3 lines] > > 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". SignatureJohannes Koch In te domine speravi; non confundar in aeternum. (Te Deum, 4th cent.) > 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/> > 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 :-( ;-) >> simply open the >> OP's link in IE 6, File > Save As > Web page complete. You will get the [quoted text clipped - 5 lines] >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 SignatureAlan Silver (anything added below this line is nothing to do with me) >>> 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> [quoted text clipped - 7 lines] > > 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 SignatureMichael Winter Prefix subject with [News] before replying by e-mail. To further the education of mankind, Johannes Koch <koch@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. SignatureNeredbojias Infinity has its limits. >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. SignatureAlan Silver (anything added below this line is nothing to do with me) >>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 >>>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. [quoted text clipped - 4 lines] >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 SignatureAlan Silver (anything added below this line is nothing to do with me) > >>>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. [quoted text clipped - 9 lines] > > 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). >> >>>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. [quoted text clipped - 13 lines] >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. SignatureAlan Silver (anything added below this line is nothing to do with me) > >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 [quoted text clipped - 5 lines] > > 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. >> >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 [quoted text clipped - 10 lines] >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 SignatureAlan Silver (anything added below this line is nothing to do with me) >>>>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 [quoted text clipped - 3 lines] >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 >>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? SignatureReply email address is a bottomless spam bucket. Please reply to the group so everyone can share. >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 SignatureAlan Silver (anything added below this line is nothing to do with me) [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 SignatureMichael Winter Prefix subject with [News] before replying by e-mail. > > 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 [quoted text clipped - 4 lines] > 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. > [snip] > [quoted text clipped - 4 lines] > 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. > 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. SignatureEls http://locusmeus.com/ accessible web design: http://locusoptimus.com/ Now playing: Camel - Skylines > > 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). >>> 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 [quoted text clipped - 6 lines] > 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. SignatureEls http://locusmeus.com/ accessible web design: http://locusoptimus.com/ Now playing: Rush - Dreamline |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.