CSS Forum

**hellhound121** · 12-08-2006, 10:23 AM

Hey all, i know you are probably sick of me, im always asking for help hehe. Well im designing a E-portfolio for a friend, and i got it looking and working GOOD in EI, but when i view it in Firefox i got 2 problems, one- The header is like 70px from the top of the screen. i think its to do with the container, but not 100% sure.

Second- There is a gap inbetwean my Content, and footer. i know this is to do with the padding and margins, if you set them to 0, they go away, i did this but it still isnt working, could you perhaps help me again?

ty

HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="holder">

<div id="header"><div id="headertext">
Header
</div></div>

<div id="content"><div id="contenttext">
<h3>Hello and welcome.</h3>
<p>Content</p>
</div></div>

<div id="footer"><div id="footertext">
<p>Copyright &copy; All Rights Reserved - William Bird</P></div>
</div>

</div>
</body>
</html>

--------------------------------------------------------------

CSS

Code:

body {
    background-image:url(bodybg.gif);
    background-repeat: repeat-x;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

#holder {
    width:787px;
    margin: auto;
    padding: 0 0 0 0;
}
#header {
    background-image: url(header.gif);
    background-repeat: no-repeat;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: 787px;
    height: 204px;
}
#content {
    background-image: url(background.gif);
    background-repeat: repeat-y;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: 787px;
}
#footer {
    background-image: url(footer.gif);
    background-repeat: no-repeat;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: 787px;
    height: 70px;
}



#headertext {
    font-family: Tahoma;
    font-size: 11px;
    line-height: normal;
    color: #623a7a;
    margin: 70px 0 0 25px;
    padding: 0 0 0 0;
}

#contenttext {
    font-family: Tahoma;
    font-size: 11px;
    line-height: normal;
    color: #666666;
    margin: 0 0 0 25px;
    padding: 0 0 0 0;
}
#footertext {
    font-family: Tahoma;
    font-size: 11px;
    line-height: normal;
    color: #666666;
    margin: 20px 0 0 287px;
    padding: 0 0 0 0;
}
h3 {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-family: Tahoma;
    line-height: normal;
    color: #9e58b7;
}
p {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-family: Tahoma;
    font-size: 11px;
    line-height: normal;
    color: #666666;
}
A:link {
    text-decoration:none;
    font-family: Verdana;
    font-size: 11px;
    color: #623a7a;
    line-height: normal;
}
A:visited {
    text-decoration:line-through;
    font-family: Verdana;
    font-size: 11px;
    color: #9b69b9;
    line-height: normal;
}
A:active {
    text-decoration:none;
    font-family: Verdana;
    font-size: 11px;
    color: #623a7a;
    line-height: normal;
}
A:hover {
    font-family: Verdana;
    font-size: 11px;
    color: #9b69b9;
    line-height: normal;
}

Could you also tell me how to neaten up my CSS? it looks kinder messy there :<

**ADAM Web Design** · 12-08-2006, 11:39 AM

Change your holder margin to: 0px auto; . That should flush your page up against the top.

The gap between your content and your footer is caused by this line:

Code:

margin: 20px 0 0 287px;

20px is your top margin. If you want to get rid of the top margin, set that to 0.

**hellhound121** · 12-08-2006, 12:16 PM

ok thanks it sorted the margin problem, but the holder problem still remains? it doesnt go flush. any more ideas please?

**foobar** · 12-08-2006, 02:22 PM

Try changing the margin in #holder to:

HTML Code:

margin: 0 auto;

**hellhound121** · 12-08-2006, 03:08 PM

i said i tryed that and it didnt work

**LadynRed** · 12-08-2006, 03:30 PM

It's not working because your layout is suffering from margin-collapse - which, by the way, is NOT a bug. Put a 1px padding-top on #holder and on #header and your header and holder will draw to the top where you want it.

See Eric Meyer's article on margin-collapsing here:
http://www.complexspiral.com/publica...psing-margins/

Why are you making extra divs for your #contenttext, #headertext, and #footertext ? Seems like extra work to me. If you want to keep text away the edges of your divs, use padding and margin on your <p> 's in your CSS.

**hellhound121** · 12-08-2006, 05:55 PM

but i want like my footer in the center and if i used like margin: 0 0 0 300px;, on the <P>, then my navigation would also take the same properties, thats why i made more div's for each text area.

and can you tell me why it collaps, whats the purpos of the 1px top?

**LadynRed** · 12-09-2006, 11:54 AM

Quote:

and can you tell me why it collaps, whats the purpos of the 1px top?

All of it is explained in the Eric Myer article I linked you too.. read it and be enlightened. The 1px top padding STOPS the margin collapse.

Quote:

then my navigation would also take the same properties

No, it wouldn't, not if you use specificity as you should. If you specify footer p{rules}, and align your text where you want it , then you don't need a 300px wide margin.