Layout messed up in I.E. Help please..

Hi! I am a newbie to building websites. My site looks good in Firefox and Safari but the layout gets messed up in ie. In E.I it puts an extra space between the header and nav and puts the side navigation underneath my content instead of to the right of it. I can not figure out what code I have wrong. Any help would be apprciated!

Thanks!

The link is:
www.sirenhouse.com

and the css I am using is:

/* RESETS & BASIC PAGE SETUP */
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body {
background: url('images/body-bg.jpg') top left;; font-style:normal; font-variant:normal; font-weight:normal; font-size:62.5%; font-family:Lucida Grande, sans-serif
}

ul { list-style: none inside; }
p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
p.metadata { background: #fff9a7; padding: 3px;}
a { outline: none; }
a img { border: none; }

h1 {
font-family: Georgia, serif;
font-size: 2.4em;
font-weight: normal;
color: #80728a;
}
h1#logo {
width: 654px;
height: 112px;
background: url('images/header.jpg') no-repeat center;
text-indent: -9999px
}

/* END RESET */

/* TOOLBOX */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
/* END TOOLBOX */

/* STRUCTURE AND STUFF */

#wrapper {
margin: 0 auto;
width: 750px;
background: url('images/content-bg.jpg') repeat-y;

}



#main-content {
padding: 80px 110px 80px 100px;
}
#article-area {
width: 400px;
float: left;
display: inline;
}
#sidebar {
width: 92px;
float: right;
display: inline;
}

ul#nav {

}
ul#nav li {
display: inline;
}
ul#nav li a {
display: block;
height: 125px;
text-indent: -9999px;
float: left;

}
ul#nav li.donate a {
width: 125px;
background: url('images/donate-nav.jpg') no-repeat bottom center;





}
ul#nav li.about a {
width: 90px;
background: url('images/about-nav.jpg') no-repeat bottom center;
}
ul#nav li.services a {
width: 129px;
background: url('images/services-nav.jpg') no-repeat bottom center;
}

ul#nav li.involved a {
width: 123px;
background: url('images/involved-nav.jpg') no-repeat bottom center;
}

ul#nav li.events a {
width: 123px;
background: url('images/events-nav.jpg') no-repeat bottom center;
}

ul#nav li.recources a {
width: 123px;
background: url('images/resources-nav.jpg') no-repeat bottom center;
}
ul#nav li a:hover {
background-position: center;
}


ul#nav2 {

}
ul#nav2 li {
display: inline;
}
ul#nav2 li a {
display: block;
height: 80px;
text-indent: -9999px;
float: left;

}
ul#nav2 li.corner a {
width: 175px;
background: url('images/clients-nav.jpg') no-repeat bottom center;
margin-right: 91px
}
ul#nav2 li.hope a {
width: 175px;
background: url('images/hope-nav.jpg') no-repeat bottom center;
}

ul#nav2 li.enews a {
width: 175px;
background: url('images/enews-nav.jpg') no-repeat bottom center;
}

ul#nav2 li.supporters a {
width: 175px;
background: url('images/supporters-nav.jpg') no-repeat bottom center;
}

ul#nav2 li.boutique a {
width: 175px;
background: url('images/boutique-nav.jpg') no-repeat bottom center;
}

ul#nav2 li a:hover {
background-position: center;
}


#footer {
min-height: 127px;
background: url('images/footer-bg.jpg') no-repeat;
}

/* END STRUCTURE */

 

Can you share the exact HTML code you are using where there's a problem??

IE has a problem where there's sometimes a 3px gap - that might be what you're talking about.

IE is retarded so there's a few reasons why it could be doing that. Post the HTML code here where there is the gap between the header and navigation or whatever.

As for the navigation being below the content that can be caused by something taking up too much width and IE just puts it underneath it since it can't fit it in that width. That might not be it though.

 

Hi! Yep, it was that white gap you referring to that was messed up. Someone told me that in IE if you put spaces in between the HTML code it might interperet that as a space. So I tried connecting the code so there was no space but it still didnt get the images to connect. I did some research and found out that I could try using image containers. I tried that and it seemed to do the trick of getting rid of the white space. YAY! Thanks again for your response!!