DIV problem in IE7 Only (IE8 works fine)

[brm5017]

www.presto-technologies.com

 

The site works fine in FireFox, Safari and IE8 but I open the site in IE7, the Main-Content and the Sidebar Divs line up in succession, not adjacent to each other.

 

Anyone have any idea what I'm doing wrong?

 

I was recommended to get IE7 displaying properly, then use the tag: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> so that IE8 would work fine too.

 

 

* {
margin: 0;
padding: 0;
}

body {
font-size: 62.5%;
background: url(../images/blackwhirl2.jpg) repeat;
}



p {
font: 1.2em/1.8em Georgia, serif;
margin-bottom: 10px;
color:#cc9966;
}

p.forms{
font: 1.1em Georgia, serif;
margin-bottom: 10px;
color:#cc9966;
}

h1 {
font: 2.0em Georgia, serif;
color: #cc9966;

}

h2 {
font: 1.5em Georgia, serif;
color: #cc9966;
margin-bottom: 10px;
}

ul {
margin-left: 25px;
}

img {
border: none;
}

#listinbody{
font: 1.2em/1.8em Georgia, serif;
color:#cc9966;
}

#page-wrap {

min-width: 920px;
max-width: 920px;
margin: 10px auto;
}
#page-wrap #inside {
	margin: 10px 10px 0px 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

#main-content {
width:800px;
padding-left: 40px;
padding-top: 20px;
}

#header {
background-image: url(../images/icons/blackwhirl2.jpg);
text-align: center;
}

#left-sidebar {
width: 150px;
float: right;
padding-left: 15px;
padding-top: 20px;
}

#footer {
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: #cc9966;
}

ul.option{
list-style-image: url(../images/icons/arrow-right.png);
  }
ul.option li {
    font: 110% georgia, times, serif;
color: #cc9966;
margin: .5em 0;
}

a:link {color:#cc9966} /* unvisited link */
a:visited {color:#cc9966} /* visited link */
a:hover {color:white}

 

[brm5017]

I figured it out. The DIVs were overlapping, and apparently IE7 didn't like it. Aarrgghh.