Related
I'm new to CSS, what are the rules to obey to make sure that CSS looks the same in other browsers? (I use Firefox).
P.S. Are there any specific rules for IE7?
You can't always be sure.
But you can use a css reset.
All the browsers standard css-settings will be resetted and you then have a clean start.
http://meyerweb.com/eric/tools/css/reset/
In this website you have all the necessary information, study http://www.quirksmode.org/ by Peter-Paul Koch & Don't use browser specific selectors, such as ones prefixed by -moz- or -webkit-
Finally, No, not absolutely sure, unfortunately. Testing, testing, and more testing is the only solution.
You're asking a quite broad question here, but a few guidlines to follow would be:
Make sure it's standardized CSS and HTML. If it has a -moz-, -webkit- or -o- (or more) vendor prefix, it might not behave exactly as you intend.
Make sure it validates! Put it through the W3 validation service to see any errors in your code.
Consider using a CSS reset, like the Eric Meyer reset. This will reset all your elements to 0padding, margin etc.
Or use a Normalize (as Meo points out) like the HTML5 Boilerplate.
Learn how to use IE's Conditional Comments. For the most part, the "real" browsers, (Chrome, Firefox, Opera) will render the HTML as it should be. With there being multiple in-use versions of IE, you're going to have to give different code for each of the versions (don't support IE6) and this is the best way to do it.
There's probably a lot more to add too, but the best thing really is experience.
Good luck!
I think the bast place to start is here:
http://html5boilerplate.com/ (Read the Commented CSS.) Its normalizes the CSS behavior across the different browsers. (i would not recommend using a Reset).
Consult http://na.isobar.com/standards/ to get to know the best frontend best practices.
There are some rules doe to make your stuff work in IE 6 & 7 (does are the only ones that gonna cause you serious trouble):
When something does not work in IE6 / 7 try to set zoom: 1 before you try anything else
z-index is a little tricky on old IE's
make yout sites for for IE first then do the fancy stuff for the other browser (CSS3) its gonna save you a lot of trouble
Do not insert more then 32 CSS files to your html file (no joke ;) http://acidmartin.wordpress.com/2008/11/25/the-32-external-css-files-limitation-of-internet-explorer-and-more/ )
Consult http://www.quirksmode.org/ to develop e sensibility for what is working where
try to avoid MS filters in your CSS... (can make your site rendering very slowly and can lead to unexpected behavior with JS Animations )
Up until IE 9, IE never seemed to follow any rules at all as far as CSS goes, but for pretty much all other browsers follow these W3 standards:
CSS Reference, W3 Overview, W3 CSS Validator
In theory, if you stick to these, everything should work, but it isn't quite like that in reality. It's certainly a step in the right direction though, the rest of the nitty gritty is just learned through trying, errors and experience.
This website will give you a good start.
http://htmlhelp.com/reference/css/structure.html
I'm trying to motivate my team members to get our code to validate, but there seems to be some disillusionment because we are required to still support IE6.
Do you guys have any thoughts to this end?
This is what I'm going for:
Semantic code - YES
Validating code - YES
Works in IE6 - YES
Let's not argue over semantics here lol. =]
HTML JS CSS
Yes, you can have fully compliant code, and keep the cruft for IE6 in a separate file (normally):
Just hide any IE6 specific code with IE conditional statements. This is the preferred way to do it if you want your CSS to still validate. Additionally, all valid HTML should work fine in IE6 with the proper styling applied via CSS:
<!--[if lte IE 6]>
<link rel="stylesheet" href="/css/ie6.css" type="text/css" media="screen" />
<![endif]-->
That will be hidden from all validators, and the rest of your code can remain valid.
In fact, since the conditional comment is just that, a HTML comment, even that code is still valid.
EDIT:
The only way to prove this would be to build an example, but all three are possible with IE6 and proper knowledge in coding.
Semantic Code: YES
Validating Code: YES
Works in IE6: YES
In fact, its not just IE6 that presents a problem with valid code but both IE6 and IE7 (and IE8), but again, only in the CSS. Validate your main CSS files but keep IE6 CSS separate with conditionals.
Rarely do I have to add extra markup to the HTML to support IE6 (other than conditionals in the head). It is simply a matter of understanding the box model, and building your semantic pages accordingly.
One or two divs are not evil if they present a proper grouping. Three nested divs to fix a bug is evil :)
Short answer: yes!
It's been my experience that valid, semantic markup actually works better with IE6. Combine this with correct, valid, and simple CSS and you're pretty much golden. Sure you're bound to encounter some strange behavior in IE6, especially for more complex designs, as noted above. However, most of these bugs are well documented. With simple, valid code, identifying and fixing these issues is often fairly simple.
Conditional comments, as noted above, certainly work, but developing valid code will prevent you from peppering your code with all sorts of conditions.
Still can't make it work? Degrade gracefully! Sure rounded corners are pretty and all the rage, but the 20% (hopefully less) of your users who are still living in the dark ages probably won't miss them.
It's a bit of work to make the code work in IE6, and there is a bit of work to make the code validate, but that doesn't mean that it's the same kind of work or that one of them will make the other impossible.
There isn't really anything that says that the code has to fail validation to work in IE6. On the contrary, code that validates is more likely to work in any browser, not just IE6. There are some IE6 quirks that you can circumvent using non-valid code, but it's not the only method for circumventing the problems. Methods that use valid code are also more likely to continue working when new browser versions are released, so that you don't have to start over for every new browser update.
It's of course easier to make the code work in IE6 if you don't have to think about valid code at the same time, but that's just because there are more factors to consider, not because the factors are incompatible per se.
No, it is not possible for any moderately complex layout.
EDIT: At least not without adding lots of ugly conditionals.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
(I'd like this to be the definitive community wiki. I seeded it from my own answer to this question.)
Specify Everything
A lot of cross-browser issues amount to this: you didn't specify something, and different browsers make different assumptions. Therefore:
Declare a valid doctype
Your doctype tells the browser what rules you'll be using in your code. If you don't specify, the browser has to guess, and different browsers will guess differently.
In my experience, a "strict" doctype makes IE behave better (enables things like CSS :hover selectors on divs in IE7).
This article gives good background on doctypes.
Use Web standards
Avoid browser-specific markup, or only use it when its failure in other browsers won't be significant to the site experience.
Validate your HTML and CSS
You don't have to get everything perfect, but validation is good feedback. As Jeff said:
Knowing the rules and boundaries helps you define what you're doing, and gives you legitimate ammunition for agreeing or disagreeing. You can make an informed choice, instead of a random "I just do this and it works" one.
Imagine you opened a paragraph tag and never closed it. If you then open a list tag, did you mean it to be inside the paragraph or not? Validating will help you catch that, close the tag, and eliminate ambiguity.
Consider a CSS Reset
Different browsers assume different baseline CSS rules. You can help them all to act the same by explicitly ironing out the differences up front. Eric Meyer, who wrote CSS: The Definitive Guide, uses this reset. Another popular choice is YUI Reset CSS.
Use a Javascript library for DOM interactions
Whenever your Javascript needs to work with elements on your page, it's best to use a library like jQuery, Prototype, or MooTools. These libraries are used by many thousands of developers, and they take most of the inconsistencies between browsers' interpretation of Javascript, deal with those internally, and give you a consistent set of commands that just work. Trying to find and work around all these inconsistencies yourself is a waste of time and likely to create bugs.
Test in multiple browsers, deal with IE last
Test in multiple browsers as you go. Generally, you'll find that non-IE browsers behave similarly and IE is a special case - especially if you follow the advice above. When necessary, you can add IE hacks in a separate stylesheet and only load it for IE users.
Quirksmode.com is a good place for hunting down random browser differences.
Browsershots.org can help show how your page will be displayed in an assortment of browsers and operating systems.
Fail Gracefully
No site will look perfect in every browser that exists. If a user doesn't have Flash, or Javascript, or advanced CSS, etc, you want your site to be usable anyway. Design with that in mind:
Check the bare HTML
Try loading your site with bare HTML - no styles, no scripts. Are menu options available? Does primary content precede secondary content? Is the site usable, even if ugly?
Consider test-driven progressive enhancement
Described in this article, this technique uses javascript to check if a browser has a given capability, such as support for a given CSS property, before using it on the page. It is unlike browser sniffing because it tests for features rather than a specific browser.
Use a library like jQuery abstract away the differences in the DOM, AJAX and JavaScript.
Make sure you're keeping HTML, CSS and Javascript in separate files as much a possible. Mixing structure, presentation and behavior in your HTML file just makes finding and fixing problems harder.
Use Firebug in Firefox for:
Debugging/stepping through your JS.
Seeing how your stylesheets are being interpreted and hacking them up on the fly to see how to fix your problem.
See how many calls you are making for remote resources and how long they take.
Profile your code.
Chrome and IE8 have similar tools built-in that can be used for the same thing.
Opera and Safari (and IE) have Firebug Lite.
Use CSS Reset on start of your stylesheet...
You can get one here...
Validate your code by w3c ...
You can validate your code here by page link or simply copy paste page element
My #1 rule is use a strict doctype. HTML or XHTML is fine, but using the strict doctype removes pretty much every browser quirk there is, especially in IE7+.
Imagine you opened a paragraph tag and never closed it. If you then open a list tag, did you mean it to be inside the paragraph or not?
Actually you can't put any other block tags inside a <p> tag, that's why the spec allows you to omit the closing tag. If you start a list without closing a paragraph, then the paragraph is implicitly closed. And the validator won't complain.
That's not to say you shouldn't close tags, because it generally makes code easier to skim (you don't need to remember the above rules).
Consider programming you web-site's UI using Google Web Toolkit. With GWT you write all code in Java programming language which GWT then cross-compiles into optimized JavaScript that automatically works across all major browsers.
I think using best practice is the way to go, progressive enhancement is designing with the user in mind and needs to be done with all designers. I believe that a lot of testing on browsers is a good way to ensure proper content is being displayed, many developers over look this.
Generally, what's the best way to tackle a layout bug in IE6? What are the most common bugs or problems that one should look for when trying to figure out why your page suddenly looks like a monkey coded it?
First Things First
Get yourself the Internet Explorer Developer Toolbar. It's a life saver and works great with IE6 and/or IE7. It's no replacement for Web Developer Toolbar or Firebug for Firefox, but it's better than nothing.
Know Thy Enemy
Read up on the quirks of IE — particularly hasLayout and overflow and the like. There are also many CSS niceties that you'll have to either do without or find alternatives. Look into how many of the popular JavaScript toolkits/frameworks/libraries get around different issues.
Rome Wasn't Built in a Day
The more you have to work with it, the more you'll remember off hand and won't have to lookup as often. There's just no replacement for experience in this. As several have pointed out, though, there are great resources out there on the net. Position Is Everything is certainly up there.
http://www.positioniseverything.net/ will certainly address your problem.
It provides comprehensive and in-depth descriptions of browser bugs along with options to work around them. A must read, in my opinion,
One good way to start learning about how IE happens to be mangling the page is to turn on red borders on different elements with CSS (border: 1px solid red;). This will immediately tell you whether it's a margin problem or a padding problem, how wide the element really is, etc.
The box model is usually the culprit. Basically what this means is that any div you are trying to position and use unsupported CSS with will cause this problem.
You may find it happens if you are using min-{width,height} or max-{width,height}.
this provides a great reference for checking compadibility with different versions.
http://www.aptana.com/reference/html/api/CSS.index.html
Noticed that Marc's post is at a -2 =D. He's only saying "resort to tables" even though they blow, because in sucky browsers like IE6, some of the broken CSS commands work in tables only (who know's why... dam you Bill Gates!!!). Here's a good reference to see what works and doesn't work as far as CSS goes. http://www.quirksmode.org/css/contents.html . It's a great reference to check on what cool effects work/don't work with various, widely used browsers. Also, always have a go-to plan for users who browse with IE6 (even though it's just about as old as mechanical dirt) as many businesses still use older browsers (including non-profits/3rd world countries etc.) So by all means, create the bugged out drop-down menu that looks WAY better than a standard horizontal menu, but create a secondary one specifically for IE6 that becomes the default when the page receives a request from an IE6 browser.
how do you define layout bug? the most frustrating layout implementation (i don't know if this should be defined as bug) in IE is we need to always specify style="display:inline" in the HTML <form> tag so that a blank line won't appear to disturb the form layout.
This question I believe has far too much scope.
Validate your code, and if pain persists, well, good luck.
The only real solutions, as with any other ballpark bug type are to google for a solution, or ask somebody who knows, ( ie: give the exact problem to us here at stackoverflow ).
You can use the IE Dev toolbar to glean an Idea, but many of the bugs are random, inexplicable, and esoteric. IE: the guillotine bug, the random item duplication bug, etc etc, the list goes on, and you can spend hours literally goofing with stupid variables everywhere and achieve nothing.
I have a simple strategy that works every time.
First, I develop the site using commonly accepted CSS to look good in Safari and Firefox 3. See w3schools.com for details on browser support.
Then, I go into IE6 and IE7 and alter the CSS using conditional includes.
This is hack free and lets you handle different browsers (IE6 and IE7 have separate issues).
Most of the issues you'll find come from unsupported features in IE (like min-width), errors in the box model (IE adds unseen extra padding (3px) to some boxes), or positioning issues. Go for those first as they are often the issue.
A common problem is padding not getting added to the width of a block element. So for layout div's, avoid using padding and instead use elements within them to define the padding.
I use Rafel Lima's Browser Selector when I need to tweak differences between IE/Standards browsers. It greatly reduces using "hacks" in your HTML to solve common problems.
You can target CSS statements for different browsers, or even different versions of browsers (Hello IE 6). It's very simple to implement, but requires the user has JavaScript turned on (most do).
.thing { ....}
.ie .thing { ....}
.ie6 .thing { ....}
We had a floating div issue that was only evident in a particular version of IE6. It was fixed by downloading the latest service pack.
In theory, use CSS compatible with IE6 layout bugs, utilise only well known workarounds (css and html filters) and code for them in a way that wont break forward compatibility, test for quirks/strict mode.
In reality, resort to tables.
Making a web page display correctly im all major browsers today is a very time consuming task.
Is there a easy way to make a CSS style that looks identical in every browser?
Or at least do you have some tips to make this work easier?
I agree with all the "reset" suggestions and the "grid" framework suggestions, but I did want to add a bit of advice: The goal of identical in every browser is, in practical terms, unachievable because you cannot control the client. Case in point: fonts.
You declare your font styles in CSS but some Linux machines, some Macs, some mobile browsers -- will not have the font you specified. This variation leads to differing text lengths and wrapping. Then there's the variance of browser versions and operating systems running each; how different browsers implement zoom features; and the text size can be adjusted by the end user. Identical rendering is simply an unachievable goal.
But take heart! This is the "art" part of CSS: Being able to be flexible in your design such that variances between browsers, operating systems, and end-user adjustments are handled elegantly. Don't strive for identical rendering -- you should strive for brand consistency + appropriate experience + flexibility.
try using a css reset like the eric meyer reset or the YUI reset. will help but no easy or perfect way to make things look identical in every browser
Organize your work flow in the following way and it'll reduce a lot of time wasting.
Make sure you declare a doc-type.
Use one of the reset methods others have mentioned here.
Work on your structure
Avoid using width and padding on the same element where you can.
Always think of reducing unneeded HTML and css rather than adding all the time.
Try not to use margin left and right when floating elements.
If you stick to those items, a lot of the most common issues will not appear.
PS One item I forgot to mention was make use of the validators over at W3.
I've always created a basic CSS style sheet which works in W3C Fully compliant browsers like firefox and then created alternative browser specific style sheets to fix any styling issues in other browsers, i.e. IE6, IE7 etc.
You can use the following code within the HTML to select appropriate IE style sheets.
<!--[if lte IE 6]>
<link href="/css/eqtr_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
You can also use online websites such as browsershots to view your site in different browsers.
It is time consuming at first, especially if you are stilling learning the ropes of DIV+CSS. However after you've done enough practice and met enough of problems and got them all solved, you will have the knowledge of what WORKS and what DOESN'T WORK.
It is then you know how to write the most compatible style possible in the first place, thus saving all the time in degugging and rarely have any problems with any of the major modern browsers: IE6, IE7, FF2, FF3, Opera 9, Safari 3 Win / Mac.
Yes, it is possible and as easy as it can get. Practice and conquer them one by one, then you know how to do things right in the first attempt.
Well the only baffling monster should be IE6 I guess. It's inbrowser. Other than that, ff2, ff3, opera 9, safari win / mac, ie7, ie8 are relatively similar in the rendering engine, at least with much less bugs than it has with IE6.
I have a few best practices for you (one who has just begun their trip in CSS) in coding to get the max CSS compatibility:
Use a reset first. It clears your mind and makes sure each step of your job.
Don't use padding (left and right) and width on the same element unless you know well how that'll work out.
If an element is floated, give its parent overflow:hidden and height: 1% if the parent does not already have a height.
Don't give an element both margin-top or margin-bottom but only margin-top or margin-bottom. Because margins of adjacent elements collapse into one another, making the positioning somewhat unpredictable for novices.
If an element is floated, give it display:inline.
Don't rely on z-index unless your scripting needs it.
If anything weird happens in IE6, use height:1% on that element.
According to my experiences, these are things that will really really help you in solving potential problems. Use them and they eliminate your chances of stumbling upon any time consuming problem by 80%. Actually there are more trivial tips than these when dealing with specific tags but let's call it a day.
The Yahoo css foundation will help. To standardise formatting you will want reset and base.
Make sure to include the proper DOCTYPE.
I still see people regularly coping with box model issues because they forgot to include a doctype. Without the proper doctype Internet Explorer renders in "quirks mode", and so do other browsers to a lesser extent. If you include the proper doctype, browsers switch to "standard mode" and behave very similar to eachother.
Other then that, if you do this for a living you will rapidly pick up and remember those subtle corner cases where IE interprets things slightly different from Firefox, etc. With some experience it is entirely possible to design the entire page in your favourite browser and only make very tiny tweaks to the CSS to make it render almost pixel perfect in other browsers.
First of all you could try a reset, like some other people mentioned here, you can do a quick margin and padding reset with this piece of css:
*{margin: 0; padding: 0}
When you design your css make sure you're using a modern, standars compliant browser (personally I would recommend firefox 3 which has an excellent web developer toolbar, with which you can edit css from within your browser). Doing this will certainly make your site look ok in all the new browsers.
Most of the layout problems you'll have will probably be caused by Internet Explorer's wrong interpretation of the box model, you can avoid this by never setting a width and margin or padding at the same time. This might seem annoying but it's not, just apply the padding or margin to the content which is inside your element which has a width set.
Of course more problems exist but this is probably the most common and annoying one, for more specific issues you can always try google. Also, lately I'm considering to ignore IE6 and older browsers if my site's audience allows it, on a web design site you'll never find anyone using IE6, right? Of course this is not possible often since many (crazy ;)) people are still using IE6.
Also, if you need to test your site browsershots is a free way to do it quickly.
Test your CSS on all the browsers as you go. It's awful to get it pixel perfect in your pet browser only to find that it's way off in other browsers.
Taking this approach will ease you into an understanding of what will work on all the major browsers.
I've had success using the Eric Meyer CSS reset available here. It basically overrides a bunch of browser CSS styles that are default. Having said that, there are still a lot of differences (probably some of the ones that are troubling you like box model differences, etc. In that case, it might be better to use Blueprint to handle most of your css.
Using CSS Reset will give everything the same starting point, but won't do much to help with the changes you make beyond that starting point. I can't say there's really any easy way. One solution is to stick to a limited set of CSS that you know works well in all browser you want to support. You may not be able to do a lot of the fancier CSS stuff, but your CSS debugging time should come down considerably.
You might also look at a framework for css like Blueprint or css-boilerplate or the yui grids framework. Usually, these frameworks set you up with a standard set of css class definitions that you can apply to elements to lay them out in a specific and defined way.
If it needs to be pixel-perfect, then you'll need to use px in your stylesheets. Use a css reset stylesheet, then size everything based on pixels.
To ensure that your css is rendering correctly in different browsers, you might find a service like BrowserShots useful, however, I think you'll find it very difficult to get absolute consistency across all browsers.
My personal preference is to use correct markup and css, leave out any browserhacks, and design layouts to degrade gracefully.
Conforming to a strict doctype will take care of many of the differences as well. Also, I generally add a <div> tag to encase everything within the body, because I've noticed a difference in how firefox vs ie handle the body tag as a top level element.
I like developing against Firefox first, often using Yahoo's YUI for reset (and grids for basic structure of the page), and using IE conditional directives to override formats that IE, in all its–a-hem–wisdom, handles differently.
index.html
<head>
<link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/base-min.css" />
<link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/grids.css" />
<link rel="stylesheet" type="text/css" media="all" href="styles/screen.foo.css" />
<link rel="stylesheet" type="text/css" media="print" href="styles/print.foo.css" />
<!--[if gt IE 5]> <link rel="stylesheet" type="text/css" href="styles/ie.screen.foo.css" /> <![endif]-->
</head>
Develop for Firefox first. You can test in other browsers but don't worry about fixes until it works just how you want it in Firefox. Then move on to the other standards-based browsers, namely Safari and Opera. If you've written good HTML and CSS it shouldn't require much work in these browsers.
Then move on to the beast of the lot, IE. Use conditional comments to target specific IE versions. IE 7 should be fairly easy, for IE 6 you may find you have to sacrifice certain parts of the design to get it to work easily. This is OK, IE 6 is on the way out so don't worry if you don't fully support it. Transparent PNGs are usually the biggest problem, AlphaImageLoader just doesn't do the trick in every situation.
As previously mentioned, a CSS reset like Eric Meyer's is a good starting point, use it to build your own reset based on your needs. Other than that the answer is simple: there is no silver bullet.
Do websites need to look exactly the same in every browser?
Apart from that, I guess practice makes perfect. And read about everything you can find about the potential issues you can stumble upon. Using reset-files, correct doctypes, validators and frameworks might help you to a certain extent, but in the end you are in control of the code and only you know exactly what you want it to look like. The code might be valid and the browser might do exactly what you've told it to, and it still does not look like what you want it to.
The more you use CSS for layout purposes, the more problems you'll encounter, the more problems you'll find a way around and the more you'll learn. After quite a few years of making layouts entirely with structured, semantic HTML and neat'n'tidy CSS I seldom have to spend a lot of time correcting flaws in one or another browser.
Use a reset snippet
Develop with web standards
Validate your markup and CSS
Don't use margin and padding on the same parts of an element
Use IE conditionals
Test in all the browsers you want to support
Understand that nothings going to be perfect, but you can get pretty close.
The Yahoo User Interface (YUI) has a CSS Reset implementation which seeks to form a common baseline across all browsers. This should get you pretty close.
This is really a hard question to answer -- all browsers? Does this mean all versions? Mobile browsers? Just the "mainline" ones (opera, firefox, ie and safari)?
You won't find even full compliance on CSS level 1 stuff, so there are going to be some tweaks you're going to have to make. In my experience opera, firefox and safari all behave similarly when it comes to basic stuff (positioning, floats, divs, etc) and it's just IE you'll have to tweak for.
You could also use a tested CSS library or framework like yahoo grids (http://developer.yahoo.com/yui/grids/) or a programmatic interface like google's web toolkit (http://code.google.com/webtoolkit/).
I tend to find that identical looking CSS comes about if I use floats to layout the page in boxes. The flow model works as you think it should, and they're faithfully rendered in all major browsers.
I know some would tell me that the use of a lot of floats is wrong, but it works surprisingly well.
At the basis there is no guarantee that such a thing will ever work perfectly. As long as the browser developers find ways to do their own thing rather than the 'standard' way of doing things, you will have differences.
I've had positive results using the Yahoo User Interface Base CSS, but in the end even that couldn't cope with the more complex items that should be possible with CSS.
In the end I went for a less-than-perfect solution and simply made my framework check if I had set up browser-specific stylesheets.
Here's a PHP snippet to illustrate. Sorry for the language-specific solution, but I guess the idea is clear enough to implement in different languages:
$sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sStyle."\" />\n";
if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension))
$sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension."\" />\n";
if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension))
$sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension."\" />\n";
With no missing files, no unrecognized tags or other code that might choke some browsers, the pages from the framework render as we want them to render in all browsers requested by our clients. More importantly, they do so without producing errors (i.e. an empty Error Console in FireFox) which makes debugging when you actually do run into an error a lot easier.
I'd recommend taking a look at Blueprint and 960 Grid System.
Besides doing resets and including CSS fixes for Internet Explorer, they'll both give you an easy to work with design grid that will take care of a lot of the tedious tweaking when building CSS-based layouts.
I usually develop against the W3C CSS validator, then verify things look the way I want them to in the respective browsers. Validating goes a long way toward consistent behavior.
Sometimes I'll strip the page down to only styles that validate and show properly in the major browsers I'm targeting, sometimes I'll supplement it with browser-specific tweaks as other posters have mentioned.
css frameworks certainly help, although they can easily be heavy due to a heap of styles that you won't need or use.
check out
Targeting IE Using Conditional Comments and Just One Stylesheet over at Position is Everything for a great technique to feed IE version-specific styles without using CSS hacks; this allows you to keep style rules together by selector rather than by browser.
You're asking the wrong question, because here's the only way to answer that:
<!DOCTYPE html>
<html>
<head>
<style>* { background: #fff }</style>
</head>
<body></body>
</html>
Not much of an answer, is it? :)
Everyone else is right here - make your CSS work in every browser, don't try to make it look the same. You can't.
Applying the Design Tinfoil Hat
CSS:
*{display:none}