...

View Full Version : Gap after Navigation in IE6



universe123
11-19-2010, 07: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">

<!--HEADER-->

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

<!--CONTENT-->

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, 07: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, 11:35 AM
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">

<!--HEADER-->

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

<!--CONTENT-->

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

Check out with your padding and width because IE6 takes pixels as square
10px in all browsers is different from 10px in IE6 so it is better to check with width padding etc and one more thing IE9 is released and IE6 Is considered to be a dead browser
all top website stop supporting IE6 i am in confusion why still u want to have your website in IE6

universe123
11-20-2010, 02: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, 02: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).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum