Horrible gap in IE6 and IE7

Free WordPress Themes

Wordpress and Webdesign Forum go41 » WordPress Code Snippets

1. 

   adamwork
   Member

   Hi

   Between my navigation bar, and slider, I have a horrible gap that appears in IE6 and 7

   I'm guessing it's to do with floats?

   Here's my code:
   
<div id="header-container">
<div id="head" class="clearfloat">

   <div class="clearfloat">
   <div id="logo" class="left">
   /"><img src="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/images/logo.gif" width="976px" height="86px" alt="" />
   </div>

   <div class="right"></div>

   </div>

   <div id="navbar" class="clearfloat">

   <ul id="page-bar" class="left clearfloat">

2. Home
3. News
4. Special Offers
5. Library
6. Blogs
7. Images & Videos
8. Events
9. Contact Us

<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div>
</div>
</div>

<div id="page" class="clearfloat">

<?php get_header(); ?>

<?php if(!is_paged()) { ?>

<div id="top" class="clearfloat">
</div>
</div>

<div id="s-container">

<div id="s-test">
<div id="s">
<div id="myContent">
<p>

<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>

</p>
</div>
</div><!-- end s -->
</div>
</div><!-- end s container -->

The gap appears between the end of the navigation bar, and the start of my slider (s-container). Here's the CSS:

#s-container{
margin-left: 0;
margin-right:0;
margin-bottom:0;
margin-top:0;
background: url('images/sliderbck.gif') repeat top left;
}

#s-test{
width: 983px;
position: relative;
margin: 0 auto;
overflow: hidden;}

#s{
width: 983px;
margin: 0 auto;
height: 300px;
padding: 3px 0 0 0;
overflow: hidden;}

#head {
width:986px;
margin:0 auto;
margin-top:0;
padding:0px;
font-size:0.7em;}

#header-container{
margin: 0 auto;
background: url('/images/header.gif') repeat-x top left;
padding:0px;
background-color:#000000;}

#navbar {
width:986px;
float:right;
text-transform:uppercase;
background:#333333 url(images/navbar.png);
}

#page-bar {
width:986px;
}

#page-bar ul {
list-style: none;
}

#page-bar li {
float:left;
list-style:none;
cursor: pointer;
display:block;
border-right:1px solid #333;
}

#page-bar li:hover {
background: #333333;
}

#page-bar a, #page-bar a:visited {
margin: 0px;
padding:5px 16px;
font-weight:bold;
color:#FFF;
display:block;
}

#page-bar a:hover {
text-decoration:none;
display:block;
}

/* Float Properties*/

.clearfloat:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfloat {
display: inline-block;
}

Any help much appreciated.