Ordered List Formatting for IE7 and Firefox

Can't make them look the same

[mayest]

Hi all, this is my first post here. I'm fairly new to using CSS in a semi-serious way. I'm using Dreamweaver CS3 and a doctype of XHTML 1.0 Transitional. I'm importing external style sheets using link commands.

My problem is that I have a table of contents div that contains an ordered list with several list items and some of the list items contain ordered lists. I guess this is a set of nested lists. It all works fine, but I can't get the lists to look the same in IE and Firefox (latest versions of both). So, I created a separate style sheet specifically for IE to format the lists. The problem is that the IE conditional code to import this style sheet is seen by Dreamweaver as a comment, so it doesn't automatically adjust the path to the sheet. Therefore, the style sheet only gets imported by some files, and the list looks wrong in the other files that are in a different directory.

If you can help with the above problem, that would be great. Otherwise, is there a way to get both browsers to use the same CSS and get the same look for the list? Basically, the list is far too wide in IE. Here is my CSS that works perfectly in Firefox:

#TVMNav ol {
padding-left: 1.5em;
margin-bottom: 0.5em;
}
#TVMNav li {
color: #698B69; /*DarkSeaGreen4*/
font-weight: bold;
margin-bottom: 0;
}

Here is the CSS for IE:

#TVMNav ol {
padding-left: 0;
margin-left: 1.5em;
margin-bottom: 0.5em;
}
#TVMNav li {
color: #698B69; /*DarkSeaGreen4*/
font-weight: bold;
margin-bottom: 0;
margin-left: 0.5em;
}

As you can see, I need slightly different margins and padding for IE than for Firefox. Is there anyway to overcome this problem?

Thanks,

Tim

[Marshall]

#TVMNav ol {
padding-left: 1.5em;
margin-bottom: 0.5em;
}
#TVMNav li {
color: #698B69; /*DarkSeaGreen4*/
font-weight: bold;
margin-bottom: 0;
}

Here is the CSS for IE:

#TVMNav ol {
padding-left: 0;
margin-left: 1.5em;
margin-bottom: 0.5em;
}
#TVMNav li {
color: #698B69; /*DarkSeaGreen4*/
font-weight: bold;
margin-bottom: 0;
margin-left: 0.5em;
}

Question - is your menu in a div?

If not, put it in one, example:
#menu {
width: 210px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}

Second, try not applying anything to the ol, example:
#menu ol{
list-style: none;
margin: 0;
padding: 0;
}

Then apply eveything to the li, example:

#menuLeft li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menuLeft li a:link {
color: #CCC;
display: block;
padding-left:10px; padding-right:0; padding-top:8px; padding-bottom:0
}

All I can say is it works for me.

Marshall

[mayest]

Thank you Marshall! I set a width on the div and then played around with the margins and padding on the li elements. I finally got it working so that it looks reasonably the same in Firefox and IE (7 at least).

[Marshall]

Nothings perfect ;) Best of luck.

Marshall