Recently I had noticed a padding (or margin) issue with the layout of my site. Now, while most users would not have seen this, it seemed to pop up for me every so often. I was seeing a lot of extra margin on the top of my page, 28 pixels to be exact.
Now, being the lazy CSS person that I am (really I just despise IE and refuse to waste my time making things look good for it), I didn’t really think much of it. Everything seemed to look fine on most of my regular browsers. But finally I just got the itch to take care of as it seemed that I was seeing it more often. Probably just me, but whatever. So I start looking through the code for the site and I find that this block of code as being inserted into my header tag:
<style type="text/css">
html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }
</style>
WTF. I didn’t write that, which leaves one culprit and one culprit only. WordPress. I love you WordPress, but sometimes you make me crazy. Turns out, the reason this block of code is being inserted, is for a fancy new User Admin Bar that will show up on your WordPress site while you are logged in. For some reason, it doesn’t work though. I’m sure it works for some people, but on my site and apparently on others’ sites as well, it just doesn’t show up. And so, as a result, you get this 28px margin that you didn’t ask for because when you upgrade to 3.1 the user admin bar is automatically turned on. I’ll refrain from discussing in depth how WordPress should avoid crappy facebook-like user experiences.
So what to do about it!?
QUICK ANSWER
Log in to your WordPress, go to Users->Your Profile and uncheck “when viewing site” under Show Admin Bar.
Save your profile and the issue will no longer appear. Keep in mind that this fix will only resolve the issue for yourself. Other users using the site may still see the issue if they have the box checked in their own user preferences. Getting around the issue entirely, well franking I just don’t care enough to do the workaround on it. Hopefully WordPress will resolve the issue in a coming version though.
Thanks for posting this… WTF WordPress??? W.T.F.
The best way I’ve found to remove that white space (it’s not caused by the admin bar) is to search out this css in style.css:
#page {
margin: 2em auto;
max-width: 1000px;
}
and switch the 2em to 0em or some variation of the same. That will remove the white space.
Erik,
Thank you! Had to dig through several forums before finding your solution.
Erik, thanks a lot! I didnt know how to remove Margin-top: 28px in wordpress.. I was struggling for an hour.
Now the white space has been removed. Once again thanks very much!