Hey what do you think is the best way to code a site to appear correctly on multiple browsers? I've been thinking about useing Javascript or think of something in PHP.

Also would it be better for me to use a style sheet or the include or require function in PHP to increase speed for when I have to update my site?

I know how to do these things I'm just wondering wich way is the most effective and the fastest.

This post has been edited by Shortyjtl00: Jun 6 2007, 03:23 AM

This Topic has several questions, so I'll break apart your posting to reply to the individual questions.

Use div's instead of tables. Use the validator at W3c.org to validate your code. Avoid proprietary code which is not standard compliant. An exception to that last one is the IE Conditionals for creating IE specific CSS files. Set margins and padding to zero on the * html selector and add it on the element that needs it.



Both of these will make updates faster. And they can be used together. Php is used to write (x)html code which uses the CSS file for styling. javascript can be turned off in a client's Browser, so that may mess up your presentation or make the features on your site fail to work.

If you want to do it in multiple version of internet explorer use Multiple IEs Software
or you could use the firefox IE Plugin in firefox so you can test the site in two browsers.

My experience says always make a site with IE in mind and it will be displayed well in other browsers also. The other way around it almost always will get messy. I've done some extreme things to get my site towork correctly in IE. Once I even wrote separate css for different resolutions!

I always make my sites to work in Opera. Opera passed the acid test and is completely standards compliant, so if my site works in Opera then I know my code is right. Then I load it up in each other browser and see what it looks like. The only one to ever cause problems is IE, although gradually over time I have learned how to make sites work in IE and fix specific problems IE creates.

Setting every single option yourself, rather than leaving things as defaults in CSS is usually a good idea as it should make everything look the same. For example, jlhaslip's suggestion of setting borders, padding and margins of the HTML area to 0 means that browser defaults for padding the whole page etc. are overridden, so your page should look the same in each browser.


The problem with this is that most people make it work in IE and then leave it, without even looking at it in another browser. This is why many sites on the web don't work well in Opera or other browsers. And why I often turn away from a site - if they can't be bothered to test and correct their site, what they're selling or saying is normally not that good either. As long as you check your site works in every browser then you should be fine, no matter which way round you do it.

If statements in HTML are a good way if you have a really tricky problem to resolve, and the best approach would be to make separate CSS for each browser, or certain browsers (usually IE). Quirksmode has a great little guide on using them.

I think it is best to code for standards compliant browsers then as you go, check in IE as well so you know exactly what causes IE to act up and you can fix it on the fly. Much faster than trying to figure out bugs and hacks after everything is done. Sometimes one fix is dependant on another workaround etc. ..
I actually code for FF (since it uses the latest version of the Mozilla engine), then check in IE and NS. I used to just check in IE but then I noticed my pure CSS rollover/drop down menu wasn't working in NS even though it worked in FF and IE! Well, the gloves came off and after much pulling of hair, I started to wonder what the heck>?#$% then I saw the version of Mozilla was different even with the latest version of Netscape. Hmmmm Cheaters. Something to do with rendering of pseudo classes within elements that are fixed vs. absolute. I guess fixed elements "cover" pseudo class elements so my menu was looking like it dropped under my content area. Almost had a heart attack because I thought everything was cool and so I gave the URL to my client to look over the site. Lucky for me they all used IE anyway. At least I found that buggy element thing. man what a pain. I could not find anything about it on the net. there are so many bugs in IE I'm considering just boycott development for that piece of junk and tell all my clients "not guaranteed to work in IE browsers" but then I'd be out of work. Maybe additional charges to code for different browsers. Hmm I like that idea.