Wordpress: Strange whitespace under Admin bar

Question

I'm creating a Wordpress theme from scratch, and so far everything's going well (it's my first time). However, underneath the admin bar I have 18 pixels of whitespace that wasn't in my static HTML page before Wordpress-ing it up. See below for a screenshot:

The blue part is the header, which should be flush with the admin bar. Is there any obvious reason for this happening?

Answer 1

maybe you could give us some more css. That could have thousands of reasons. If you dont work with firebug or other developer tools you should defenitley check that out. With this tools you can click at the place with the css element you want to see and see the attributes...

https://addons.mozilla.org/de/firefox/addon/firebug/

or click at chrome on the preferences of the browser...than "tools" and then "developer tools"

If you don't find the answer with this tools, post us some css from your stylesheet

Answer 2

We're short on information here. We need to see your CSS for an accurate answer.

Either way, if you log out, is the margin still there? I'm pretty sure it is. I actually think you're having a margin-top or padding-top on your container/header/whatever element is on top.

If there is no margin, then your CSS is probably interfering with the admin bar. You probably set a margin-bottom on an element that matches either your class, tag or structure of the admin bar.

If you still don't see anything, there is a very slim chance that it could be browser-related. If the other solutions didn't work, try adding a CSS reset.

Answer 3

I've had a similar thing happen, and I believe your issue is white space in your html. Go through and remove any extra spaces which may be rendering, especially before (or after) your <?php ?> tags.