CSS: Doubt about positioning div on IE7

Teensweb

New Member
Messages
352
Reaction score
1
Points
0
Hi everyone, I now face the simple and irritating trouble of making IE see the truth!
So, here it goes: I have a layout, It works fine with almost every browser on earth other than IE(7 or lower), and I am one of those guys who want a 'valid html/css' tag on every page I write- same goes true with the layout in question.
Well, now the trouble I am facing, I got it solved but it lead me to more intense confusions about css positioning.
From all of my experiences till date I've always concluded that the value for the css left property unless stated explicitly is auto. Now in almost all situations I encountered, auto seems a synonym for 0(except in IE7 or lower). So how do I know if IE is changing the defaults wherever it likes?
My positioning trouble seem to be solved when I add left:0 to the div in question(absolutely positioned inside parent which's relatively positioned).
Any help greatly appreciated.
Info: my doctype is <!DOCTYPE html>
 

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
IE7 is not a great browser for HTML5; you do need to use a bit of extraneous CSS to make things happen properly. You can add IE-specific CSS using conditional comments to override its little quirks (which it doesn't restrict to quirks mode in any case). A lot of what happens in IE depends on whether or not the hasLayout flag is set on the element (or on its parent element). That means that any rules of thumb you may collect on one project won't apply cleanly to another unless you take hasLayout into account -- it can often be forced by using CSS that otherwise does nothing at all.

Quirksmode.com is a great resource for all things CSS and IE (and when other browsers choose to be different) -- they've got a lot of blanket fixes on tap for things that would otherwise leave you scratching your scalp completely bald.
 

Teensweb

New Member
Messages
352
Reaction score
1
Points
0
Means everything is unpredictable right? I know about conditionals but the problem is that I'm not sure what to put in there!
And can you provide any info on why things are great with ie8?
One more question, can you tell me whats the default margin for an h2 tag? I googled and saw somewhere that its 10px 0 but when I look up in firebug, it seems 19.976px 0 ( computed ) chrome also showed 19, but IE7 seems to give it 0 0. Can you explain how its calculated?
 

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
You may find it profitable to use a CSS reset and forget about defaults. I know I have. Normalize.css is a good one -- it doesn't completely wipe out all of the element styling (buttons still look like buttons, input elements still look like they ought to, etc.), but it does get rid of all of the annoying differences between the various browsers. Once that's done, there's a bit more work to put the various "default" margin, padding and indent values, but you can be pretty sure that since they're your definitions, they'll be the same across browsers.
 

Teensweb

New Member
Messages
352
Reaction score
1
Points
0
I'll try normalizing, it seems a good idea. But can you tell me exactly how different browsers(atleast ff and chrome) calculates margin for headers?
 
Top