 |
 | 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 / June 2008margins/padding for bulleted lists..
hi, I'm having a problem w/bulleted lists.. as you know FF and IE do diff margins/spacing for these, so have to do stuff like /* IE: */ * html ul.headlines {margin-left:20px; margin-top:0px; } /* FF: */ html> body ul.headlines {margin-left:-20px; margin-top:0px; } two problems: 1) it looks diff in IE6 from IE7 2) the browser-specific "hack" for some reason is not working here.. code meant only for FF is picked up by IE and vice-versa... this is for a bulleted list in a fairly small space (approx 250 x 300..) so need to do very specific spacing.. would appreciate suggestions.. thank you.. maya schrieb: > hi, > [quoted text clipped - 6 lines] > /* FF: */ > html> body ul.headlines {margin-left:-20px; margin-top:0px; } Did you try both margin-left _and_ padding-left for both ul _and_ li?  SignatureJohannes Koch In te domine speravi; non confundar in aeternum. (Te Deum, 4th cent.) > maya schrieb: >> hi, [quoted text clipped - 9 lines] > > Did you try both margin-left _and_ padding-left for both ul _and_ li? actually this finally worked: margin:7px 0px 15px 0px; padding:0px 0px 0px 20px; looks decent in all three browsers, and didn't even have to do the browser-specif hack....;) thank you very much... > I'm having a problem w/bulleted lists.. as you know FF and IE do diff > margins/spacing for these, so have to do stuff like [quoted text clipped - 8 lines] > > 1) it looks diff in IE6 from IE7 Yes, because they're different browsers. See http://msdn.microsoft.com/en-us/library/bb250496.aspx, especially the "* HTML Filter" and ""html > body" child selector filter" sections. > 2) the browser-specific "hack" for some reason is not working here.. > code meant only for FF is picked up by IE and vice-versa... Look at both margin and padding. > this is for a bulleted list in a fairly small space (approx 250 x 300..) > so need to do very specific spacing.. And I hope you're aware that the text may overflow your 250px or 300px space anyway. HTH SignatureJohn Pondering the value of the UIP: http://improve-usenet.org/ > hi, > [quoted text clipped - 17 lines] > > would appreciate suggestions.. thank you.. No hack required, just the understanding that browsers choose different default settings for margin and padding on ULs to produce the indent so explicitly set both properties top get constancy.... ul.headlines { margin: 0 0 0 25px; padding: 0; } Will look the same in all above. SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com > ul.headlines { margin: 0 0 0 25px; padding: 0; } > > Will look the same in all above. No, I'm afraid it won't. IE puts the list marker in the UL padding, which you've just blown away. http://www.bergamotus.ws/samples/cross-browser-bullet-lists.html SignatureBerg >> ul.headlines { margin: 0 0 0 25px; padding: 0; } >> [quoted text clipped - 3 lines] > which you've just blown away. > http://www.bergamotus.ws/samples/cross-browser-bullet-lists.html I don't know what IE does, but it shouldn't matter. The bullet is supposed to be positioned a short distance from the left edge of the LI. Either margin or padding on the UL should therefore result in some space for the bullet, unless IE is so broken it positions the bullet relative to the UL's left edge instead of relative to the LI's left edge. The CSS 2.1 suggested default stylesheet has 40px left padding. > I don't know what IE does, but it shouldn't matter. Perhaps it shouldn't, but it does. > Either margin or padding on the UL should therefore result in some space > for the bullet, Depending on the margin and padding values, there may be insufficient space in IE. You'll end up with bullet markers disappearing altogether, or cut off on the left edge. A disc marker looks like a half moon. > unless IE is so broken it positions the bullet relative > to the UL's left edge instead of relative to the LI's left edge. And there you have it. SignatureBerg >> ul.headlines { margin: 0 0 0 25px; padding: 0; } >> [quoted text clipped - 3 lines] > which you've just blown away. > http://www.bergamotus.ws/samples/cross-browser-bullet-lists.html Hmmm funny thing is I do not see it. http://www.littleworksstudio.com/temp/usenet/liststyle.jpg liststyle.jpg (JPEG Image, 708x858 pixels) SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com Wed, 25 Jun 2008 11:23:22 -0400, /maya/: > I'm having a problem w/bulleted lists.. as you know FF and IE do diff > margins/spacing for these, so have to do stuff like [quoted text clipped - 4 lines] > /* FF: */ > html> body ul.headlines {margin-left:-20px; margin-top:0px; } Already answered, but described here, also: Consistent List Indentation <http://developer.mozilla.org/docs/Consistent_List_Indentation> SignatureStanimir > Wed, 25 Jun 2008 11:23:22 -0400, /maya/: > [quoted text clipped - 11 lines] > Consistent List Indentation > <http://developer.mozilla.org/docs/Consistent_List_Indentation> That confirms what I said, does matter which browser, just on rule is need but be sure to set both padding and margin to get constancy. Use margin for the indent if you do not want the background to extend under the bullets, or padding if you do. SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com |
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.