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!

__________________
The man who comes back through the Door in the Wall will never be quite the same as the man who went out.

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 man who comes back through the Door in the Wall will never be quite the same as the man who went out.

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?

__________________
The man who comes back through the Door in the Wall will never be quite the same as the man who went out.

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.

__________________
The man who comes back through the Door in the Wall will never be quite the same as the man who went out.

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.

__________________
The man who comes back through the Door in the Wall will never be quite the same as the man who went out.

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.

__________________
Kohana - PHP5 framework

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.)

__________________
www.kidneydialysis.org.uk

I have to agree with Dr. John.

Declaring your DOCTYPE will definitely help.
While each browser has it's issues, most try to follow the rules of the standard you declare. If you don't declare a DOCTYPE, then the browser has to guess which standard to follow or use a default standard. The problem is that all of the browsers have different systems in place for guessing the proper standard or use different default standard. So IE might default to HTML1.1 and FireFox might try to guess the best standard. Since the standards are so different, the same code is parsed differently. By declaring the DOCTYPE, the browsers should do a much better job of following the same rules. You'll still have some cross-compatibility issues but not nearly as many as you will if you don't declare your standard.

Give it a try sometime. Create an HTML/CSS document and don't declare a DOCTYPE. The use the exact same code and create a second file with the DOCTYPE declared. In almost every browser you use, you'll see a difference in the two documents even thought the HTML and CSS is the same. Go ahead and create three or four documents with the same content but declare a different DOCTYPE for each.

I'm really not a fan of using standards since no two browsers will follow all of the rules exactly the same way. Nonetheless, not specifying a standard will result in many more cross-compatibility issues than by specifying.

vujsa

__________________
Need PHP Help? - Handy PHP

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

__________________
The man who comes back through the Door in the Wall will never be quite the same as the man who went out.

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

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.

__________________
www.kidneydialysis.org.uk

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.

__________________
The man who comes back through the Door in the Wall will never be quite the same as the man who went out.

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.

__________________
www.kidneydialysis.org.uk