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:
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">
Home
News
Special Offers
Library
Blogs
Images & Videos
Events
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:
Code:
#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.
(von: adamwork)
Hier noch 6 weitere Ergebnisse dieses Threads:
Re: Horrible gap in IE6 and IE7 :: Reply by Joern
26. Jul. 2010 (von: Joern)
could you pls give me a link to the page with that problem?____________________you find me on Google+, Twitter and Facebook Weiterlesen →
Re: Horrible gap in IE6 and IE7 :: Reply by adamwork
26. Jul. 2010 (von: adamwork)
link removed by admin Weiterlesen →
Re: Horrible gap in IE6 and IE7 :: Reply by Joern
26. Jul. 2010 (von: Joern)
I think it's the empty div id page you find in your source code:Code:<div id="page" class="clearfloat"> <div id="top" class="clearfloat"> </div> </div>Upper part of this starts in header.php, the following id top is in index.phptry to remove at least the…
Re: Horrible gap in IE6 and IE7 :: Reply by adamwork
26. Jul. 2010 (von: adamwork)
hi joernI tried removing all of the code above..... and it worked Thanks so much for your help:-) Weiterlesen →
Re: Horrible gap in IE6 and IE7 :: Reply by adamwork
26. Jul. 2010 (von: adamwork)
please could you remove url above. many thanksI can confirm it's looking good nowlink is removed, Weiterlesen →
Re: Horrible gap in IE6 and IE7 :: Reply by adamwork
27. Jul. 2010 (von: adamwork)
Thanks Jorn Weiterlesen →