Navigation Error in IE

[Wes]

This probably a really easy problem to fix but I am still learning the ins and outs of CSS

So the problem is that in IE my page looks like this
[img]http://www.wesascolese.com/images/IE-screen.png[/img]

on every other browser (that I know of) it looks like this
[img]http://www.wesascolese.com/images/ff-screen.png[/img]

here is my CSS

Code:

body
{
background:url(images/bg.jpg);
font-family:Verdana, Geneva, sans-serif;
font-size:68.5%;
}

h2 { font-size:1.6em); color:#827857; text-transform:uppercase;}
h3 { font-size:1.4em); color:#827857; text-transform:uppercase;}
h4 { font-size:1.2em); color:#827857; text-transform:uppercase;}
h5 { font-size:0.8em); color:#827857; text-transform:uppercase;}

#page-wrap
{

width:800px;
margin: 0 auto;
background:url(images/main-bg.jpg) repeat-y;
}

#header
{
margin:0 auto;
background:url(images/banner.jpg);
width:800px;
height:155px;

}

#header ul
{
margin:0 auto;
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:2.0em;
font-weight:bold;
margin-left:150px;

}

#header ul li a
{
display:block;
width:100px;
float:left;
color:#fff;
margin:100px 0 5px 0;
text-decoration:none;
text-align:center;
}

#header ul li a:hover
{
color:#e8e4d8;
}

#main
{
width:450px;
margin:0 auto;
}

#main p
{
color:#827857;
}

#gallery ul
{
margin:0 auto;
list-style:none;
}

#gallery ul a
{
color:#FFF;
}
#gallery ul li
{
float:left;
margin:5px;
opacity:.5;

border: 3px solid #fff;
outline: 1px solid #ddd;
background-position: 50% 50%;
}

#gallery ul li:hover
{
outline-color: #bbb;
opacity: .99 /* safari bug */
}

#gallery ul li img
{
height:50px;
width:50px;
background-position: 50% 50%;

}

#footer
{

margin:0 auto;
background:url(images/footer.jpg);
width:800px;
height:191px;
}
#footer p
{
text-align:center;
padding-top:30px;
color:#FFF;
font-size:0.8em;
text-transform:uppercase;
}

.clear {clear:both}

[TheDoc]

I believe you will find your solution in a very recent thread:

viewtopic.php?f=2&t=862

[Author]

Posts