http://www.blue-fly.co.uk/example.jpg - the red gap between
<div id="info_top"></div>
<div id="infobox"></div>
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 (rounded corners), middle (repeating) section for all my text and images
and a 9px bottom (rounded corners).
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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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/
