bullets look different in IE than in Firefox

[photoxprt1868]

Hello,

I've got some bullets and I've modified the left margin in the style sheet. It looks fine in IE but Firefox ignores that left margin, and it messes everything up.

Here's some code:

#topFlashBucket li{
list-style-image:url(../images/arrowNoBG.gif);
padding-left:5px;

}

#topFlashBucket ul{
margin-left:10px;
margin-bottom:2px;
}

Is there anything I can do to make it work with both browsers?

Thank you

 

[cLFlaVA]

always zero-out both margin and padding for uls, then set your specific margins or paddings. they are rendered differently in different browsers.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude

 

[photoxprt1868]

so you are saying to make the padding and margin 0 for the uls, and then add margin to the li?

 

[cLFlaVA]

you could do this:

ul, li {
   padding: 0;
   margin: 0;
}

li {
   padding-left: 1em;
}

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude

 

[photoxprt1868]

When I apply a padding to the li, it just separates the text from the bullet image more and more, and I want to shift the whole thing (the bullet image, and the text). margin-left does the trick but it's rendered very differently in IE vs Firefox. Anything else I can do.

thanks,

by the way, what's em?

 

[cLFlaVA]

then you would use margin instead of padding, and you'd use it on the ul, not the li.

ul, li {
  margin: 0;
  padding: 0;
}

li {
  margin-left: 1em;
}

em is a unit that means "the width of the letter m". it is used as a more elastic approach to sizing, rather than static (px).

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude