Battling with IE – 4 CSS methods

Recently I have come to the realization that I spend so much time in production that I rarely get to search for things that would be useful, big picture resources/learning for future projects. Basically, I’m bad at keeping up with where CSS and HTML are going. And since I am trying to really push myself to have better skills to contribute to not just my current position, but the world at large, I have found a bunch of great resources.

I have to admit that having a blog and wanting to write well researched and thoughtful articles has really contributed to this. I’m still brewing my last critique of Safari 3.1, and in the process of doing research around this have discovered quite a bit of cool stuff (by the way, my writing still sucks, I use words like stuff too much). So I thought I would list a few way to deal with IE issues.

1. Eric Meyer is the man, and give us this bit of code to break some of the major issues you will run into with IE. You can see them at his Reset Reloaded article, which I found on this webiste, Keys to Consistent CSS. Here’s the code in case you are too lazy:
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: "" "";
}


   ******Update*******

   The above is the old version of the reset. Eric Meyer has a new version of the browser reset, posted Jan ’08.

2. Another great resource is Dean Edwards IE7 JavaScript library, which fools anything less than IE7 into thinking its IE7. Initially I thought this was awesome. Then I realized it made me lazy. Then I thought it was too big. Now I’m so good, I don’t need it (which is partially true). Version 2 has gotten much smaller, but is still in Beta.
3. Hacks. As much as I love them, they create invalid CSS. You can use _ before your propertiess to target IE6, and * before them to target IE7 (which also targets IE6 by the way), or both to create properties that affect both:
   
/* Target IE 6 and below*/
#maincontent {
width: 400px;
_width: 410px;
}
/* Target IE7 and below */
#maincontent {
width: 400px;
*width: 410px;
}
/* Target IE6 and IE7 separately. ***Make sure to put the IE6 ("_") property second*** */
#maincontent {
width: 400px;
*width: 410px;
_width: 415px;
}

   Let me be absolutely clear, I do not endorse hacks, but I have been known to use them in a pinch (a fact that I am not proud of).
4. And here’s my preferred method, Conditional Comments, which you can use to have specific stylesheets for different browsers. Make sure you put these after your global stylesheet(s) so they properly override the styles.