Question

I am working on an internal, custom ASP.NET site that was specified by the customer to only require working in Internet Explorer. This means that no resources have been put forward to make sure it works and looks nice in other browsers, although there is no exotic IE-only technology used or anything like that.

Since eventually someone is going to want other browsers to work, I was wondering if there exists something like a CSS Reset stylesheet that can help make other browsers layout more like IE.

I am looking for a reset stylesheet specifically intended to make Firefox, Chrome, etc, behave more like IE (I’m sure nobody will leave obnoxious comments about this), that won’t break too much of the existing layout (which is tested currently only on IE7).

I know I’ll have other issues with Javascript, etc, but this question is only about CSS/layout.

In short, does a CSS Reset sheet exist to “reset” CSS to the IE defaults?

Answer 1

It’s not specifically designed for IE but you could use this – It really wont make much difference, what you really need to do is apply it then adapt your existing styles so it looks the same in all browsers.

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,
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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}

Ass it in a separate .css file and call into the top of your main styles.css file using: @import "reset.css";