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

maya schrieb:

Quote:

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; }

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:

Quote:

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

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.

Quote:

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.

Quote:

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

Quote:

maya schrieb:

Quote:

>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; }

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

Quote:

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

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:

Quote:

>
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/cro...let-lists.html

--
Berg

On 2008-06-25, Bergamot <bergamot@visi.comwrote:

Quote:

>
Jonathan N. Little wrote:

Quote:

>>
>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/cro...let-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:

Quote:

>
I don't know what IE does, but it shouldn't matter.

Perhaps it shouldn't, but it does.

Quote:

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.

Quote:

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:

Quote:

Jonathan N. Little wrote:

Quote:

>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/cro...let-lists.html
>

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

Wed, 25 Jun 2008 11:23:22 -0400, /maya/:

Quote:

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; }

Already answered, but described here, also:

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

--
Stanimir

Stanimir Stamenkov wrote:

Quote:

Wed, 25 Jun 2008 11:23:22 -0400, /maya/:
>

Quote:

>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; }

>
Already answered, but described here, also:
>
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.

--
Take care,

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

margins/padding for bulleted lists..

re: margins/padding for bulleted lists..

re: margins/padding for bulleted lists..

re: margins/padding for bulleted lists..

re: margins/padding for bulleted lists..

re: margins/padding for bulleted lists..

re: margins/padding for bulleted lists..

re: margins/padding for bulleted lists..

re: margins/padding for bulleted lists..

re: margins/padding for bulleted lists..

re: margins/padding for bulleted lists..

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about