It's always a big problem for web designers to make their page look good in all the commonly used browsers. What are the best ways to deal with this fact?
views:
121answers:
9
+1
A:
Use well supported libraries - don't try and start from scratch. For example, JQuery handles a lot of browser issues for you.
rledley
2009-07-15 21:40:31
A:
There's no universal way to ensure that everything always works. For CSS, a reset stylesheet goes a long way to standardizing looks between browsers; for JS, use a library like jQuery that handles browser compatibility issues in a sane way.
DDaviesBrackett
2009-07-15 21:42:15
+5
A:
For CSS:
- Use a reset (like Meyer or YUI) to "level the playing field" before your style is applied
- Style for the weirdest browser that you have to support (like IE6), make it look right, then change what you need to for more modern browsers. Trust me, this is much easier than doing it the other way around!
For Javascript, I'd use a framework like jQuery or YUI since they go a long way in abstracting away most of the browser-specific quirks you're likely to encounter.
Good luck!
inkedmn
2009-07-15 21:42:16
Tnks, very useful.
2009-07-15 22:27:42
Also, be aware of the differences in box models. For example, FF et al count padding as part of the width of a box, IE doesn't. http://www.quirksmode.org/ and http://haslayout.net/ are also useful.
Justin Johnson
2009-07-15 23:11:04
This advice is true if you're not using a doctype and stuck in quirks mode. If you are using a doctype, and in standards mode, you are better off styling for a more modern browser first and then backporting to IE6. Standards mode makes IE6 use a correct box model.
Joeri Sebrechts
2009-07-16 07:45:50
-1. To first making it look right in IE6 is really bad advice. The layout will _use_ the rendering bugs in IE instead of avoiding them, and you practically have to start over to make it work in the rest of the browsers.
Guffa
2009-07-16 10:50:46
+1
A:
Test, test, test and learn from experience.
Use virtual machines to test in different IE versions. Download them here: http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en
Try avoiding hacks - css or js to target browsers unless really necessary.
As others said, jQuery might help a lot in Javascript to irons out the pesky browser differences.
Dhana
2009-07-15 21:42:59
A:
Using a good lib to make your js more cross browser safe is a good start. Also using a css framework like 960.gs or blueprint is a good choice for the css. Basically you need to do a full css reset.
googletorp
2009-07-15 21:44:52
+1
A:
A proper doctype on the page so that it renders in standars compliant mode.
Test in a standards compliant browser like Firefox first when you develop. If you test in Internet Explorer first, you will most likely write code that uses some of the rendering bugs in IE to make it look like you want, and then you will have a hard time to make it work in any other browser.
You will most likely have to tweak the layout to avoid some of the rendering errors in IE. Different versions have different rendering errors so you need to test several. Add an X-UA-Compatible meta tag to keep IE 8 from rendering in compatibility mode.
Use the html elements as originally intended. Links to navigate, header tags for headlines, et.c. That way the code is more likely to work as intended, and search engines will do a better job indexing the pages.
Guffa
2009-07-15 21:55:26