homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

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)

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)

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)

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)

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)

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)

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)

var addthis_config = {
data_use_flash: false

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved