Okay guys, apologies for the rant, but this is just somewhat baffling and irritating. It's happened to me a few times now, and I get the sense that I'm not aware of something or am doing something completely wrong, because I don't think the easier reaction ("Gecko designers are stoopid") is actually true.

So, I'm trying to make stuff align to the top of the page.

Basically:

I have a page. Shocker, I know. I put some fancy background color on the body tag just to make sure that the body does, indeed, encompass the entire window screen on the browser. All good.

Then I make a div, throw some text into it or give it some dimensions...whatever. I give it a background color so I can see the box. Now, I want the top of this div to touch the top of the page. That's not too much to ask, right? But in FF (as well as Opera), there's a good 30px or so of "body" between the top of this div and the top of the page.

But that's because I haven't done any styling, right? Okay...so I run through my checklist of what to do. For BODY: margin 0, padding 0. I even throw in position: absolute, left:0 right: 0 top:0 bottom:0 for good measure. No luck so far. But that's okay, I'll just mess with the styles on my DIV, right? margin 0, padding 0 (just for good measure), position: relative, top: 0.

Um...nothing.

So what this is saying to me is that I told Firefox and Opera to display this DIV on the top of the page, and it's saying the top of the page is about 30px down. It knows better than that, darnit! Of course, I *can* push it higher, if I tell give it a NEGATIVE margin-top value, but that's not something I'm willing to do. (Besides, browsers interpret pixels differently. -25px on FF != -25px on MSIE. But a pixel is a pixel is a pixel, right?) I can also fix this by doing absolute positioning on the DIV instead of relative. But I don't want that either, because this DIV should be in the normal flow of the page... and I can't understand why it would be related to absolute/relative. I mean, the DIV is a sub-element of the BODY, and the top of the BODY is the top of the PAGE. There's a missing link in here somewhere...where is it?

I mean, MSIE seems to understand this perfectly. Top of page = top of page. But FF...what the heck, guys?

Someone please enlighten me!

How about posting the actual code (css and html)?

:smacks self:

Sorry all. After some more messing around, I ended up fixing it and am wondering why I didn't think of this several months before when I first encountered it.

This is my code for anyone interested:





When I first made the test code and it worked in Firefox, I was confused, because I was sure it would fail (having experienced that before)...and then I tried putting in a H1 header in there, and my problem returned! The reason, which i'm basing on observations in firebug on FF, is because h1's automatically come with some top-and-bottom margins. The solution is to go to h1 and set those margins to be 0 as well. This seems a bit odd though, why should an element within a div change the position of the div itself?

Sometimes, I wonder why browsers do things so differently...actually, most of the time. What's the advantage?

glad you got it sorted

one question whilst I'm here (cos I'm genuinely curious/can't guess) ... why are you using the xhtml doctype?

I thought I was? I can never remember the doctype stuff so I've made a (somewhat bad) habit of copying and pasting stuff from previous projects of mine. It actually doesn't look right now that you mention it...

That depends on what in particular they're doing "so differently". As far as presentation in a typical (media="screen") browser, the big differences I've seen are:

• MSIE's implementation of the specs is often broken (but using a DOCTYPE that triggers its "standards mode" helps)
• error recovery varies considerably with broken markup/CSS (validators are your friends)
• modern browsers offer the user more control (e.g., setting minimum font size) and more features than MSIE does

Of course, once you get to other types of browsers (media="braille", media="speech", media="handheld", etc.), the presentation varies considerably. And that's a good thing.

Well, a lot of the differences I've noticed casually from observation (so maybe this is incorrect) is the way MSIE and FF do margins and padding. Margins of the same absolute size tend to produce different results. z-indexing is also done a little differently, at least, in my experience. Generally, it just doesn't really do anything.

I haven't heard of MSIE's "standards mode" - what's an example of a DOCTYPE that does this?

This post has been edited by zoogies: Jul 15 2007, 04:37 PM

http://www.robinlionheart.com/stds/html4/results

Excellent page on what works, what sort-of works and what doesn't work at all for various browsers.

IE 7.0 is the worst offender, naturally, but my beloved Firefox and Darin McGrew's beloved Opera do get it wrong (or don't do it at all) on occasion as well.

This post has been edited by Peter1968: Jul 15 2007, 07:14 PM

See Activating the Right Layout Mode Using the Doctype Declaration

Two awesome links, thanks guys!

Because of collapsing adjacent vertical margins.
http://www.w3.org/TR/CSS2/box.html#collapsing-margins

If you want to keep the margins on the H1 but want them to stay inside the DIV, you can do so by adding 1px padding or border to the DIV. Then the margins no longer touch and they won't collapse.