Nav Trouble in Firefox

[padme_]

Padme again with Firefox dilemmas. I should start coding that first from now on...

Anyways. I finally got most of the stuff fixed, and I just need help moving the navigation on my Firefox page. :]

Please+thankyou!

Code:

body { 
background: #79954a url(/images/shinebgtop2.jpg) repeat-x top;     
font-family: "Trebuchet MS", "Lucida Sans Unicode", Verdana, Sans-serif;   
font-size: 12px;       
color: #55e5dc;     
text-align: center;
margin: 0px auto;
padding: 0px auto;
}

a {   
color: #f5b25b;   
text-decoration: none; }
a:hover, a:active {   
   color: #a8bcd7;   
text-decoration: line-through; }


#container {
width: 100%;
margin: 0px auto;
padding: 0px auto;
background: url(/images/footerbg2.jpg) repeat-x bottom;
}
h1
{
background: url(/images/shineh1.jpg) no-repeat;
padding-left: 140px;
padding-top: 20px;
margin-bottom:0px;
margin-top:0px;
font-family: georgia, serif;
font-style:italic;
font-size:28px;
text-transform:lowercase;
letter-spacing:2px;
line-height:20px;
color:#ede9c6;
text-align: left;
}

h2
{background: url(/images/shineh2.jpg) no-repeat;
font-family: bodoni;
font-style:none;
font-size:20px;
text-transform:lowercase;
line-height:26px;
color:#FFFFFF;
text-align: left;
padding-left: 10px;
}


h3
{
padding-left:6px;
margin-bottom:0px;
margin-top:0px;
font-family: bodoni;
font-style:none;
font-size:12px;
text-transform:lowercase;
letter-spacing:2px;
line-height:18px;
color:#000000;
background-color:#FFFFFF;
background: url(/uc/images/h3.jpg) no-repeat;
}

#header {
width: 771px;
margin: 0px auto;
padding: 0px auto;
height: 448px;
background: url(/images/shinetop4.jpg) no-repeat;
text-align: center;
}

#nav ul {

list-style: none;
width: 178px;
margin: 0px auto;
padding: 0px auto;

}



#nav li a {
display: block;
padding-top: 5px;
padding-bottom: 5px;

text-transform: uppercase;
width: 178px;

color: #fff8b2;
margin: auto 0px;
}





#nav li a:link, #nav li a:visited {

color: #fff8b2;
width: 178px;

}



#nav li a:hover, #nav li a:active {

background: url(/images/nav2.jpg);

color: #ed5926;
text-decoration: none;
width: 178px;

}

#text {
width: 480px;
background: #93372a url();
float: left;
text-align: center;
overflow: visible;
}

#back {
width: 773px;
background: url(/images/shineback6.jpg);
margin: 0px auto;
padding: 0px auto;
}

#footer {
width: 777px;
height: 150px;
background: url(/images/shinefoot3.jpg);
clear: both;
margin: 0px;
padding: 0px auto;
}

#nav {
width: 178px;
float: left;
background: url();
margin-left: 66px;
padding: 0px auto;
}

[Nelson]

Uh, any screenshot, perhaps?

[padme_]

Oh crap, sorry!

www.brilliantcrimson.com

[Nelson]

So the problem is that the contents overlap the sidebar, is that it?

Try "floating" the #nav to the left and the #text to the right and ensure that the sum of their widths (and padding or margins if there are any) equals that of the #back.

[Nelson]

Also, don't forget to put a

Code:

clear:both;

in the footer.

[Moorina]

Well, I'm pretty sure it's because of the width in your #nav id. It's smaller than it should be.
I tried it with a width: 219px instead of width: 178px. That seemed to do the trick. So your #nav should look like:

Code:

#nav {
width: 219px;
float: left;
background: url();
margin-left: 26px;
padding: 0px auto;
}

[padme_]

Hey, it worked! Thanks so much!! <3333