Coding web pages for different browsers.

[Ordstrin]

I'm sure most web developers know that IE will display things one way, but nearly every other browser displays them the proper way.

I've just partially re-written my 3-page website into an IE friendly version, and wondered how everyone else deals with this situation.

I know one solution is to have multiple versions of the same page (which I've done.. one for IE and one for everything else), but what else is there you can do?

~Ordstrin


Edit:
Curiously, Amaya, the W3C's own browser, does not display either version of my website correctly.

[justice]

As a fulltime web developer, it's about getting the knowledge to work around the same issues. I usually develop in Opera because its a good mix between Firefox and IE compatibility (my colleague uses firefox then IE), and then sometimes make css adjustments for firefox, then a seperate stylesheet with CSS declarations for IE (look for 'conditional comments') that overwrite certain styles to make it work in IE.
It's knowing what styles create problems though, changing margin to padding in certain conditions and div floating etc. There are some good sites with writeups: http://css-discuss.incutio.com/ for example.

With javascript you've got try..catch statements to check for support in good browsers, else IE - knowing what functionality is supported. However i'd recommend using jQuery because they do this stuff for you and allows you to focus on creating fun stuff.

It's a whole field out there and somehow people underestimate the expertise involved just because its plain text and on the web but good thing is there are numurous websites out there - experiment with the css to figure out what's causing the problem (for example div floats), then google it (could be the IE guillotine bug) and find out an article on how to combat it (in that case - http://www.positioni...orer/guillotine.html)

Another good resource: http://www.westciv.c...ter/house/index.html

[housetier]

For my private projects I decided to make it work in FF and in FF only. The reasoning is: I am the one who uses it the most, so it has to look good in my browser.

At work we make the site standards compliant first, so it will look acceptable in FF and Opera and Webkit (Safari). Only then we create an extra style sheet for IE which has all the needed hacks. Often we have several IE-specific style sheets. So, we don't have separate versions of the page, but only of the style sheet.

And we don't do Javascript without jQuery. jQuery is a godsend, and every time I use it I am grateful to the developers because I actually have FUN creating websites.

[mahesh2k]

If i remember correctly, Allan posted link of site which allows testing site on multiple OSs and multiple browsers. 

[fenixproductions]

I am using Opera and Firefox mix for writing web pages at the beginning. Later I have to apply some CSS hacks when checking with IE7. The biggest work overload is always IE6 because of few reasons:
- hard to get for me (without making my OS crappy),
- very poor CSS support and no PNG,
- strange hacks required.

And I am not using conditional statements for it.

2mahesh2k

If i remember correctly, Allan posted link of site which allows testing site on multiple OSs and multiple browsers. 

-mahesh2k (January 21, 2009, 07:47 AM)

Good but slow sometimes:
http://browsershots.org/

[Veign]

I design for FF and then apply hacks as needed for IE6, IE7 and Opera.  I also use a CSS structure that allows me to easily apply and remove hacks as needed (when IE6 drops off I can remove the hack easily from a website).

This is the CSS structure I use:
debugging.css  - Special overrides for debugging that shows me how elements flow
default.css - contains all my default styles applied to a website.  This will contain sections for each page
hack-ie6.css - contains hacks for ie6 to isolate styles just to that browser
hack-ie7.css - same as above except for ie7
hack-opera.css - same as above except for opera
layout.css - contains the styles that drive the layout (the base template, no content) such as Header, Menu, Footer, Content Area, Side-bars
reset.css - A special CSS style sheet that resets everything.  Gives my styles the best chance at being cross browser compliant from the start
style.css - The one style sheet to rule them all.  Contains only imports of above and is the only stylesheet being called from a page.

[40hz]

And we don't do Javascript without jQuery. jQuery is a godsend, and every time I use it I am grateful to the developers because I actually have FUN creating websites.

-housetier (January 21, 2009, 07:42 AM)

housetier: that comment alone is worth its weight in gold!

-------------

Check out this Smashing Magazine article for some excellent ways to incorporate jQuery in your web projects:

Link: http://www.smashingm...ood-user-experience/

45+ New jQuery Techniques For Good User Experience

by Noura Yehia

JavaScipt libraries have made huge leaps and bounds in helping developers write code and develop products more quickly. jQuery is one of the most popular JavaScript frameworks, with powerful tools that improve the user’s interaction with Web applications. jQuery has an additional advantage in that it allows developers to select elements on a page using CSS-like syntax.

To help you take it up a notch, we share below some methods that can help you give visitors to your website an amazing user experience. Here are over 45 impressive jQuery plug-ins and techniques that have been recently created and that could make the development of your next website an easier and more interesting experience than the last.