----- Original Message ----- 
From: [EMAIL PROTECTED] 
To: css-d@lists.css-discuss.org 
Sent: Sunday, August 14, 2005 10:18 PM
Subject: gap in ie


This is ok in firefox but a gap appears in IE. There are two 800px divs then a 
holder which holds all the buttons, then the info box holder which has a 9px 
top, middle (repeating) section for all my text and images and a 9px bottom.


The HTML

---------------------------------------

<div id="container">

<div id="top_banner"></div>  

<div id="thin_banner"></div>

  <div id="button_container">
          <div id="bluefly_but"><p><a href="home.php"></a></p></div>
        <div id="services"><p><a href="whoarewe.php"></a></p></div>
        <div id="projects"><p><a href="home.php"></a></p></div>
        <div id="contact"><p><a href="home.php"></a></p></div>
        <div id="links"><p><a href="home.php"></a></p></div>
        <div id="buttons_bottom"></div>
</div>
<div id="info_holder">
<div id="info_top"></div>
<div id="infobox"></div>
<div id="info_contents">
  <p>asdasdasdasd
  a
  sdsa
  d</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</div>


  <div id="bottom"></div>
</div>

The css

-------------------------------------

#container {
 width: 800px;
 background-color: #FFFFFF;
 margin-right: auto;
 margin-left: auto;
 position: relative;
 height: auto; 
}
#info_contents {
 background-image: url(images/bf_06.gif);
 background-repeat: repeat-y;
 width: 552px;
 height: auto;
}
#info_holder {
 width: 552px;
 height: auto;
 background-color: #CC3300;
 float: left;
}
#info_top {
 width: 552px;
 height: 9px;
 background-repeat: no-repeat;
 float: left;
 clear: both;
 background-image: url(images/bf_04.gif);
}
#info_bottom {
 width: 552px;
 height: 9;
 background-image: url(images/bf_13.gif);
 background-repeat: no-repeat;
 position: relative;
 float: left;
 background-color: #FF3333;
}
#thin_banner {
 width: 800px;
 background-color: #00FF33;
 margin-right: auto;
 margin-left: auto;
 position: relative;
 height: 50px;
 background-image: url(images/bf_02.gif);
 background-repeat: no-repeat;
 margin-bottom: 2px;
}
#footer {
 width: 800px;
 background-image: url(images/bf_13.gif);
 background-repeat: no-repeat;
 background-color: #CC6666;
 height: 20px;
 
}
#end_bit {
 position: relative;
 background-image: url(images/bf_06.gif);
 background-repeat: no-repeat;
 float: left;
 height: 503px;
 width: 46px;
 background-position: left top;
}
#middlebit {
 background-image: url(/images/bf_02.gif);
 float: left;
 background-repeat: no-repeat;
 width: 118px;
 height: 503px;
 position: relative;
 
}
.thin_border {
 background-image: url(images/bf_02.gif);
 background-repeat: no-repeat;
 height: 50px;
 width: 800px;
 position: relative;
}
.clear {
 clear: both;
 float: none;
}
#button_container {
 width: 248px;
 height: auto;
 float: left;
 }
#bottom {
 background-repeat: no-repeat;
 height: 73px;
 width: 800px;
 background-color: #00FF99;
 clear: both;
 background-position: center top;
 background-image: url(/images/bf_14.gif);
}

#bluefly_but a {
 width: 248px;
 height: 36px;
 background: url(images/buttons/bf_but.gif) no-repeat;
 position: relative;
 display: block;
 float: left;
 clear: both;

}
#bluefly_but  a:hover { 
background-position: -248px;

}

#services a {
 background: url(images/buttons/services_but.gif) no-repeat;
 height: 35px;
 width: 248px;
 position: relative;
 float: left;
 clear: both;

}
#services a:hover { 
background-position: -248px;

}

#projects a {
 width: 248px;
 height: 40px;
 background: url(images/buttons/projects_but.gif) no-repeat;
 position: relative;
 float: left;
 clear: both;


}
#projects a:hover { 
background-position: -248px

}
#contact a {
 width: 248px;
 height: 34px;
 background: url(images/buttons/contact_but.gif) no-repeat;
 position: relative;
 float: left;
 clear: both;


}
#contact a:hover { 
background-position: -248px

}
#links a {
 width: 248px;
 height: 38px;
 background: url(images/buttons/links_but.gif) no-repeat;
 position: relative;
 float: left;


}
#links a:hover { 
background-position: -248px

}

#buttons_bottom{
 background-image: url(images/bf_12.gif);
 background-repeat: no-repeat;
 height: 188px;
 width: 248px;
 float: left;
}

p {
margin: 0; 
padding: 0; 

}
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to