CSS - Inline List Works In Ie But Not In Ff

Hi all,

Im hoping someone out there can help me.

Ive just discovered ive made a massive mistake by designing my site and viewing it in IE. It looks fine in IE, but of course there is one part that looks terrible in FF ( not FFs fault i know!)

The navigation bar is an inline list that is supposed to appear tabbed but in FF one of the tabs is pushed up a lot higher and I cant figure out what is pushing it up. i thought it might be the #ul secondary pushing it up (as this appears a bit wonky as well...)and i tried adding /* Hides from IE-mac \*/

#ul secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -41px;
left: 1px;
width: 100%;
}
/* End hide from IE-mac */

but this didnt change anything. i tried using the DOM inspector that comes with firebug but I still cant figure out whats pushing up the one home page tab....

Any tips anyone might have would be greatly appreciated.



My style sheets is




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

2 column container

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#content-container-two-column {
margin-top:3px;
margin-left:auto;
margin-right:auto;
padding:10px;
width:728px;
position:relative;
margin-bottom: 50px;
}

#content-main-two-column {
width:728px;
float:left;
}

#content-side-two-column {
float:right;
width:160px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

3 column container

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#content-container-three-column {
margin-top:3px;
margin-left:auto;
margin-right:auto;
padding:10px;
width:728px;


position:relative;
}

#content-main-three-column {
width:355px;
float:left;
margin-left:25px;
}

#items-left {
width:148px;
float:left;
margin-right: 45px;

}

#items-right {
width:148px;
float:right;
margin-right: 45px;

}





#content-side2-three-column,
#content-side1-three-column {
width:150px;
font-size:1.1em;
}



#content-side2-three-column {
float:right;
}

#content-side1-three-column {
float:left;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

index page

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#three-column-container {
background:url(../../images/bg-three-column-home.png) repeat-y;
padding:0;
margin:20px 0 10px 0;
}

#three-column-side1 {
float:left;
width:148px;
margin-right: 45px;
}

#three-column-side2 {
float:right;
width:142px;
background-color: #E9E9E9;
padding-left: 2px;
padding-right: 2px;
}
.centre {
background-position: center;
margin-bottom: 5px;
text-align: center;
padding: 0px;
}


#three-column-side22 {
float:right;
width:148px;
}

#three-column-middle {
width:340px;


margin:0px 10% 0px20%;
margin-right: 10%;
margin-left: 20px;
}


#three-column-middle-air {
width:340px;


margin:0px 10% 0px20%;
margin-right: 10%;
margin-left: 20px;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

html

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

body {
margin:0px;
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
line-height:1.4em;
color:#666666;
}

p {
margin:10px 0;
}

p.no-padding-no-margin {
padding:0;
margin:0;
}

hr{
color: #E5E5E5;
background-color: #E5E5E5;
height: 1px;
border:0;
margin:15px 0;
_margin:10px 0;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

headings

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


h1, h2, h3, h4, h5, h6 {
font-size:1.8em;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.1em;
margin:5px 0;
}

h1 {
margin-bottom:0;
}

h1, h2 {
margin-top:0px;
}

h2 {
font-size:1.3em;
}

h3 {
font-size:1.1em;
}

h3.small {
font-size:1.2em;
}

h4 {
font-size:1.1em;
}

h5 {
font-size:1.1em;
}

h6 {
font-size:1em;
}


a:link {
color:#d61719;
text-decoration:none;
}

a:visited {
color:#980000;
text-decoration:none;
}

a:hover {
text-decoration:none;
}

a:active {
color:#980000;
}

#content-side-two-column a:link,
#content-side2-three-column a:link,
#content-side1-three-column a:link,
#content-side-two-column a:visited,
#content-side2-three-column a:visited,
#content-side1-three-column a:visited {
text-decoration:none;
}

#content-side-two-column a:hover,
#content-side2-three-column a:hover,
#content-side1-three-column a:hover {
text-decoration:underline;
}



.img_text {

float:left;
margin-top:0px;
margin-right:10px;
margin-bottom:0px;

}




#poster-photo-container {

margin-left:auto;
margin-right:auto;
width:750px;

position:relative;
}

.poster-photo-image {

display:block;

}


ul {
margin:0;
padding:0;
list-style:none;
}

li {
list-style:none;
background:url(../../images/list-bullet-02.gif) no-repeat 0 .8em;
padding:.2em 0 .2em 1em;
margin-left:0.4em;

}



#content-side1-three-column ul.list-of-links,
#content-side2-three-column ul.list-of-links {
margin: 0 0 30px 0px;
}

ul.list-of-links li{

background-image:url(../../images/list-bullet-01-link.gif);
}

ul.list-of-links li.current {
background-color:#E5E5E5;
}


ul.no-lines,
ul.no-lines li {
border:none;
}



.feature-area {
background-color:#6799D1;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

images

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

img {
border:none;

}

.img_footer {
border:none;
padding-right:10px;

}
.photo-border {
padding:0px;
margin-bottom:5px;
display:block;

/*background-image: url(../../images/bg-photo.png);
background-repeat: repeat-x;
background-position: top;*/
}

.photo-float-left {
float:left;
margin-left:0px;
margin-right:10px;
margin-top:0px;
margin-bottom:40px;

}

.photo-float-details {
float:left;
margin-left:0px;
margin-right:10px;
margin-top:0px;
margin-bottom:1px;

}

.image-border-none {
border:none;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

FOOTER

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#footer {
margin-top:3px;
margin-left:auto;
margin-right:auto;
width:740px;
padding:.8em 0 1em 10px;
position:relative;
font-size:0.9em;
text-align: center;
}



#footer a:link,
#footer a:visited {
color:#555450;
text-decoration:none;
padding:0px 0px 0px 10px;
}

#footer a:hover {
color:#64645c;
text-decoration:none;
padding:0px 0px 0px 10px;
}

#footer a:active {
color:#FFFFFF;
padding:0px 0px 0px 10px;
}






.arrow {
vertical-align:middle;
}



.clear {
clear:both;
}

.none {
display:none;
}

.dent {
margin-left: 20px;
}



/*Tabs*/


html, body {
margin: 0px;
padding: 0px;
}

body {
text-align: left;
}

#Wrapper {
font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: left;
width: 750px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}

#Container {
background-color: #FFFFFF;
color: #333;
clear: both;
margin: 0px;
padding-top: 2.2em;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
width: 750px;
float: left;
border-top: 1px solid #C0C0C0;
display: block;
}




#Content {
background-color: #FFFFFF;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #C0C0C0;
padding-bottom: 20px;
margin: 0px;
width: auto;
height: auto;
}

#Navigation {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
color: #333333;
position: relative;
height: 50px;
display: block;
width: auto;
}
ul#primary {
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
width: 728px;
}

ul#primary li {
display: inline;
list-style: none;
}

ul#primary a,ul#primary a.active {
width: 10em;
display: block;
float: left;
text-align: center;
font-family: tahoma, verdana, sans-serif;
font-size: 12px;
text-decoration: none;
color: #333;
letter-spacing: .1em;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0;
margin-left: 0;
padding-top: 4px;
padding-right: 0;
padding-bottom: 4px;
padding-left: 0;
}




ul#primary a.active,ul#primary a.active:hover {
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
background: #ffffff;
color: #333;
margin-top: 0;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
}




ul#primary a {
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
background: #e8e9e1;
}

ul#primary a:hover {
margin-top: 1;
border-color: #c0c0c0;
color: #333;
padding-bottom: 3px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
background: #e9eaea;
}
ul#secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -21px;
left: 1px;
width: 100%;
}

/* Hides from IE-mac \*/
#ul secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -41px;
left: 1px;
width: 100%;
}
/* End hide from IE-mac */



ul#secondary li a {
width: auto;
display: block;
float: left;
padding: 0 10px;
margin: 0;
text-align: center;
border-top: none;
border-right:none;
border-bottom: none;
border-left: none;
background: none;
color: #666;
background-color: #FFFFFF;
text-decoration: none;
}

/* Hides from IE-mac \*/
#ul secondary li a {
width: auto;
display: inline;
float: left;
padding: 0 10px;
margin: 0;
text-align: center;
border-top: none;
border-right:none;
border-bottom: none;
border-left: none;
background: none;
color: #666;
background-color: #FFFFFF;
text-decoration: none;
}
/* End hide from IE-mac */

ul#secondary li a:hover {
color: #333;
border-top: none;
border-bottom: none;
border-left: none;
margin: 0px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
background: none;
}

ul#secondary li a:active {
color: #000;
font-weight: bold;
}

ul#secondary li:last-child a {
border: none;
}

.bold {

font-weight:bolder;
color:#000000;}


#number {

width:20opx; }



And some of the html

<div id="Wrapper">
<img src="pics/logo2.gif" align="right" />
<div id="Navigation">
<ul id="primary">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="print.html">Printing</a>

<ul id="secondary">
<li><a href="about.html">About us</a></li>
<li><a href="environment.html">Environment</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</li>
<li><a href="products.html">Products</a></li>
<li><a href="cart">View Cart</a>
<li><a href="contact.html">Contact us</a></li> </ul>
</div>
<div id="Container">
<div id="Content">
<div id="poster-photo-container"><img src="pics/header6.jpg" alt="" class="poster-photo-image" /></div>
<div id="content-container-two-column">
<div id="content-main-two-column">
<h1>
Welcome to The Picture Works Printing Room</h1>