Forum Moderators: open
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?
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 ?
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:
<body>
<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?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
.header {
margin:0;
background-color: red;
}
.logo {
margin: 100px auto 0;
height: 100px;
width: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
logo here
</div>
</div>
</body>
</html>
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 -->
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&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">
</script>
<!-- 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)
This fixed it for me, I found it from the addthis forums.
