How to fix 95% of the cross-compatibility issues - Page 2

bdm · 12-11-2007, 02:04 AM

Although I enjoy doing CSS. I have yet to complete a full layout using CSS. I tend to get a little frustrated by the lack of standards. Not only IE since it seems all browser all have quirks of their own.

Dr John · 12-11-2007, 09:08 AM

Quote:

Originally Posted by Wildhoney

Precisely. Although I look at W3Schools's statistics.

That's a technically orientated site for web designers and developers, and thus is not representative of the "outside world". Web developers are well known to use firefox more than normal users, as some of the add-ins enable us to play with the css live.

A better site to use is www.thecounter.com which aggregates data reports from thousands of sites.

Matt83 · 12-11-2007, 04:31 PM

IE6, IE7, FF (mac/pc), Safari(mac) and Opera.

This usually covers a 95%+ of the stats i get from my projects.

Geert · 12-11-2007, 06:58 PM

Want to make one point about these statistics talks. Statistics are only statistics.

Suppose your site gets 100.000 visits. It breaks in IE5. But only 1% of the visitors use that browser. Well, that are 1000 people. Not 'users', people. People like you and me, with real feelings, who may get frustrated.

Did you ever see 1000 people standing in a row? Quite a long row.

Don't get me wrong. I don't support IE5 neither. Just wanted to make you reflect on bars and charts.

Sled · 12-14-2007, 12:36 PM

I use this code to reset all tags in all browsers.
Code not written by me, just edited, I can't remember original source.

Code:

/* reset */
:link,:visited{text-decoration:none;}
ul,ol{list-style:none;}
h1,h2,h3,h4,h5,h6,pre,code{font-size:1em;}
ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0;padding:0;}
a img,:link img,:visited img{border:none;}
address{font-style:normal;}

This makes it so much easier to work!

vujsa · 12-15-2007, 04:38 AM

Quote:

Originally Posted by Dr John

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

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