Posted by Ben C on 12/28/06 22:07

On 2006-12-28, Martin Clark <martin@spl.at> wrote:
> Paul Lautman wrote...
>>When viewed in IE6 or Firefox, the list beginning "Unsurpassed design and
>>manufacturing quality." on the page http://www.osg-uk.com has blue arrows as
>>bullets.
>>
>>However, in IE7, the arrows are hidden under the image to the left of it. I
>>have tried various ways to rectify this but if I get it looking OK in IE7,
>>it looks rubbish in FF.
>>
>>Can someone point me to the correct magic incantation?
>>
> Have a read of http://meyerweb.com/eric/css/list-indent.html
>
> Having a quick read through, it looks as if you will need to set left-
> margin and left-padding for ul to something other than 0.
>
> I am not an html guru but, as I understand it, Firefox, etc includes the
> bullet in the space for the list item whereas IE places it outside. You
> have set the list to have no indentation, so in IE, your bullets appear
> to the left of the text block, i.e. beneath the image.

There's a list-style-position property, which can have the value
"inside" or "outside". Default is outside. The list-item is formatted
just like a block box with the list item marker projected out to the
left. Its precise position is not specified, but I think FF puts its
right edge 8 pixels to the left. IE is allowed to put it somewhere
slightly different. There's no way to control the exact position in CSS
2.1.

If you do want to place them more precisely across browsers, you could
just use relatively positioned inline boxes instead.

I can't actually find the list you're talking about on the url you
posted.

[Back to original message]