The Blog

Nifty IE CSS and HTML Tricks and Tips

Posted on 09/23/09 in blog, development about CSS, HTML, tutorial

I see a lot of people struggling with making their website compatible in IE6 and IE7. I keep a nice little library on my computer of such useful snippets of code, I thought I’d share some to help the development world out just a bit.

CSS Reset

This helpful bit off CSS code comes from Eric Meyer. It has saved me from pulling out my hair countless times. With this reset, my websites are almost always perfect in IE7 – and about 5 minutes from perfection in IE6. It requires a little bit of extra coding, because it resets the margins on everything including ‘p’, ‘li’ and ‘ul’ tags but it’s worth it, trust me. Just stick this snippet of code at the very top of your main stylesheet and you’ll be good to go:

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; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }

PNG Fix

This fix is helpful when for design purposes, you must use a transparent PNG in IE6. I always try to replace my PNGs with JPGs or GIFs in my IE6 stylesheet (more on that below), but sometimes you just can’t, and therefor need a PNG fix. This fix from TwinHelix works great BUT you can not use it on a transparent PNG with links inside of it,  inside of a positioned element. As you should be floating most of your layout, except for a few items that break the box method, this shouldn’t pose a problem most of the time.

You’ll need to download the zip file and place the iepngfix.htc and blank.gif in the main directory.

Place this bit of code inside your main or IE6 stylesheet:

img, div { behavior: url(iepngfix.htc) }

If you save your blank.gif anywhere but in the same directory as the iepngfix.htc, you’ll need to open the htc file and change the path. It’s right at the top of the file and includes a lot of commented documentation, so it shouldn’t be difficult to find. Also, you many need to add more elements, or full classes to the behavior tag, depending on where your PNGs are.

IE6 Conditional (Specific) Stylesheets

I don’t like using browser hacks in my main stylesheet, but I will use an IE6 conditional stylesheet. All this does, is read your browser, and if you’re using IE6 pulls this stylesheet underneath your main one: so you can half your doubled margins, replace your PNG backgrounds with JPGs, and basically code for IE6 without affecting other browsers. Just stick this code UNDERNEATH your main stylesheet (or it will get read over)

<!--[if IE 6]>
	<link href="ie6.css" type="text/css" rel="stylesheet" media="screen" />
<![endif]-->

Make IE8 Look Like IE7

This is one I always forget, because admittedly, I’m still not used to IE8 being around…but it’s quite useful. Stick this is your meta tags and it will force IE8 to read like IE7, therefor saving your poor soul from yet another browser test. (We have so many to test for already, don’t we?)

<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />

These are a few of my most used and favorite. Have one you like to use that’s not above? Let me know.

About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?

Tweet