How to fix 95% of the cross-compatibility issues
 

Wouldn't it be great if with essentially 2 lines of CSS code you could fix 95% of the cross-compatibility issues between browsers?

It's no secret that over the years web developers have had issues with cross-compatibility between such major browsers as Mozilla Firefox and Internet Explorer. Ensuring your code is the same in both has meant big business for aspirin manufacturers. But from now on we will NOT be paying for their roast turkey and Cava champagne come Christmas time. Oh no, no!

If you place that at the very top if your CSS code, it will return the formatting of your site back to a default every single browser that supports CSS will agree on.

You see, most of the issues wither down to the various margin and padding values that the various browsers set by default. By reducing them all to nothing (zero) you leave yourself with a clean slate to make any website you code from now on, the same in EVERY browser!

The other 5% is down to good code so sign up to TalkPHP for FREE and have limitless access to all the knowledge we have bundled into one forum across hundreds of members!

I'm not sure if that's really the solution to 95% of problems but I do always reset margins/padding, stripping back to a (sort of) uniform base across browsers is a great place to start building up a stylesheet.

It is just a pet peeve of mine but I dislike people putting units associated with zero values. Zero is zero whichever unit you apply, or don't apply -- the latter being my preference.

Maybe not 95% but it makes as a good title! It'll solve a lot of problems out there as the majority of the issues I see with cross-compatibility issues - the coder has not reset the paddings and margins.


I do see what you mean with the above example. 0px is the same as 0em no matter what the units are. I just use it because it's good-practice to apply the unit type. For measurements I use PX and for font sizes I use EM - along with the xx-small, x-small, medium, large, inherit, etc. text values.

The main issue I run into (I dont code html much) is IE and FF not treating a fixed margin the same, for some reason 20px; means something different to IE.

I've come across this problem before. Isn't it when an element is floated and you set a margin, IE will double the margin?

I don't know, I never figured it out.

Often an overflow: hidden will sort out these issues. It seems DIVs have a hard time calculating where their borders are.

Something they are the same, sometimes different, i found it really depends on the element you are using.

Although over time I've learnt to adapt my code to a way where it will work in both IE and FF without any "hacks". Just seems to take time, and then you realize what is going to work properly and what wont.

Sometimes i will have to do the margins and paddings differently on div's to get it to look the same in both, gets quite annoying

Internet explorer has problems with the so called "box model" this is how it should work. Instead version 5 of internet explorer adds padding inside the size of the box while it should be added as extra width to the box. Newer versions of IE do this as well but only in quirks mode, which can be avoided fortunately.

Seems like 5 lines of CSS to me. ;-)

Hehe.


Better? I can also make it 1 if you like, I'm a very clever boy.

;-)

I'm just busting your balls.

The 5% where it does not solve the problems relate to form elements like textarea and inputs.

Eric Meyer's follow-up article, "Reset Reloaded", is definitely worth a read as well.


True. Can be fixed easily though by applying display:inline; to the floated box.

Read more about it here: http://www.positioniseverything.net/...ed-margin.html.

You can fix a LOT of cross browser problems by declaring a full doctype. And then setting body {padding:0; margin:0;} (I see little to be gained by setting everything to 0, just more declarations you have to add to set things.)

Many older pages have no doctype of just half of one. Half a doctype can kick IE into quirks mode.

Use either of these (preferably strict)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

(There is nothing to be gained using XHTML as IE doesn't understand XHTML at all, and converts it to html.)

Yea, doctypes often make IE behave fairly well I find.

And why is this a security fix? :| What can they do if I don't do that? :-P

It isn't a security fix!
It's a way of increasing the chances that your pages will look much the same in different browsers, and it is often overlooked by beginners.

How far do you look back in browser versions to see if the website is okay? I go back to about Internet 6, and I also have a 1.0.* version of Firefox on my PC.

Look at your web stats and ask yourself - is there any need to go further back than IE6, given that IE5.5 has less than 1% of the users world wide.

IE6, IE7, FF and Safari 3 cover 96% of users world wide.

Precisely. Although I look at W3Schools's statistics.