CSS Forum

**angele803** · 10-03-2006, 05:21 PM

I am working on this site http://www.ucok.edu/ccfr/ for my school. It looks right in IE, but in firefox and netscape, there is a gap between the header and content. Anyone know how to fix this? Thanks in advance!

HTML Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CCFR</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>
<body>
<div id="outer">
<div id="hdr" align="right"></div>
<div id="bar"><p class="menuBar"><a class="white" href="http://www.ucok.edu/ccfr/">Home</a> | <a class="white" href="http://www.ucok.edu/ccfr/whatsNew.html">What's New</a> | <a class="white" href="http://www.ucok.edu/ccfr/about.html"> About Us</a> | <a class="white" href="http://www.ucok.edu/ccfr/membership.html">Membership Info</a></p></div>
<div id="bodyblock" align="right">
<div id="l-col" align="center">
        <p class="mainMenu">
        <a class="white" href="http://www.ucok.edu/ccfr/">Home</a>
		<br />
		<a class="white" href="http://www.ucok.edu/ccfr/whatsNew.html">What's New</a>
		<br />
		<a class="white" href="http://www.ucok.edu/ccfr/about.html">About UCO - CCFR</a>
		<br />
		<a class="white" href="http://www.ucok.edu/ccfr/bylaws.html">Bylaws</a>
		<br />
		<a class="white" href="http://www.ucok.edu/ccfr/officers.html">Officers</a>
		<br />
		<a class="white" href="http://www.ucok.edu/ccfr/mission.html">Mission Statement</a>
		<br />
		<a class="white" href="http://www.ucok.edu/ccfr/membership.html">Membership Info</a>
		<br />
		<a class="white" href="http://www.ncfr.org/" target="_blank">National CFR</a>
		<br />
		<a class="white" href="http://www.ucok.edu/ccfr/discussions.html">Discussions</a>
		<br />
		<a class="white" href="http://www.ucok.edu/ccfr/classifieds.html">Classifieds</a>
		<br />
		<a class="white" href="http://www.ucok.edu/ccfr/links.html">Links</a>
		<br />
		<a class="white" href="http://www.ucok.edu/ccfr/teenLifeSkills.html">Teen Life Skills</a>
		<br />
		<a class="white" href="http://www.ucok.edu/ccfr/contact.html">Contact Us</a>
		<br />
		<a class="white" href="http://www.ucok.edu/ccfr/learned.html">I Have Learned</a>
		</p>
</div>

<div id="cont">
   <h2>Hello Members!</h2>
   <p><img src="images/members.jpg"></p>
   <br />
   <p class="content">Hello, everyone! I hope you all had a WONDERFUL summer break!    
You may contact me at <a href="mailto:markelhof@msn.com">markelhof@msn.com</a> if you have any news, articles, or other info that you would like published on our web-page.
Please go to the <a href="contact.html">"Contact Us"</a> page to tell us what you think of our new site!</p>
</div>
</div>
<div id="ftr" class="footer"><a class="white" href="http://www.ucok.edu">UCO Homepage</a> | <a class="white" href="mailto:markelhof@msn.com?Subject=Mail from CCFR Site">Contact Webmaster</a></div>
</div>

<p align="center">Last updated 03 October 2006 by Stephanie Kendall
<br />
In association with The University of Central Oklahoma
<br />
"The views and opinions expressed on this page are strictly those of the author."</p>

</body>
</html>

</body>
</html>

CSS Layout Code:

Code:

/* Layout Stylesheet */ 

body {
 margin:20px;
 background:#999999;
 text-align:center;
 padding:0;
 }

#outer {
 text-align:left;
 border:3px solid #000000;
 width:760px;
 margin:auto;
 }

#hdr {
 background-image:url(images/header.jpg);
 height:120px;
 width: 760px;
 background-repeat:no-repeat;
 }

#bar {
 height:27px;
 width:760px;
 background-image:url(images/bar.jpg);
 margin:0px;
 }

#bodyblock {
 position:relative;
 background: #FFFFFF;
 min-height:350px;
 width:760px;
 padding:0px;
 }

#l-col {
 background-color:#AE2328;
 float:left;
 width:160px;
 padding:0px 0px 25px 0px;
 }

#cont {
 width:560px;
 background:#ffffff;
 color: #333333;
 text-align:center;
 padding:0px 30px 20px 0px;
 }

#ftr {
background-image:url(images/footer.jpg);
background-repeat:no-repeat;
height:20px;
width:760px;
text-align:center;
 }

CSS Style Code:

Code:

/* CSS Document */
.header{
        font:'Times New Roman', Times, serif;
		color:#FFFFFF;
		}
.menuBar {
          font:'Times New Roman', Times, serif; 
          color:#FFFFFF; 
		  padding:4px 10px 0px 0px;
		  text-align:right;
		  }

.mainMenu{
          text-align:right;
		  font:'Times New Roman', Times, serif;
		  color:#FFFFFF;
		  padding: 0px 7px 0px 0px;
		  line-height: 1.5em;
		  background-repeat:no-repeat;
		  margin:0px;
		  }
		  
.content{
         text-align:center;
		 padding:0px 20px 30px 20px;
		 line-height: 1.5em; 
		 font-size:16px;
		 margin:0px;
		 }
		 
.footer{
        text-align:center;
		font:'Times New Roman', Times, serif;
		color:#FFFFFF;
		}
		
a.white:link {color: #FFFFFF;}     /* unvisited link */
a.white:visited {color: #FFFFFF;}  /* visited link */
a.white:hover {color: #FFFFFF; font-weight:bold;}   /* mouse over link */
a.white:active {color: #FFFFFF;}   /* selected link */ 

p {
 margin:0;
 padding:0px;
 }

**vangogh** · 10-03-2006, 06:03 PM

Took me a little bit to find it, but it's the default margin-top on the h2 that's causing the problem. Setting it to 0 should solve the problem.

h2 {margin-top:0}

**angele803** · 10-04-2006, 02:48 AM

Thank you soooooo much. This has been driving me insane! I thought it was something to do with a margin setting, but I couldnt figure out where. I know my code was a headache to get through, but I appreciate it soooo much!

**vangogh** · 10-04-2006, 04:41 PM

Glad to help. I think it's happened to me before which is what made me think of it. It wasn't my first approach though. Sometimes I find that you have the right thinking like in this case with the margins being off, but you're looking at the wrong page elements.