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.

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:

Right adding new post to try and get in the habit again, look our (cyclists) very own crossing machine type thing:

I’ve abandoned this blog for too long, my excuse being twitter took over my general communications attention and I have built more blogs in the last year and a half that the rest of my online career put together (about 250 odd blogs in just over a year).

The main driver for this was leaving publishing after eight long and enjoyable years in publishing to join Headshift Ltd. a social business consultancy (thus the multitude of blogs). I’m loving it, but haven’t felt the desire to blog much, I guess a coals to Newcastle type issue.

Yet it’s time to return to blogging, both as twitter, although an excellent tool is just that, a tool among many others that each have their own benefits and disadvantages. So as it’s a new chapter in this blog, it felt necessary to refresh the focus and design. Which has culminated in a more tumbler-esque feel (yeah, a bit obvious I know) in the sense that there are different types of blog entry; video, image, post and code (and maybe others in the future). That last category is because I want to speak more about code and my professional practice more, specifically css/xhtml/jquery as well as other concerns such as ux, interaction design, development (front-end + back-end) and all the bits inbetween (i.e. the issues with how those practices interact).

So I have categorised this post somewhat incorrectly as ‘code’ just because I can, to justify it, some css I use far too often, it’s generally non-semantic, there are other probably better methods (overflow:hidden on container for self clearing) but sometimes there is nothing more satisfying that popping this into a container after floated elements and see that bad boy get into line.

/* -------------------- */
/* =Clearing */
/* ------------------ */
.clear {clear:both; line-height:0; font-size:0; height:0;
padding:0; margin:0; border:none;}

Oh and btw, haven’t tested this in the IEs yet – not sure if I will (i will but I just want to be mean). Although they will be getting graceful degradation for the nicer more advanced bits on this design; you can’t make black&white tv’s show in colour so why try.

Right, hopefully it won’t be 6 months before I post again.

[flash http://www.flickr.com/apps/video/stewart.swf?v=71377]