Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Header appears to have a top margin of 20px-30px in Safari.

And like 1 out of every 100 times I refresh it, I see it in Firefox too.



7:24 pm on Oct 18, 2009 (gmt 0)

10+ Year Member

Strange issue I can't seem to figure out. My header, which is supposed to start right at the very top with no margin/padding whatsoever, has a blank white space of about 20px-30px in Safari only.

However, it's not completely Safari only. While working on the site and refreshing it tons and tons of times, that same 20-30px margin appears above my header 1 out of every 100 refreshes (just a guess, I'm not actually counting refreshes) in Firefox as well.

99.9% of the time it looks perfect in Firefox... the header is directly at the top. Same thing in IE.

But that 0.1% of the time (and 100% of the time in Safari), that space is there above my header.

Every margin/padding I can think of has been set to 0. Anyone have any idea what's causing this?


8:26 pm on Oct 18, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

You do know about collapsing margins ?

And how a margin on a child of an element can collapse with the (zero height) parent's margin and cause the parent to shift down ?


9:59 pm on Oct 18, 2009 (gmt 0)

10+ Year Member

Thanks for the reply.

Nope, I didn't really know much about collapsing margins. But I just did some reading about it, and while I'm not completely sure, I don't think it's the cause of my problem.

For my site, it's literally:

<div id="header">

And the margins of both body and #header are 0. Yet, there's a 20px-30px bit of white space at the top of my header. And again, it's only doing this in Safari and 0.1% of the time I refresh it in Firefox.

Is there something regarding collapsing margins that could still be causing this and I'm just not getting (because I'm a total coding dumbass), or would this have to be caused by something else?


10:27 pm on Oct 18, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

As an example of what collapsing margins can do:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<style type="text/css">
.header {
background-color: red;
.logo {
margin: 100px auto 0;
height: 100px;
width: 100px;
background-color: green;
<div class="header">
<div class="logo">
logo here

This example does it 100% of the time in FF, safari and opera ;)

Now something doing things differently in and only on occasion in FF might be something entirely different.
What it does in IE isn't actually relevant at all unless it's IE8. There simply are way too many bugs and features in the legacy IE versions.

I'd suggest to check the pinned post in the forum and reduce your code to something minimal that still exhibits the problem and post that code.


7:46 pm on Oct 19, 2009 (gmt 0)

10+ Year Member

Alright, I just took out and put back every single piece of code on my site in an attempt to find the "thing" that is causing this margin issue, and I think I've found it. Although, it makes no sense whatsoever to me. Maybe it will to someone else.

You know AddThis? You put some code on your site and it puts a thing with all of the links to digg and twitter and stumbleupon etc. etc. etc.

Well, I use AddThis on my site, and when I remove the code for it, the strange margin above my header disappears.

Bare in mind, the code for AddThis is actually NOT in my header (which is where the margin problem exists). The AddThis code is much lower down in my code.

Here's what the AddThis code looks like, by the way:

<!-- AddThis Button BEGIN -->
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=myusername"><img src="http://s7.addthis.com/static/btn/v2/lg-bookmark-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0;"/></a><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=myusername">
<!-- AddThis Button END -->

What about this code is causing a 20px-25px margin above my header 100% of the time in Safari, and maybe 1% of the time in Firefox?

Or, better yet, how can I stop it?

Thanks again for the help.


11:33 pm on Oct 19, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

The explanation of why it only happens sporadically in Firefox might be found: generated code by the javascript might cause a race condition with other javascripts. (Are there other on the page ?)

Anyway to find it you'll need to know what the generated code is
(I use the web developer toolbar add-on in firefox to get that)


3:13 pm on Oct 23, 2009 (gmt 0)

5+ Year Member

var addthis_config = {
data_use_flash: false

This fixed it for me, I found it from the addthis forums.


Featured Threads

Hot Threads This Week

Hot Threads This Month