Gap Between Page Elements

[rsterngd]

Hello!

So, after some much needed beginner help, I'm on the right track with this CSS stuff, but I've hit another hurdle.

I have a header and a content block centered on my page. The content has a white background that is supposed to butt up directly against the header. It's working on my index page, but the exact same code is not working on the Contact page.

go to beckysterndesign dot com and click on the contact link to view.

I need this to work the same as the index on every page of the website.

Can anyone help?
Thanks!
Becky Sue

[EJohnson72]

Can you post your HTML and CSS for the contact page? We can take a look.

[Rayzur]

Hi,
It looks like your having problems with your global reset, aka "universal reset".

In your stylesheet you have your reset at the top as

html {
margin: 0;
padding: 0;
}

That's really not a very good reset, if you change it to * {margin:0; padding:0:} you will see the gap disappear.

In doing that though it throws your sidenav and lower image out of position on the homepage. That's OK, just go back and reposition them.

Also I couldn't find the #biocopy div in your stylesheet. Go ahead and get it in there so it can be picked up on by the html. Be careful not to add padding to divs to position text such as <p> tags and <h> tags, It can cause problems. Give them margin and padding through their own selectors.

That was a very simple reset above and can cause problems if you plan on having any forms on your site.

This is one that I use, it is more thorough.

body, address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre {
    margin: 0;
    padding: 0;
}

There are some that have even more to them.

[Rayzur]

Sorry about the double post but I just remembered a recent thread where the topic was the "universal reset".

And I also found an example of Dan's style sheet starter.

/* My take on the CSS Reset */
    a, abbr, acronym, address, area, b, bdo, big, blockquote, body, button, caption, cite,
    code, col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4,
    h5, h6, hr, html, i, img, ins, kbd, label, legend, li, map, object, ol, p, param, pre,
    q, samp, small, span, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead,
    tr, tt, ul, var {
        margin: 0;
        padding: 0;
    }
 
    body {
        background: #333;
        color: #000;
        /* the font "Lucida Console" is included for development only - remove it when you're finished, but don't change anything else */
        font: 85%/150% "lucida console", tahoma, verdana, arial, helvetica, sans-serif;
        letter-spacing: 1px;
        margin: 0;
        padding:0;
    }
 
    fieldset {
        border: 0;
        display: inline;                                    /* this squashes an IE bug */
    }
   
    h1, h2, h3, h4, h5, h6 {
        font-family: georgia, garamond, "times new roman", times, serif;
        font-weight: bold;
    }
 
    h1 {
        font-size: 1.5em;
        font-weight: normal;
        line-height: 1.8em;
    }
 
    h2 {
        font-size: 1.25em;
    }
 
    h3 {
        font-size: 1em;
    }
 
    h4 {
        font-size: 0.95em;
    }
 
    h5 {
        font-size: 0.85em;
    }
 
    h6 {
        font-size: 0.75em;
    }
 
    img {
        border: 0;                      /* this squashes a Firefox bug */
        vertical-align: bottom;        /* this squashes an IE bug */
    }
 
    table {
        border: 0;
        border-collapse: collapse;
        border-spacing: 0;
    }
        caption, th, td {
            font-weight: 400;
            text-align: left;
        }
   
/* ok, now that the "reset" is out of the way, let's get to the layout, shall we? */