Gap after Navigation in IE6

universe123

11-19-2010, 06:22 PM

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 (http://www.aghjalle.fr/)

heres the problem (only ie6): PROBLEM IN IE6 (http://img517.imageshack.us/img517/8206/ie6error.jpg)

my html:
<div id="page-wrap">



<h4 id="logo">Auberge L'Aghjalle</h4>

<ul id="nav">
<li class="auberge"><a href="index.html">Auberge</a></li>
<li class="chambres"><a href="chambres.html">Chambres</a></li>
<li class="gite"><a href="gite.html">Gite</a></li>
<li class="contact"><a href="contact.html">Contact</a></li>
</ul>

<div id="header2"></div>



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;
}

abduraooft

11-20-2010, 06:50 AM

Adding float:left; to #nav and dropping width from #header2 may fix it, though I'd recommend you to avoid slicing that image into two. Use it as a single image and apply as the background of a <div> and use absolute position to place it over there.

PS: Nice design!

santhoshj400

11-20-2010, 10:35 AM

universe123

11-20-2010, 01:01 PM

thx alot guys, ill give absolute positioning a try.

i know ie9 is out and ie6 is almost dead, but theres still a few pople using that old bugger.

if that doesnt work i just leave it that way.

cheers

abduraooft

11-20-2010, 01:22 PM

if that doesnt work i just leave it that way. That should work (or let's make it work)! :)

PS: You'd need to save the images as transparent pngs and apply some hacks for IE6 to get the alpha transparency.

The way you've sliced and placed the logo in your document is also wrong. Get it as a single(transparent) image and add an <img> tag(with a proper alt attribute) to render it. In that way your document would become semantic (http://boagworld.com/technology/semantic-code-what-why-how).