margins/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: */
htmlbody 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..

re: margins/padding for bulleted lists..

maya schrieb: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.)

re: margins/padding for bulleted lists..

maya wrote:
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.

Look at both margin and padding.
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/

re: margins/padding for bulleted lists..

Johannes Koch wrote: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...

re: margins/padding for bulleted lists..

maya wrote: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

re: margins/padding for bulleted lists..

Jonathan N. Little wrote: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/cro...let-lists.html

--
Berg

re: margins/padding for bulleted lists..

On 2008-06-25, Bergamot <bergamot@visi.comwrote: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.

re: margins/padding for bulleted lists..

Ben C wrote:Perhaps it shouldn't, but it does.
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.
And there you have it.

--
Berg

re: margins/padding for bulleted lists..

Bergamot wrote:Hmmm funny thing is I do not see it.

http://www.littleworksstudio.com/tem.../liststyle.jpg
liststyle.jpg (JPEG Image, 708x858 pixels)

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

re: margins/padding for bulleted lists..

Wed, 25 Jun 2008 11:23:22 -0400, /maya/:
Already answered, but described here, also:

Consistent List Indentation
<http://developer.mozilla.org/docs/Consistent_List_Indentation>

--
Stanimir

re: margins/padding for bulleted lists..

Stanimir Stamenkov wrote: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.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com