List menu indents in FF

[watermac77]

I am having trouble making my list menu appear correctly in Firefox (it appears fine in IE 7). What it is doing is indenting when opened in FF. I have it setup as a vertical list with indents for active and inactive submenus. Here is the code (sorry, the navigation part is really long but I want to see if anyone can spot a problem with it):

CSS:

/*----------- STRUCTURE -----------*/
#wrapper {
position:absolute;
left: auto;
width: 100%;
top: 0;
right: auto;
}
#container {
position:relative;
left: 50%;
width: 900px;
margin-top: 0px;
margin-left: -450px;
top: 0;
padding-bottom: 40px;
}
#main {
width: 900px;
top: 275px;
}

/* this is where the menu resides */
#leftcolumn {
width:250px;
position: relative;
left: 0;
background-image: url(_images2/menubg.jpg);
top: 0px;
float: left;
background-repeat: no-repeat;
}

/*---------- NAVIGATION ------------*/

#navSection {
position: relative;
top: 0px;
margin-left: 65px;
margin-top: 24px;
width: auto;
}
#navSection ul {
list-style-type:none;
margin:0;
font:normal 1.2em/1.2 Arial, sans-serif;
}
#navSection ul ul {
font-size:1em;
margin:11px 0 0 0;
}
#navSection ul ul.subnav {
display: none;
}
#navSection ul.grouped ul, #navSection ul ul.active, #navSection li.selected

ul.subnav {
display: block;
}
#navSection li {
float:left;
width:154px;
display:block;
margin:0 0 8px 0;
padding:0 0 7px 0;
border-bottom:solid 1px #BBB;
}
#navSection ul ul li {
border-bottom:none;
padding:0;
color:#333;
margin-left:11px;
width:143px;
display:inline;
}
#navSection li a {
border:none;
display:block;
width:143px;
padding:0 0 0 11px;
margin:0;
background:url(_images2/bullet_square.gif) 0 0.4em no-repeat;
color:#444;
text-decoration:none;
font-weight:bold;
}
#navSection ul ul li a {
background:url(_images2/arrow_small.gif) 0 0.4em no-repeat;
font-weight:normal;
color:#333;
width:132px;
}
#navSection li a:hover {
color:#921;
text-decoration:underline;
}
#navSection li.selected a {
font-weight:bold;
color:#000;
background-image:url(_images2/bullet_square_red.gif)!important;
}
#navSection li.selected li a {
font-weight:inherit;
color:#333;
background-image:url(_images2/arrow_small.gif)!important;
}
#navSection .grouped ul {
margin:0!important;
}
#navSection .grouped li {
margin:0 0 2em 0;
border-bottom:none;
padding:0;
}
#navSection .grouped li li {
margin:0 0 8px 0;
width:154px;
}
#navSection .grouped li li a {
color:#333;
background:url(_images2/bullet_square.gif) 0 0.4em no-repeat;
font-size:1em!important;
width:143px;
}
#navSection .grouptitle {
display:inline;
float:left;
clear:left;
width:154px;
padding:0 0 6px 0;
margin:0 0 8px 0;
border-bottom:solid 1px #BBB;
font:bold 0.95em/1.2 Arial, sans-serif;
text-transform:uppercase;
text-decoration:none;
color:#992111;
}
/* external links */
#navSection span.external {
float: none;
clear: none;
margin-left: 2px;
padding: 0 12px 0 0;
background: url(_images2/external_link.gif) right center no-repeat

!important;
border-bottom: 0px!important;
}

--------------------------

HTML:

<div id="wrapper">
<div id="container">
<div id="main">
<div id="leftcolumn">
<div id="navSection">
<ul>
<li>THIS IS WHERE THE MENU IS</li>
</ul>
<!-- END NAVSECTION -->
</div>
<!-- END LEFTCOLUMN -->
</div>
<!--END MAIN-->
</div>
<div style="clear: both;"></div>
<!-- END CONTAINER -->
</div>
<!-- END WRAPPER -->
</div>

[SuzyUK]

Hi watermac77,

#navSection ul {
list-style-type:none;
margin:0;
font:normal 1.2em/1.2 Arial, sans-serif;
}
#navSection ul ul {
font-size:1em;
margin:11px 0 0 0;
}

with lists, some browsers use margin and others use padding to create the default indents, so to take control of them x-browser set them both to zero and then use one or the other if you actually require an indent..

#navSection ul {
list-style-type:none;
margin:0;
padding: 0;
font:normal 1.2em/1.2 Arial, sans-serif;
}
#navSection ul ul {
font-size:1em;
margin:11px 0 0 0;
padding: 0;
}

[watermac77]

Thanks so much for the help! That worked...