Comments on: How I debug CSS in IE6

By: andrew

andrew — Tue, 11 Nov 2008 04:53:44 +0000

Thanks for the tips, some of them I already do..

By: Raymond Spidla

Raymond Spidla — Mon, 10 Nov 2008 01:30:53 +0000

Thanks for the list of tips and tricks. Anything that saves a little time is much appreciated!

By: Andy

Andy — Fri, 07 Nov 2008 01:00:42 +0000

I’d also add:
- the IE web accessibility toolbar (http://www.visionaustralia.org.au/ais/toolbar/)
- firebug lite (http://getfirebug.com/lite.html)
- and xray (http://www.westciv.com/xray/)
… to your bag of tricks for debugging complex or ajax-driven sites.

By: Dean

Dean — Thu, 06 Nov 2008 21:36:49 +0000

Good tips. Funnily enough though with my experience, I actually avoid reset.css or similar, and avoid floating anything at all unless I have to when building new sites, but whatever method works for when I’m thrown n the deep end of an existing CSS mess.

By: Jeff

Jeff — Mon, 03 Nov 2008 12:06:26 +0000

height:1%; also fixes many IE6 issues

By: phil

phil — Sun, 02 Nov 2008 19:41:34 +0000

@Richard, Peacock Carter: yes I love position: relative… it’s the penicillin of IE6 bugs. Got a PNG background image behind a link – throw some position: relative at it; got a negative margin on a div (to get it outside of its parent div) but it gets cut-off behind something else – throw some position: relative at it :)

I’ve also been finding display: inline-block to be of good use lately too – don’t ask me why it works it just does sometimes!

By: Richard, Peacock Carter

Richard, Peacock Carter — Sat, 01 Nov 2008 11:37:53 +0000

It’s amazing how ‘position: relative’ fixes a lot of problems in IE. When debugging, I also tend to set background colours/borders on elements so I can check they’re where they should be.

By: phil

phil — Sat, 01 Nov 2008 08:44:48 +0000

@Mark: IE Mac is best ignored completely :)

@Paul Michael Smith: I share your pain: I find with transparent PNGs that the hacks usually work, but every now and again – especially where links are involved – the whole thing breaks down leaving links that can’t be clicked.

By: Paul Michael Smith

Paul Michael Smith — Fri, 31 Oct 2008 18:02:33 +0000

Nice post.

Asepsis before Antisepsis is definitely the answer. I usually do that by building to W3C Specifications always in the first instance and then use an IE stylesheet later for proprietary tags, hacks and fixes later.

Good old PIE! (http://www.positioniseverything.net) That has the best write-ups on the IE6 Bugs/Hacks and it made me laugh when IE7 was launched because IE Developers specifically mentioned PIE and the bugs from “explorer exposed” that they had fixed.

My biggest problem comes with Transparency in IE6 because bugs are fixable but something that is just plain not implemented in IE6 is hard to get around. Occasionally the filter: expression will be good enough but most of the time it doesn’t cut it.

Andy Clarke’s post about browser differences we can live with (http://forabeautifulweb.com/blog/about/five_css_design_browser_differences_i_can_live_with/) was interesting its just a shame clients and corporations wont see it that way.

Using the NOT IE conditional will come into play more and more I would think. Detailed nicely here: http://www.simonclayson.co.uk/reportage/ie_6_text_only/

By: Mark

Mark — Fri, 31 Oct 2008 16:42:47 +0000

Phil – Nice. HTML Validator is a must for any developer (along with the web developer toolbar).

For monday, please can we have an article for debugging CSS for IE on the Mac.

Thanks muchly!