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: */
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,

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.)

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/

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

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

Jonathan N. Little wrote:

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

--
Berg

On 2008-06-25, Bergamot <bergamot (AT) visi (DOT) com> wrote:

Jonathan N. Little wrote:

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

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.

Ben C wrote:

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.

--
Berg

Bergamot wrote:

Jonathan N. Little wrote:
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

Hmmm funny thing is I do not see it.

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

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

/* IE: */
* html ul.headlines {margin-left:20px; margin-top:0px; }

/* 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>

--
Stanimir