Welcome to WebmasterWorld Guest from 22.214.171.124
Forum Moderators: incrediBILL
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?
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:
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?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
margin: 100px auto 0;
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.
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 -->
<!-- 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.
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)