How to make your CSS look the same in IE and firefox
Posted on May 27, 2008 by
Paul WhiteI was fighting some design issues on my client's new site. But I found
some
CSS code that did the trick. I guess the trick is to reset all
your tags inside your
CSS before starting to implement your own custom
attributes. If you have been struggling with getting your
CSS to look
the same on both your firefox and IE 7 pages. This code snippet will do
the trick. The idea is that each Browser has its own default values. Unfortunately none of them are the same. This makes it very hard when trying to get your pages to look the same in different browsers.
All I did was take the following code and pasted it at the top of my
CSS file.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Thanks to
Eric at meyerweb.com
Discussion
No Comments have been submitted
WhiteSites Blog