Urbano's Blog

One of the biggest problems when designing a website is that after all work is done it looks different on different browsers.
The solution usually used by most web developers consists on manually changing every bit of CSS they have to make it look all the same, resulting on a very hard and time-consuming approach.

A great solution that requires absolutely no extra-work is to reset all CSS settings so that there is absolutely no style assigned to any html elements.
This way you'll have to reapply all styles to all elements, but you'll be sure that once you are done, it looks the same on all browsers.

Here is the CSS code you'll use, developed by David Hellsing at Tripoli:

 
@charset "utf-8";
/* CSS Document */
 
/*
    Tripoli is a generic CSS standard for HTML rendering.
    Copyright ( C ) 2007  David Hellsing
 
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
 
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
 
    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http ://www.gnu.org/licenses/>.
*/
 
* {
	text-decoration: none;
	font-size: 1em;
	outline: none;
	padding: 0;
	margin: 0;
}
code, kbd, samp, pre, tt, var, textarea,
input, select, isindex, listing, xmp, plaintext {
	white-space: normal;
	font-size: 1em;
	font: inherit;
}
dfn, i, cite, var, address, em {
	font-style: normal;
}
th, b, strong, h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
a, img, a img, iframe, form, fieldset,
abbr, acronym, object, applet, table {
	border: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td, center {
	vertical-align: top;
	text-align: left;
}
body {
	background: white;
	line-height: 1;
	color: black;
}
q {
	quotes: "" "";
}
ul, ol, dir, menu {
	list-style: none;
}
sub, sup {
	vertical-align: baseline;
}
a {
	color: inherit;
}
hr {
	display: none;
}
font {
	color: inherit !important;
	font: inherit !important;
	color: inherit !important; /* editor's note: necessary? */
}
marquee {
	overflow: inherit !important;
}
blink {
	text-decoration: none;
}
nobr {
	white-space: normal;
}
 

Note that this is just one option, you can find a lot more on this article, down at perishablepress.com

I've been using it in all my websites and I have to say that it really cuts down on developing time. And the results in IE are astounding, I've had to tweak no more than two lines to get it look perfect.
It will reset all margins, colors, underlines, bullet styles...
Remember to place it BEFORE your custom styling, because if not it will override any new setting you have!
The version placed here is "condensed" and hard to read, but taking into account it's purpose I consider this to be a benefit, since it will decrease page size and thus load time...

Try it, test it, and comment here what you think of it!