Page messed in IE

[Trojanfan]

Need some help guys. Check out http://www.madbum.com in IE. The menu drops below the content area. Here is my stylesheet, please let me know what is wrong (and if you see anything here that would fix the top nav not being perfectly centered in firefox, let me know too):

body{

margin:0;

background-image:url(images/bg.jpg);

background-position:center;

background-repeat:repeat-y;

background-color:#3D3D3D;

}



a:link {

color: #F1F1F1;

text-decoration: none;

}

a:visited {

color: #F2F2F2;

text-decoration: none;

}

a:hover {

color: #F89C91;

text-decoration: underline;

}

body,td,th {

font-size: 15px;

font-family: Geneva, Arial, Helvetica, sans-serif;

color: #F4F4F4;

}



#header{

background-image:url(images/header.jpg);

width:682px;

height:256px;

margin:0 auto;

}

#topnav{

padding-top:200px;

}

#topnav ul{
margin:0px 0px 0px 0px;
text-align: center;
}

#topnav li{
list-style:none;
display:inline;
font-weight:bold;
padding: 0 1em;
}

a:active {

text-decoration: none;

}

#content{

width:682px;

margin:0 auto;

}

#main{

float:left;

width:500px;

background-color:#262524;

border:1px solid #3D3D3D;

margin-left:5px;

margin-right:4px;

padding:5px;
display:inline;

}

#sidebar{

float:left;

width:155px;

background-color:#660000;

border:1px solid #3D3D3D;

height:900px;

padding-left:4px;

background-image:url(images/trash.jpg);

background-position:bottom;

background-repeat:no-repeat;
display:inline;

}

#sidebar ul{

list-style:none;

margin:0px 0px 0px 0px;

padding:0px 0px 0px 0px;

}

#sidebar li{

list-style:none;

}

#sidebar li li{

text-indent:2px;

}

#sidebar h2{

margin:8px 0px 2px 0px;

font-size:16px;

font-family:Arial;

font-style:italic;

font-weight:bold;

color:#000000;

border-left:2px solid #000000;

border-bottom:2px dashed #000000;

}

#sidebar #s{

margin-top:20px;

font-size:12px;

color:#333333;

background-color:#FFCCCC;

border:1px solid red;

}

#sidebar #searchsubmit{

background-color:#660000;

color:#FFFFFF;

border:1px inset black;

font-size:12px;

}

#footer{

clear: both;

width:682px;

height: 50px;

margin:0 auto;

background-image:url(images/footer.jpg);

background-position:bottom;

background-repeat: no-repeat;

}

#footer div{

padding-top:31px;

text-align: center;

padding-right:10px;

}

#footer a{

font-weight:bold;

}

#main .post{

font-family:Verdana, Arial, Helvetica, sans-serif;

}



#main .post h2{

margin:0;

color:#FFCCCC;
font-size:17px;
font-weight:bold;

}

#main .post small{

color:#999966;

margin:3px;

}

#main .entry{

color:#EEEAE3;

margin:2px;

}

#main .post h2:first-letter{

}

#main .pagetitle{

color:#FFCCCC;

font-styleblique;

border-left:4px solid red;

padding-left:10px;

margin-left:10px;

}

#main .post h2 a:link{

color:#FFCCCC;

}

#main .post h2 a:visited{

color:#FFCCFF;

}

#main .post h2 a:hover{

color:#FF0000;

}



#main .post h3 a:link{

color:#FFCCCC;

}

#main .post h3 a:visited{

color:#FFCCFF;

}

#main .post h3 a:hover{

color:#FF0000;

}





#main .postmetadata{

font-size:10px;

color:#999999;

}

#main .postmetadata a{

font-style:italic;

}

#comment{

width:90%;

background-color:#FFCCCC;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:16px;

}

#submit{

font-size:14px;

color:#FFFFFF;

background-color:#660000;

border:1px solid red;

}



#gglads{

text-decoration: none !important;

}

[_Aerospace_Eng_]

try this for your #topnav ul CSS

#topnav ul{
margin:0;
padding:0;
text-align: center;
}

[Trojanfan]

Thanks aerospace, that got the header part. Any ideas on the sidebar guys?

[Tristan Gray]

I would try declaring the divs differently in your html.

Should be as follows:

header div

nav div

sidebar right div

content div

I had a similar problem, I would be surprised if this does not fix it.

[Trojanfan]

You mean differently than having it as <div id="sidebar"> <div id="header"> etc?

[Tristan Gray]

As in I declare all my major divs in the order in which they will be rendered assuming top to bottom, right to left.

so on the html page I declare

header
nav bar
rightsidebar
center content
leftsidebar (if existent)
footer

And of course if there are elements inside the content part they go inside that div tag respectively.

[Trojanfan]

Hm, but there is no html page. There are just separate php pages

[_Aerospace_Eng_]

change the width of #main to 490, currently your overall width of main is 510px, I think you wanted it to be 500px total but padding counts for overall width as well.

[Tristan Gray]

... The php pages are still written in html markup, you just save them as .php so that the server reads the php functions within the hypertext document properly. Wherever it was that you declared the divs.

[Trojanfan]

Ok, thought you were referring to something else then.

I'm not sure if declaring the divs would fix the problem though since the menu used to be fine but I changed a few padding things (padding with the menu itself, not outside of it) and all of a sudden it changed