margins/padding for bulleted lists..
in [CSS]
|
Prev: Restyle Anchor
Next: CSS validation, -moz extensions?
From: maya on 25 Jun 2008 11:23 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..
From: Johannes Koch on 25 Jun 2008 11:28 maya schrieb: > 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; } Did you try both margin-left _and_ padding-left for both ul _and_ li? -- Johannes Koch In te domine speravi; non confundar in aeternum. (Te Deum, 4th cent.)
From: John Hosking on 25 Jun 2008 11:41 maya wrote: > 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 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 -- John Pondering the value of the UIP: http://improve-usenet.org/
From: maya on 25 Jun 2008 11:50 Johannes Koch wrote: > maya schrieb: >> 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; } > > 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...
From: Jonathan N. Little on 25 Jun 2008 16:02
maya wrote: > 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.. 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. -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com |