Padding in body?

Where is the extra spacing at the top of
http://fixmysite.us/remote/
coming from?
I’m trying to get rid of it

Collapsing margins. Learn here: http://www.sitepoint.com/web-foundations/collapsing-margins/

style.css (line 13)

header ul {   
    height: auto;    
    margin: 50px auto 200px;    /*  <=== HERE === */
    text-align: center;   
    width: 750px;
}

EDIT: Try these changes and see if they help.

header {
    height: 768px;
    overflow: hidden;  /* Add Me because #logo is floating and floats usually need to be contained.  Learn more: http://pageaffairs.com/notebook/containing-floats */
}

header #logo {
    background: rgba(0, 0, 0, 0) url("../images/logo.png") no-repeat scroll 0 0;
    float: left;
    height: 71px;
    margin-top: -15px;  /* Delete Me */
    width: 180px;
}

header ul {
    height: auto;  /* Delete Me.  I am useless. */
    margin: 24px auto 200px;  /* reduced margin-top */
    text-align: center;
    width: 750px; 
}

dang it, its still there.

http://fixmysite.us/remote/

You are supposed to delete the negative margin-top from #logo, not change it to 25px. (style.css, line 36)

which should make the top of your page look like this, depending on the width of the viewport.

Is this not what you want?

I can’t see the original issue now, but it looks like there’s a bit of a layout issue lower down. Should the grey text be overlapping the hero image?

This is in IE11 on Win7 by the way.

Try removing the html errors:

https://validator.w3.org/nu/?doc=http%3A%2F%2Ffixmysite.us%2Fremote%2F

ok, fixed the errors,
https://validator.w3.org/nu/?doc=http%3A%2F%2Ffixmysite.us%2Fremote%2F
also put the background on the header element and changed it, now it seems to behave
(I’m using chrome, but does the browser matter these days?)

1 Like

It does to some extent. Partly on ‘user agent’ style sheets (and how you override them), and which tags, CSS and JavaScript you use. That’s where caniuse.com comes in handy.

It is always worth mentioning the browser in which you see a problem and any others you’ve used for testing and their results. While developing a page, it can most definitely matter.

Were you methodical while repairing the page? Did you try to find out which error(s) caused/fixed the problem you were seeing? That’s how we learn.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.