Weird top margin issue in TwentyEleven theme?

[willkanoff]

Hi, I’m building a WordPress child theme using TwentyEleven as the parent. It’s been fairly plain sailing until I decided to get rid of the top margin inside the browser window. Although all margins are reset to 0 in TwentyEleven:

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

border: 0;

font-family: inherit;

font-size: 100%;

font-style: inherit;

font-weight: inherit;

margin: 0;

outline: 0;

padding: 0;

vertical-align: baseline;

}

…there is still a gap of about 30px between the top of content page and the browser window. Moreover, it was still there with top margin set to 0 in the child theme. Only after I set margin-top to -30px in the child’s style sheet the gap was finally gone.
Could anybody tell me please what am I missing here?
Thanks…

[Senff]

That could be a lot of things, so if you can show us a live page where this occurs, it’ll enable us to help.

[willkanoff]

Hey, Senff. Thanks for the prompt reply.
Unfortunately I’ve just started working on my local machine and don’t have it online yet. But it is pretty easy to replicate. Just create a blank TwentyEleven’s child and try to set the margin-top to 0.

[TheDoc]

It is probably the area where the WordPress admin bar is supposed to go.

[willkanoff]

Actually I was logged in when I discovered this and it was even worse. Firebug showed this:

html {

margin-top: 28px !important;

}

I couldn’t override this no matter what because the TwentyEleven child’s margin-top setting was always bellow it. I goggled that and found out that the admin bar may have caused the problem. So I logged out and tried again. The 28px !important property disappeared but the problem persisted.

[Senff]

Nope! With my WordPress installations that doesn’t occur.

[TheDoc]

It’s there because it’s making room for the admin bar. If you don’t want it to show, I believe there is an option in Settings to have it not show.

The reason the gap is there because you probably have wp_head() but not wp_footer().

[willkanoff]

Thank you, Senff. That’s weird! Mine is freshly installed too. I’ve only added the boilerplate theme and a couple of plugins. I’ll keep digging around a little more but if everything fails will try to redo everything from scratch.

[willkanoff]

Thanks Doc, I’ll look into it…

[willkanoff]

I just found the solution to this one here.

[Author]

Posts