How do you deal with the differences in the browsers in how they render a web page?

This has been an ongoing problem for me in my web design experience. The only real way to deal with this problem totally is to design a site for each browser and direct your users to the appropriate site based on their browser as detected by javascript or some other method. Now, I know that you can design fairly generic pages using tables to have a fair amount of consitensy across browsers, but if you attemp to use CSS for layout and try to avoid tables which are not W3C compliant anyway, the problems can grow to craxy proportions.

What do you designer out there do to handle this problem? I would like to know as many tricks or tips that you have to make this easier to deal with. Thanks for you input!

Rodney Lay





This post has been edited by microscopic^earthling: Aug 11 2005, 02:17 AM

It depends on how far you want or have to go with the compatibility. If you want to keep your site similar to browser that do not have or have very poor CSS support you just have to stick to very basic designs or, like you said, have separate versions.

Personally I assume my visitors have CSS enabled browsers. The language has been around for enough time.

So the problems I usualyl face is with Internet Explorer, and sometimes with Opera. Geckos (Mozillas, Netscape) have best CSS support of the majotr browsers so I usually start the designing to them, do the pages ready and then take measures if the page can't be viewed correctly with IE or sometimes with Opera.

As I do positioning without tables, I often have to face the problems IE and Opera have in CSS positioning. With IE, you can center stuff very poorly... unless you go against XHTMl standard and use the <center> tags. But since IE is the only browser that can't do CSS centering properly, there is no need to use <center> with all browsers. So what I do is check (with PHP) if the browser is IE and if so I add the center tags aroung the element to be centered.

Opera screws up only with floats, but it can be fixed by doing the things a bit differently, usually just changing the order the elements are in the HTML file. So far I have never needed to use a browser checking for Opera.


Sometimes you just have to make compromises. Or leave the people using IE with page that works but doesn't look as good. One example is the CSS inherit, for a background or border colour for example. With IE it just doesn't work so the borders/backgrounds are displayed grey.

One thing I've found works for me is the fact that about 75-80% of web browsers use either IE or Firefox. Since Firefox has a bit more problems with how certain things I do may be viewed, I angle more towards ease of navigation for those users. Then I check the uploaded site in both browsers to make sure that most, if not all, of the bugs are out. I may spend an extra 20 minutes just correcting and uploading the new corrections and F5ing to make sure it all works, but taking the time to make sure those two browsers can see your site the way you want it to be is one of the most important things towards keeping people coming back.

In the early years, during the browser wars, I use to design pages for each site, which meant detecting what browser was used, and displaying the right page that was written to be compatible with the browser. This was at the time the only possible way of having your site formatted on each browser how you wanted it to look. I've given up on this method.

I now write sites to standards and test them using different browsers, I then use CSS to fix the inconsistencies (CSS 1, 2 & 3). I use XHTML 1.0 Strict only because not enough browsers support newer standards yet, but when they do will be when I convert over. You really need to go through a lot of site designing before you can master writing a CSS file that will work on different platforms, different browsers, but when you do discover this, it'll become natural to always include those lines in your CSS file.

The standards are there to help us design sites for our future selves (meaning when we're old and grey, for our sight, hearing, etc), not meaning for the future. It's also for everyone to be able to use your site.


Cheers,


MC

CSS is a pain. Internet Explorer cannot generally render blogs with sidebars as it wants some extra CSS, which isn't generally included in the template.

Internet Explorer 6 is too old, I hope/think IE7 has better CSS support. Still I think gecko is superior!

I look for the statistics. You have them in your cpanel webstats. Look how many visitors of your page are using firefox, opera, or internetexplorer? then decide with which one you will go. There will always be some differences between 2 browsers, and pretty often things will render uncorrect.

In webpage layouting I still use and prefer tables until CSS is fully supported. Mentioning CSS, if you are using the CSS 2 version then you are in trouble becuase it is not widely supported. So stick with CSS 1. Whats wrong with tables by the way? I hand code every page i create but still I'm in favor of tables coz after creating the table rows and columns only u need to do is fill it up with whatever you want .. and you could design tables too that use CSS. Its fun but I dont know with you guys

In todays Browsers World I think there are 3 kind of Browsers
1. Mosaic (ie IE)
2. Mozilla (Netscape, Firefox,mozilla)
3. Mac Safari...(I dont know much about safari)

all other browsers are breed of these, I Presume... mosaic and Mozilla render the HTML and CSS layouts differently...

I had a problem with these too... I use firefox,mozilla,IE,Opera,slimbrowser and netscape to test my pages to see if it is rendered correctly in all the browsers... and I found one thing very irritating about these Browsers... One supports linked CSS and others does not, One supports DIV tag and others does not.... and it really messed up with CSS styles... and its positioning...

These all were really getting into my nerves when I found an article about Cross Browser development... that is the pages you develop will render to optimum as you desired... and gentlemen and ladies... I am going through all these stuffs... still unclear but I am goin on...

When I get really enuff good insight of these... I will surely share my info to you all guys...

better any one tell me about this cross browser capability....

What app. are you using???

Todays browsers are mainly categorized as standards compliant and not.
The only non standards compliant broeser out there is lame ol IE.

Using CSS 2 specification is no wrong and by using hacks you can get the effect nearly in IE.
The best process is develop the page to look good in standards compilant browsers like Firefox and other gecko browsers. Then use hacks to make it look good in IE.
http://www.quirksmode.org/home.shtml
You may find some nice tips in the above site.
I sometimes use css3 specifications in my sites. Mozilla renders the attributes selection and also border radius. So you may get links to external pages in different colors and rounded borders in mozilla but IE would ignore link coloration and also show borders square. That doesn't do any harm because the IE users doesn't know that mozilla users are having a better experience.
Actually standards supporting sites around looks same in todays browsers. A careful design will make a presentable site to all browsers.



Tables add up to the size of your pages. The use of divs and css to style them gives you pages which load fast and small in size. (less bandwidth consuming too) Toady the only things which visit websites are not browsers. There are screen readers, small screens (palm tops) They see pages differently, but using liquid layouts without tables you ensure that they also can visit your site. Also css gives you a mindbogling array of designs limited only by creativity.
Check these articles about tables vs css
http://www.alistapart.com/stories/practicalcss/
http://stopdesign.com/articles/throwing_tables/ (uses poor M$ site to explain why not tables and how M$ should improve)
http://www.hotdesign.com/seybold/
And the endless options of css designs.
http://www.csszengarden.com/