Forum Moderators: not2easy
So here is the code. Preview it in mozilla, netscape, firefox, etc. Then preview it in Internet Explorer and Opera. You will notice a big gap between the header and the content.
<!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" dir="ltr" lang="en" xml:lang="en">
<head>
<title>Spacing Problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en" />
<style type="text/css">
<!--
/*---------------------------------------------------
HTML tags
---------------------------------------------------*/
body {
background-color: #E6E2D4;
margin: 0;
padding: 0;
}a img {
border: 0px none;
}
/*---------------------------------------------------
Layout divs
---------------------------------------------------*/
div#container {
width: 95%;
border: 1px solid #000;
margin: 0 auto 2px auto;
background-color: #FFF;
}
div#header {
height: 74px;
background-color: #000;
}
div#content {
margin: 0 20px 20px 204px;
}
div#footer {
clear: both;
background: #C9C9C9 url(images_sunrise/footerbg.gif) repeat-x top left;
height: 21px;
text-align: center;
white-space: nowrap;
}
/*---------------------------------------------------
#content HTML tags and classes
---------------------------------------------------*/
#content fieldset {
font: 0.8em Verdana, Arial, "Lucida Grande", sans-serif;
color: #616161;
padding: 4px;
margin-bottom: 20px;
display: block;
}
#content fieldset label {
margin-top: 15px;
display: block;
font-size: 1em;
}
#content fieldset label.first {
margin-top: 0;
}
#content fieldset legend {
font-weight: bold;
color: #F48900;
}
#content label {
font: 0.8em Verdana, Arial, "Lucida Grande", sans-serif;
color: #616161;
}
/*---------------------------------------------------
#footer HTML tags and classes
---------------------------------------------------*/
#footer img {
margin-top: 8px;
}
/*---------------------------------------------------
Input type and form object classes
---------------------------------------------------*/
input.button {
font-size: 1em Verdana, Arial, "Lucida Grande", sans-serif;
color: #616161;
background-color: #E6E2D4;
border: 1px solid #616161;
}
input.textbox {
font: 1em Verdana, Arial, "Lucida Grande", sans-serif;
color: #616161;
background-color: #FFF;
border: 1px solid #616161;
width: 450px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<form method="post" action="styling.php" onsubmit="return checkForm(this);">
<fieldset>
<legend>Some Random Form</legend>
<label for="1" class="first">Field 1:</label>
<input type="text" name="1" id="1" maxlength="50" class="textbox" />
<label for="2">Field 2:</label>
<input type="text" name="2" id="2" maxlength="50" class="textbox" />
</fieldset>
<input name="submitButton" type="submit" value="Submit" class="button" />
</form>
</div>
<div id="footer">
<a href="#" target="_blank"><img src="images_sunrise/footer_copyright.gif" width="321" height="5" name="Image3" /></a><img src="images_sunrise/footer_spacer.gif" width="20" height="5" /><a href="#"><img src="images_sunrise/footer_terms.gif" width="31" height="5" name="Image4" /></a><img src="images_sunrise/footer_spacer.gif" width="20" height="5" /><a href="#"><img src="images_sunrise/footer_aboutinfusion.gif" width="83" height="5" name="Image5" /></a>
</div>
</div>
</body>
</html>
Any help is greatly appreciated. Thanks a lot.
[edited by: SuzyUK at 9:56 pm (utc) on May 4, 2004]
[edit reason] edit title [/edit]
There are some elements, e.g. <p>, <hn>, that have default margins/padding built into them.. <form> is another one ;)
in order to find the one that is causing the problem it's a good idea to put temporary background colors onto elements to "see" where the gap is occuring..
in this case if you put a background color onto your <form> in the content area you'll see it;
#content form {background: #fcc;}
The reason it's "OK" in Moz is that it's (top)margin is collapsing I haven't quite got to grips with that yet myself.. but seeing as how only Moz supports this feature so far I find it best to remove default margins from all elements that have them and control the required spacing with padding. Something like this at the start of the stylesheet.. h1, h2, h3, p, form {margin: 0;}
but if you want to try this:
#content form {background: #fcc; padding: 10px; margin: 0;}
adjust the padding to suit and remove the background color..
Suzy
Once again, thank you.
- Bryan
