IE/FF issues..Hopefully a simple fix? Help please :)

Hello there,

I am trying to code this site for a client and I've run into a problem with IE, and i'm sure its totally my fault/stupidity, but I'm stumped and I'm not a CSS Guru just yet so if anyone can help me I'd totally love ya for it ;)

http://www.aquaboogie.net/dujardin/home.php

The code is not very neat/clean at all just yet because I'm just kinda winging it (I usually tidy up my code when everything works). So I apologize for that.

the css can be found here http://www.aquaboogie.net/dujardin/style.css

So basically my problem is, the lil swirly image on the far left at the very bottom in the blue box is showing up where it should using FF, but in IE, it moves all the way to the top. It's in a div called container because I dont know any other way to always keep it there no matter what lol. I gave it a height, but that's not gonna work in the longrun because if the text on the right hand side exceeds the height I specified, it wont stay at the bottom like I need it to. I may need to totally make over the entire code but I"m not sure what I should do first.


**Here's the CSS
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Trebuche MS, Arial, Tahoma, sans-serif;
color: #000;
background-color: #fff3d7;
text-align: center;
background-image:url(background.jpg);
background-repeat:no-repeat;
background-position:center top;
/* part 1 of 2 centering hack */
}
#header {
background-image: url(header.gif);
background-repeat: no-repeat;
background-position: center top;
height: 100px;
width: 850px;
text-indent: -9999px;
}
#wrapper {
margin-top: 36px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background-color: #bce0e2;
border: 1px solid #fff;
text-align:left; /* part 2 of 2 centering hack */
width: 850px;
color:#000000;
background-image:url(wrapperbg.jpg);
background-repeat:no-repeat;
background-position: top;
font-family: "Lucida Grande", "Lucida Sans Unicode", Trebuche MS, Arial, Tahoma, sans-serif;
}
#container {
background-image:url(leftswirlbg.gif);
background-position:left bottom;
background-repeat:no-repeat;
height:auto;
}
#left {
float: left;
width: 330px;
font-size: 12px;
}
#main {
float: right;
width: 500px;
font-size: 12px;
padding: 5px;
margin: 5px;
}
#sidenav {
padding:5px;
margin:20px 5px 5px 5px;
font-size:12px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Trebuche MS, Arial, Tahoma, sans-serif;
width: 300px;
float:left;
}
.clear {clear:both;}

#footer {
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
margin-bottom:50px;
background-color: #511b00;
border: 1px solid #fff;
text-align:left; /* part 2 of 2 centering hack */
width: 830px;
color:#fff;
font-size:10px;
text-align:center;
padding:10px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Trebuche MS, Arial, Tahoma, sans-serif;
}
#sidenav li {
list-style-type: none;
padding: 1px;
display: block;
margin: 1px;
}
#sidenav ul {
margin: 1px;
}.input {
background-color: #C2E4E5;
background-image: url(inputbg.jpg);
border: 1px solid #FFFFFF;
}
form fieldset{
font-family: "Lucida Grande", "Lucida Sans Unicode", Trebuche MS, Arial, Tahoma, sans-serif;
color:#000;
font-size:95%;
margin:10px 10px 20px 0px;
display:block;
padding: 0px 10px 10px 10px;
border:1px solid #C2E4E5;
}
label{
color:#000;
font-size:10px;
display:block;
text-align:left;
margin:4px 0 0 0;
padding:2px;
font-size:95%;
}
input {
background-color: #bce2e2;
background-image: url(inputbg.jpg);
border: 1px solid #FFFFFF;
background-repeat:repeat-x;
/*width:60%;*/
margin:0px 0px 0px 0px;
color:#000;
font-family: "Lucida Grande", "Lucida Sans Unicode", Trebuche MS, Arial, Tahoma, sans-serif;
font-size:95%;
padding:3px;
}
input:focus, textarea:focus {
border: 1px dotted #fff;
}
textarea {
background-color: #bce2e2;
background-image: url(inputbg.jpg);
border: 1px solid #FFFFFF;
background-repeat:repeat-x;
width:60%;
margin:0px 0px 0px 0px;
color:#000;
font-family: "Lucida Grande", "Lucida Sans Unicode", Trebuche MS, Arial, Tahoma, sans-serif;
font-size:95%;
padding:5px;
}
select{
font-family: "Lucida Grande", "Lucida Sans Unicode", Trebuche MS, Arial, Tahoma, sans-serif;
font-size:95%;
background-color:#fff6c4;
width: 35%;
}
/* CONTROLS SEND BUTTON ONLY!!*/
div#submit input {
padding: 5px;
background:#fff6c4;
font: bold 95% Geneva, Arial, Helvetica, sans-serif;
color: #7e8028;
text-transform:uppercase;
border:0;
}
div#submit input:hover {
background:#5B5C16;
color: #fff6c4;
}
.required {
color:#FF0000;
font-weight:bold;
font-size:100%;
padding:3px;
}

I expect that because you have that background image in the container and, because that container starts at the top of that page that ie is putting it at the top.

I would be inclined to put it in its own div, inside the left div, below the menu. Thats probably the easiest way with your existing code but it raises the quesion (with my quick look) what the container div is for.

bazz

hmmmmm, i'll try that

Just to clarify that it is in IE 7 the problem is.

yes, its IE7 to my knowledge. i dont have IE6 anymore lol

ok i dont know what i did, but its working! LOL thanks you guys

in ie6 the swirly img on the left is ok, but the right content gets pushed below the nav.

As srule_ says you need check the page in IE6. There is float dropping.

The main reason for this is the IE6 double float margin bug (http://www.positioniseverything.net/explorer/doubled-margin.html) which affects at least #left and #main. The article contains the fix for the bug which is to add display: inline for the affected floats.

But note that in many cases you can avoid the bug by using padding instead of margin. You can do this in your case too. This gives an equivalent rendering if the element has transparent background color.

another bug that could cause it is the 3px bug, where ie adds 3px of space between a floated element and a none floated one.