ul/li works fine in FF but not in IE (help)

[Dreamweb Designs]

Hi,

*EDIT: Friend of mine told me how to fix it. In the css, you'll see #navcontainer li {list-style: none; } and all I needed to do was add padding: 0; margin: 0; like this: #navcontainer li {list-style: none; padding: 0; margin: 0;}

I have this theme I'm working on for wordpress and the sidebars are showing properly in Firefox, but in IE, they have a weird padding/margin on the left and they aren't showing right. This also happens with the lists in the footer area as well.

If you could help me out as to why this is happening, I'd greatly appreciate it.

Here is the HTML I'm using:

			<div id="navcontainer">
<ul>
<?php wp_list_categories('title_li='); ?>
</ul>
			</div>

and here is the CSS for the list:

#navcontainer {
float: left;
width: 180px;
padding: 0;
margin-bottom: 5px;
margin-top: 2px;
text-align: left;
background-color: #000;
clear: both;
}
 
#navcontainer ul
{
position: normal;
text-align: left;
margin-top: 2px;
padding: 0;
list-style-type: none;
font-family: Tahoma;
font-size: 14px;
font-weight: normal;
}
 
#navcontainer li {list-style: none; }
 
#navcontainer a
{
display: block;
padding-left: 3px;
padding-right: 3px;
padding-top: 5px;
padding-bottom: 5px;
width: 174px;
background-color: #252525;
font-weight: normal;
color: #898989;
text-decoration: none;
}
 
#navcontainer a:link, #navlist a:visited
{
color: #898989;
text-decoration: none;
font-weight: normal;
}
 
#navcontainer a:hover
{
background-color: #363636;
color: #898989;
}

[Paul O'B]

As you found out yourself you always need to take control of the padding and margins on all the elements you use because the defaults the browser applies will vary between browser.

This applies to nearly all the elements you use and not just lists

[Dreamweb Designs]

yeah. I don't know how I let that slip by.

Do you know if adding margin:0; padding: 0; in the body tag takes care of all elements for each browser? so I won't have to add those codes to each element in my css? or do I need to do it manually?

[Paul O'B]

Do you know if adding margin:0; padding: 0; in the body tag

No that just takes care of the body tag

You can use the universal selector to address all elements like so.

* {margin:0;padding:0}

However there are some minor drawbacks due to its effect on form elements.

There are a lot of reset css styles about so have a google for them.

Here is probably one of the best.

http://meyerweb.com/eric/thoughts/20...eset-reloaded/