Common ie6 fixes

Like many I tend to come across ie6 rendering bugs and like many have developed my own (read others) set of techniques to overcome theme.

Correct doctype, with full correct DTD, transitional or strict (solves so many issues without having to change anything):

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Reset stylesheet (via Eric Meyer) the goal of a reset stylesheet is “to reduce browser inconsistencies” see here for a deeper explanation, again solves many many issues and enables a new build to start from the same starting point on every browser by resetting common element behaviour.

/*
=Reset
*/
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;}
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:"" "";}

And some other fixes I have picked up

/* -------------------- */
/* =IE6 FIXES */
/* ------------------ */
img {border:none;display:block;}
/*display block to avoid IE6 whitespace on inline elements
due to baseline spacing (for descender space),i.e. images*/

.inline {display:inline;}
/*used to fix IE6 double margin bugs*/

.haslayout {height:1%;}
/*used to fix IE6 haslayout bugs*/

.button {overflow:visible;display:block;}
/*add this class to form buttons with issues*/

a, a:link, a:visited, a:hover, a:active {color:red;}
/*link styles should be in the order LVHA esp for IE6 to display them well*/

Also, avoid/beware overuse of widths, heights, margins (esp with floats), too many position: relative’s (esp. nested position:relatives), widths + heights + padding + margin (box model issues, add padding/margin to fixed-width child elements). There are many more issues and many other ways to solve them, but generally most can be solved via fairly well documented locations, a good one here, otherwise search on google.

Adiós ie6

Sorry ie6, your names not down your not coming in.

ie6 is ancient, crap and quite frankly I can’t be bothered, not when it’s my own site. I deal too much with that in my day job to be arsing about with rendering bugs and bad programming in my own time.

So for ie6 users I have applied “Aggressive Graceful Degradation” via Andy Clarke and his Universal Internet Explorer 6 CSS.

The site is still very accessible via IE6, but just no visual goodies. There have been too many advances in css for me to stick with 6 year old knowledge, to allow me to grow professionally I need to be able to play with the new toys. I mean it’s not too much to ask for li:last-child or input[type=”button”] is it?

So if you are an ie6 user, just think of it as a realllly minimalist version of the design, or if you want to see websites not framed via technology from the last century upgrade now.

For those not using satan’s own browser, screengrab below:

ie6

2019 2017 2016 2014 2013 2012 2011 2010 2009 2008 2007 2006 2005 2004