Hello everyone, I’ve had this problem with every single one of the CSS layouts I’ve made and never found a solution for it on the internet. For some reason, in Firefox and the new IE7, but not IE6, there is always a transparent, 3 pixel high space between two divs that are right on top of eachother. The divs usually both contain images, and the images inside of them fill the div completely. Code examples and more below.
Here is an example of the problem in Firefox:
and here it is in IE6, not showing the strange break:
CSS:
/* Phase 2 Studio CSS Style Sheet */
/* basic elements */
body {
font: 12pt Georgia, "Times New Roman", Times, serif;
color: #000;
background: #39C;
margin: 0px;
width: 100%;
height: 100%
}
p {
font: 10pt Verdana, Arial, Helvetica, sans-serif;
margin-top: 0px;
text-align: justify;
}
h3 {
font: normal 12pt georgia;
letter-spacing: 1px;
color: #7D775C;
margin-bottom: 0px;
}
a:link {
font-weight: bold;
text-decoration: none;
color: #B7A5DF;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #D4CDDC;
}
a:hover, a:active {
text-decoration: underline;
color: #9685BA;
}
/* specific divs */
#container {
width: 100%;
height: 430px;
padding: 0px;
margin: 0px;
}
#header {
background: url(header_bg.jpg) repeat-x top right;
width: 100%
heigth: 140px;
padding: 0px;
margin: 0px;
}
#content {
background: url(bg.png) repeat-x;
width: 100%;
height: 430px;
padding: 0px;
margin: 0px;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Korey Jones" />
<meta name="keywords" content="design, css, cascading, style, sheets, xhtml, cartoon, phase, phase2, studio, p2s, slipshod, uat" />
<meta name="description" content="Phase 2 Studio Website." />
<meta name="robots" content="all" />
<title>Phase 2 Studio :: HTML :: News</title>
<!-- to correct the unsightly Flash of Unstyled Content. http://www.bluerobot.com/web/css/fouc.asp -->
<script type="text/javascript"></script>
<style type="text/css" media="all">
@import "style.css";
</style>
<!-- *** PNG Fix *** -->
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="includes/scripts/pngfix.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<img src="phase2headertitle.png" alt="Phase 2 Studio" width="530" height="140" />
</div>
<div id="content">
lol
</div>
</div>
</body>
</html>
If there is anything else you need me to post, just ask. I’m sure this is easily solvable, but I’ve never been able to find anything on it. Thanks again!
