CSS rendering differently in IE6 vs IE8 & FF

[nickatwork]

Hi all,
My machine was just upgraded to IE8, yay for me , but now I'm noticing problems with my output. Specifically in WebHelp, on IE6 my bullets and most of my list styles come to think of it.
Flare shows the styles as I would expect, and so does IE 6.

But now IE8 and FF are giving me an extra indent, around 200% more than what I want, I've scoured over my CSS and cant find what is setting this off. None of my topics in Flare have the stylesheet referenced, but that code is inserted when the project is built, so it is definitly calling the correct stylesheet.

Any ideas?

Heres some of my CSS for <ul> <ol> <li> and sub styles.

ol
{
font-family: Univers;
font-size: 11pt;
margin-top: 0pt;
margin-bottom: 0pt;
margin-left: 0px;
margin: 0px;
}
ol.ol_1
{
list-style-type: decimal;
margin-left: 0pt;
}
ul
{
font-family: Univers;
font-size: 11pt;
margin-top: 0pt;
margin-bottom: 0pt;
margin: 0px;
}

ul.ul_1
{
list-style-type: square;
margin-left: 0px;
}

li
{
font-family: Univers;
font-size: 11pt;
margin-top: 0pt;
margin-bottom: 0pt;
}

li.ManualBullet
{
font-size: 9pt;
margin-top: 3pt;
margin-bottom: 3pt;
font-family: Verdana;
list-style-type: square;
margin-left: 30px;
}

li.ManualNumber
{
margin-top: 3pt;
font-family: Verdana;
font-size: 9pt;
margin-bottom: 10px;
margin-left: 30px;
}

li.QuestionHeading
{
font-size: 9pt;
font-family: Verdana;
font-weight: bold;
margin-top: 10pt;
margin-bottom: 10pt;
margin-left: 30px;
}



Thanks,
Nick.

[LTinker68]

You don't have a left margin set for the base ul tag. And the problem might be that you're setting the left margins on the li tag and not the ol or ul tag or one if their classes. The ol and ul tags are container tags and have a default indent for list items. When you specify a left margin on the li tag, it could be that it's adding the value you specified to the default value, so it appears to be indented even more than what you specified.

So try removing the margin left values on the li tags and add the value to the ol/ul tags or create some classes for them.

[nickatwork]

Hi,
So I reduced my list indents by 30px, and added a 1px left margin to the main li , ol and ul tags, just to make sure something is set. Then a 30px indent to some of my list styles, and a zero indent on others.
It has reduced them, which is great.
But, when I look at it in Flare, the indent doesnt render the same at all, it basically looks well off the page. image attached.

Whats the deal with this? Surely I shouldnt have to set my indents only on the ul / ol tags or any sub tags, and I should be able to do it to the li tags instead without things being so weird.

[NorthEast]

Whats the deal with this? Surely I shouldnt have to set my indents only on the ul / ol tags or any sub tags, and I should be able to do it to the li tags instead without things being so weird.

Think of the 'box model' when you're setting the margin/padding - see section 8.2 here: http://www.w3.org/TR/CSS21/box.html

Setting the left margin/padding on the ol/ul tags will affect the spacing for the entire list (ol/ul) box.

Setting the left margin/padding on the li tags will affect the spacing inside the list box, from the left edge of the ol/ul box to the start of the list item (li) text; i.e. the space that the bullet/number sits in, if you're using the outside-head position.

[TechnicalDisaster]

I have experienced the same issue with my list styles - I appreciate the link, hopefully I can figure out what I need to do correctly. One follow up questions that I have:

My lists look good in Flare, and pretty much all browsers, except when IE works in compatibility mode. When IE is in compatibility mode, all my lists jump to the left just like Nickatwork's image. What do I need to do to keep the lists appearing the way they should? I don't know what IE compatibility mode is really suppose to be doing when it renders a page.