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

Johannes Koch

Guest

n/a Posts

June 27th, 2008
07:20 PM
#2

Re: margins/padding for bulleted lists..

maya schrieb:

Quote:

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

John Hosking

Guest

n/a Posts

June 27th, 2008
07:20 PM
#3

Re: margins/padding for bulleted lists..

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/

maya

Guest

n/a Posts

June 27th, 2008
07:20 PM
#4

Re: margins/padding for bulleted lists..

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

Jonathan N. Little

Guest

n/a Posts

June 27th, 2008
07:20 PM
#5

Re: margins/padding for bulleted lists..

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

Bergamot

Guest

n/a Posts

June 27th, 2008
07:20 PM
#6

Re: margins/padding for bulleted lists..

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/cr...llet-lists.html

--
Berg

Ben C

Guest

n/a Posts

June 27th, 2008
07:20 PM
#7

Re: margins/padding for bulleted lists..

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/cr...llet-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.

Bergamot

Guest

n/a Posts

June 27th, 2008
07:20 PM
#8

Re: margins/padding for bulleted lists..

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

Jonathan N. Little

Guest

n/a Posts

June 27th, 2008
07:20 PM
#9

Re: margins/padding for bulleted lists..

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/cr...llet-lists.html
>

Hmmm funny thing is I do not see it.

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

--
Take care,

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

Stanimir Stamenkov

Guest

n/a Posts

June 27th, 2008
07:20 PM
#10

Re: margins/padding for bulleted lists..

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

Quote:

Already answered, but described here, also:

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

--
Stanimir

Jonathan N. Little

Guest

n/a Posts

June 27th, 2008
07:20 PM
#11

Re: margins/padding for bulleted lists..

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