PDA

View Full Version : Trouble with CSS layout in Firefox and IE7


HellaBAD
December 16th, 2006, 06:22 PM
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:
http://img186.imageshack.us/img186/4476/example1ad5.jpg

and here it is in IE6, not showing the strange break:
http://img170.imageshack.us/img170/7038/example2ku1.jpg

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!
nobody
December 16th, 2006, 08:08 PM
You forgot a semi-colon at the end of the last property under body. Probably not the solution but a quick fix that may have something to do with it.
HellaBAD
December 16th, 2006, 08:57 PM
Haha, thanks for catching that. Sadly however, that isn't the cause of the problem. Thanks for the help though.:thumb2:
Seb Hughes
December 17th, 2006, 03:35 AM
Not sure if this will work, but in your content div try this.

position: absolute; top:140px; (You might need to change the from top value).
HellaBAD
December 17th, 2006, 11:32 AM
Not sure if this will work, but in your content div try this.

position: absolute; top:140px; (You might need to change the from top value).

It works perfectly! Thanks so much Seb, this little problem has been a thorn in my side for quite some time, and it's so simple, haha.
Seb Hughes
December 17th, 2006, 12:13 PM
It works perfectly! Thanks so much Seb, this little problem has been a thorn in my side for quite some time, and it's so simple, haha.

Your welcome :D
seth.aldridge
December 17th, 2006, 07:49 PM
xxviii:

Just a heads up. The last attribute in CSS does not need the ";"

This:



body { width:100%; height:100%; }and This:




body { width:100%; height:100% }The ";" breaks up attributes and the "}" closes out the entire style...I'm really bad with what you call them...I'm not sure if attribute and "entire style" are the correct terms...but that's why you should stay in school!

:)
tommythewolfboy
December 18th, 2006, 05:32 PM
btw, I find removing all the browsers' default margins and padding (and then adding them back in where appropriate for p, h1, h2, li, etc.) often helps with these sort of issues.
* {
margin: 0;
padding: 0;
}