Float problems in IE

[Jsheffers]

Ok guys It's me again. lol

I'm working on a new page, and it looks good in every browser except for IE 6 and 7 it looks good in IE 8 though.

 

here is the site.

 

Only problem I'm having is the left column is getting kicked down. I have one floated right and one floated left. It doesn't work in IE. Any suggestions?

 

www.sha ne jef fersphotography.com/garden2/testing.html

 

 

* {margin:0;padding:0;}

body {

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

background-repeat: repeat-x;

}

 

#container

{

width: 800px;

margin: auto;

}

 

#header

{

height: 100px;

width: 800px;

clear:both;

margin:0px;

padding:0px;

}

#header h1

{

font-size:25px;

font-family:Georgia, "Times New Roman", Times, serif;

text-indent: -9999px;

}

 

#header h2

{

display:block;

width:160px;

height:25px;

text-indent:-9009px;

background:transparent;

}

 

#header h2 a {

display:block;

width:100%;

height:100%;

outline:none;

}

#nav

{

width: 295px;

float: right;

margin:0px;

padding:10px;

background-color: white;

min-height: 490px;

}

#nav ul

{

padding-left:20px;

}

#nav ul p

{

font-size:9px;

}

#body

{

min-height: 490px;

width: 465px;

float:left;

margin:0px;

font-family: helvetica;

font-size: 11pt;

color: #9e9e9e;

text-align:left;

padding: 10px;

background-color: white;

}

 

 

#body span {

width: 460px;

}

 

#text1

{

float:left;

width:460px;

font-family: helvetica;

font-size: 11pt;

color: #9e9e9e;

line-height: 15pt;

}

 

#text1 h3

{

width: 373px;

height: 27px;

text-indent: -9999px;

background-image: url(images/head1.png);

background-repeat: no-repeat;

 

}

 

#text1 h4

{

text-indent: -9999px;

width: 330px;

height: 22px;

background-image: url(images/head2.png);

background-repeat: no-repeat;

margin-top: 5px;

padding-top: 5px;

}

#text1 h5{

width: 137px;

height: 23px;

text-indent: -9999px;

background-image: url(images/head3.png);

background-repeat: no-repeat;

margin-top: 5px;

padding-top: 5px;

}

 

#text2

{

float:left;

font-family: helvetica;

font-size: 11pt;

color: #464646;

line-height: 15pt;

}

 

#text2 h3

{

width: 295px;

height: 70px;

text-indent: -9999px;

background-image: url(images/head4.png);

background-repeat: no-repeat;

padding: 2px;

}

#text2 hr

{

 

}

#text3

{

float:left;

}

#text3 h3

{

font-family: Hiragino Kaku Gothic STDN;

color: #525252;

}

#text3 hr

{

 

}

#extra1

{

width: 400px;

height: 100px;

float: left;

}

#extra2

{

height: 100px;

width: 300px;

float: left;

background-image: url(images/logo.png);

 

}

#extra3

{

width: 405px;

height: 62px;

background-image: url(images/mount.png);

background-repeat: no-repeat;

position: relative;

top: 47px;

left: 0px;

z-index: -1;

 

}

#extra4

{

float: left;

position: relative;

top: 85px;

left: 60px;

font-family: Hiragino Kaku Gothic STDN;

font-size: 7pt;

color: #525252;

}

#extra5 img{

width: 342px;

height: 83px;

padding: 25px 0px 0px 55px;

border: none;

}

#extra6 ul{

font-family: Nilland;

font-size: 13pt;

color: #7d7d7d;

float: left;

width: 180px;

padding-top: 19px;

list-style-type: none;

}

 

#extra7

{

width: 602px;

}

#extra8

{

width: 240px;

height: 27px;

text-indent: -9999px;

background-image: url(images/head5.png);

background-repeat: no-repeat;

margin: 5px 0px 3px 0px;

}

 

#footer

{

background-color: #6185a7;

width: 800px;

height: 35px;

clear: both;

margin:0px;

padding:0px;

padding-top: 20px;

display: block;

text-align: center;

color: white;

font-family: georgia;

font-size: 8pt;

}

 

#navlist li a {

font-family: nilland;

font-size: 10pt;

color: #7d7d7d;

text-decoration: none;

margin: 0px;

}

 

#navlist {

clear: both;

float: left;

padding-left: 25px;

}

 

img, div { behavior: url(iepngfix.htc) }

Edited January 19, 2009 by Jsheffers

[falkencreative]

Usually this would be a width problem of some sort, where one of the columns is too wide, and then kicks the other column below.

 

I try to stay away from defining a width and a margin/padding on the same element... it usually causes problems on IE. It's just a guess, but I'm thinking that is your problem, since both your #body and #nav divs do that.

[Jsheffers]

I think I found the problem. I left the div extra7 in my css, which was something I was trying then stopped, and forgot to take it out. I will do what you said though Ben thanks a lot man. Saving me again.