How to set 0 margins for header/footer, but 8px standoff for content?

Forum Moderators: not2easy

Message Too Old, No Replies

How to set 0 margins for header/footer, but 8px standoff for content?

How to set 0 margins for header and footer, but 8px standoff for content

Raybo

10:01 am on Jun 26, 2004 (gmt 0)

HI all ...

I need some help.

What is the best way to handle a 0 margin for the header and footer, but standoff 8 pixels on the content only, and NOT have to use a marginwidth in the html body tag? - I have searched the net, but what I've found just doesn't work at all -it blows up everything.

When I've tried to use margins in the body css selector, I'm getting weird behavior regardless how I set them.

I have searched this forum, and viewed as many threads as I have time, but have not found anything specific to my needs.

Will someone please demonstrate to me how I can set my header and footer to be O px, but still be able to set up an offset of 8 px for my content div?

Thanks so much in advance.

marek

11:04 am on Jun 26, 2004 (gmt 0)

HTML:


<body>
<div id="header">
...
</div>
<div id="content">
...
</div>
<div id="footer">
...
</div>
</body>

CSS:


body {
margin: 0;
padding: 0;
}
#content {
 padding: 8px;
}

Instead of 8px, I'd recommend using em for padding around block of text.

Raybo

12:51 pm on Jun 26, 2004 (gmt 0)

Hi Marek,

thanks for your swift reply, and moreso your help.

I had already tried exactly what you posted, but it's still breaking. I say 'breaking', as the browser margins go back to default - no matter what I try to do with the style sheet, my margins look as if it's not even reading the styles at all [but I know it is]. Hope this makes sense.

I've checked against all modern browsers - but main tester is IE 5.1 for mac.

I can post a partial of my existing style sheet - maybe you might see something that I'm missing. [?]

Please excuse the depth here. Normally, desperate issues require desperate measures. [Length of selectors is long on the tooth until we narrow down styles.]

#body {
margin: 0px;
padding: 0px;
font-family: "Lucida Grande", Geneva, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
background-color: #eeeeee;
}

#header {
width: 100%;
height: 76px;
background: #ffffff url(/images/header_back.png) repeat top left;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
padding-right: 0px
}

#logo {
float:left;
width: 196px;
height: 76px;
background: transparent url(/images/ms_logo.png) no-repeat top left;
color: #ffffff
}

#subheader {
width: 100%;
height: 18px;
background: url(/images/headgraphic.png) repeat top left;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
font-family: "Lucida Grande", Geneva, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none
}

#container {
margin: 0px;
padding: 8px;
background: #eeeeee;
}

#content {
padding-right: 0px;
margin-right: 308px;
background : #eeeeee;
}

#sidenav {
float: right;
width: 300px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 14px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-left-color: #8B8A8B;
border-top-color: #8B8A8B;
border-right-color: #8B8A8B;
border-bottom-color: #8B8A8B;
font-family: "Lucida Grande", Geneva, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
background-color: #eeeeee;
}

#subfooter {
clear: both;
padding: 0px;
margin-top: 5px;
margin-bottom: 5px;
font-family: "Lucida Grande", Geneva, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
background: #eeeeee;
}

#footer {
clear: both;
padding: 5px;
margin-top: 0px;
background: #eeeeee;
border-top: 1px #2F44BE solid;
}

Page code:

<?php include "$DOCUMENT_ROOT/includes/ms_header.inc";?>

<div id="container">

<div id="content">

</div>

<?php include "$DOCUMENT_ROOT/includes/ms_footer.inc";?>

</div>

Span

1:33 pm on Jun 26, 2004 (gmt 0)

Nothing strange in your CSS, except for the missing semicolon at the end of the text-transform rule for the #subheader. And that could well be spoiling the fun.

text-transform:none}

Span

1:37 pm on Jun 26, 2004 (gmt 0)

Also, if you are using an XHTML doctype, you not only need to set margins and paddings for body, but for html as well.

html,body {
margin:0;
padding:0;
}

createErrorMsg

7:03 pm on Jun 26, 2004 (gmt 0)

I'm assuming your html has something like this?

Yes? If so, you might try wrapping just the content <div> in another <div> (say, <div class="wrapper">) and give that containing <div> the padding and/or margin of 8px.

TheBlueEyz

7:35 pm on Jun 26, 2004 (gmt 0)

Oh by the way can I just make a comment on your PHP:

Please don't use filename.inc for your includes.

If someone enters that URL in a browser, they will simply see the full text of your .inc file since it's not processed as php.

A better habit is to use

filename.inc.php

To make sure the php code inside the .inc file is processed and not available to the outside world.

I'll take a closer look at your CSS to see if I have any suggestions on that part..