go41

Horrible gap in IE6 and IE7

von Joern am 26. Jul. 2010 | Keine Kommentare

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 →

Autor:

Du findest mich auch auf Google+, Twitter und Facebook!

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.


weitere forum Beiträge: