Gap after Navigation in IE6

[universe]

Hi folks, this is totally buggin me.

I have a ul wich is my navigation. then after theres a div with a background image. In all browsers it works, except in ie6, i get a gap between the navigation and div.

heres my site: website

heres the problem (only ie6): PROBLEM IN IE6

my html:

Auberge L'Aghjalle






Auberge


Chambres


Gite


Contact










 

my css:

@charset "utf-8";

/* CSS Document */

* {

margin: 0;

padding: 0;

}



body {

background: url(images/bg.jpg) center repeat;

}



ul {

list-style: none inside;

}



h1 {

font-style: italic;

padding-top: 40px;

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

font-size: 1.4em;

color: #334228;

}



h2 {

font-style: italic;

padding-bottom: 10px;

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

font-size: 1.2em;

color: #334228;



}



h3 {

font-style: italic;

padding-top: 20px;

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

font-size: 1.0em;

color: #334228;



}



h4 {

font-style: italic;

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

font-size: 1.0em;

color: #334228;



}

h4#logo {

width: 900px;

height: 85px;

background: url(images/header1.jpg) no-repeat;

text-indent: -9999px;

}



h5 {

font-style: italic;

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

font-size: 1.0em;

color: #334228;



}



p {

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

font-size: 1.0em;

color: #53311C;

padding-left: 10px;



}



.room {

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

font-size: 0.9em;

color: #53311C;



}



.english {

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

font-size: 0.7em;

color: #334228;

font-style: italic;

padding-top: 5px;



}



#page-wrap {

width: 900px;

height: 900px;

margin: 0 auto;

}



#header2 {

height: 57px;

width: 450px;

background:url(images/header2.jpg) top left no-repeat;

font-size:1px;

display: block;

overflow: hidden;



}



#content-header {

height: 83px;

width: 900px;

background:url(images/main_01.jpg) top left no-repeat;

display: block;

padding-left: 60px;

overflow: hidden;



}



#content-main1 {

height: 197px;

background:url(images/main_02.jpg) top left no-repeat;

display: block;

padding-left: 60px;

padding-right: 250px;

overflow: hidden;



}



.floatLeft {

float: left;

border:none;



}



.floatRight {

float: right;



}



#content-main2 {

height: 355px;

background:url(images/main_03.jpg) top left no-repeat;

display: block;

padding-left: 60px;

padding-right: 50px;

overflow: hidden;



}



#content-footer {

height: 123px;

background:url(images/main_04.jpg) top left no-repeat;



}



.sub-left {

padding-top: 20px;

padding-left: 20px;

width: 360px;

float: left;



}



.down{padding-top: 10px;}



.clear-both {

clear: both;

}



a.rollover1 {

display: block;

width: 120px;

height: 120px;

text-decoration: none;

background: url(images/img/room1.png) no-repeat;

float:left;

margin-left: 10px;

margin-right: 10px;



}



a.rollover1:hover {

background-position: bottom;



}



a.rollover2 {

display: block;

width: 120px;

height: 120px;

text-decoration: none;

background: url(images/img/room2.png) no-repeat;

float:left;

margin-left: 10px;

margin-right: 10px;



}



a.rollover2:hover {

background-position: bottom;



}



a.rollover3 {

display: block;

width: 120px;

height: 120px;

text-decoration: none;

background: url(images/img/room3.png) no-repeat;

float:left;

margin-left: 10px;

margin-right: 10px;



}



a.rollover3:hover {

background-position: bottom;



}



a.rollover4 {

display: block;

width: 120px;

height: 120px;

text-decoration: none;

background: url(images/img/room4.png) no-repeat;

float:left;

margin-left: 10px;

margin-right: 10px;



}



a.rollover4:hover {

background-position: bottom;



}



#images {

width:850px;

padding-left: 10px;

padding-top: 20px;



}

#images img {

margin-right: 15px;

border: solid;

border-color: white;

border-width: 3px;



}



#images a:hover img {

border: solid;

border-color: #334228;

border-width: 3px;



}



ul#nav {



}

ul#nav li {

display: inline;



}

ul#nav li a {

display: block;

height: 57px;

text-indent: -9999px;

border:0;

float:left;



}

ul#nav li.auberge a {

width: 127px;

background:url(images/nav/nav-auberge.jpg) bottom center;

}

ul#nav li.chambres a {

width: 121px;

background:url(images/nav/nav-chambres.jpg) bottom center;

}

ul#nav li.gite a {

width: 77px;

background:url(images/nav/nav-gite.jpg) bottom center;

}

ul#nav li.contact a {

width: 125px;

background:url(images/nav/nav-contact.jpg) bottom center;

}



ul#nav li a:hover {

background-position: top center;

}

[sylenix]

try specifying your document mode:

there’s no IE6 mode as far as i know, just try using higher modes and see if it work for you. alternatively, you can create a special, corrective stylesheet for IE6.

other browsers will ignore it.

[zackw]

try floating the ul left and then the div left too, this might bring it up beside it, if not you have either a width or padding/margin problem, if u float both of those things left and then play with the widths and padding im sure eventually you will get it to go in the right place, something is just pushing it down in ie6 as the browser reads widths/padding/margin differently sometimes

calling in a conditional style sheet like sylenix said will help you if you find a way to fix it in only in ie6 but it breaks in the other browsers, then u can put that code in a conditional style sheet so only ie6 brings it in

sorry i cant give you a better answer with the exact code that will help u but i dont have ie6 native on my comp

[sujiths777]

I have not gone thru ur codes. But i may guess for a bug. IE 6 doubles the margin. if you have given margin as 20px; IE6 vl take it as 40px; .Alos a proper doctype should be used for proper working of CSS box model. I think its becoz you have not used float properly.

[Author]

Posts