I upgraded a website I've been working on (http://barsannapolis.com) to a CSS Layout, and things appeared to go well for the most part. The site renders correctly in Firefox, Chrome, IE 7, and Safari, but the design appears to be complete borked in IE 6. Does anybody have any guidance regarding how to get the problems fixed. Perhaps there is something simple I am overlooking?
Also, are there any IE tools that make it easier to live-edit the CSS, like firebug.
positioniseverything.net is your friend. Since I've long ago left that world (thank God!), I don't envy you, but the problem is usually double padding, esp. if your floated boxes aren't lining up ("dropping").
You can hack IE6 with width:30px; _width: 20px; in your stylesheet, where the _ rule at the end is the IE6 'adjustment' you wish to make. That works for all the rules, across the board.
But every time I had a problem, it was usually down to double-padding horizontally, which really harfs floated divs in IE6.
Good luck. Like I said, I do not envy you in the slightest. IE6 is a plague which must be eradicated.
Theres nothing like firebug in IE and well, even tho theres a couple of "common problems" with IE6 and css, the truth is that each site is diferent and requires a lot of try and error.
Honestly i would not support IE6 if < 20% use it(check with google analytics), i mean IE7 its been out for years, IE8 is coming anytime now and even gmail declares theres no support for IE6 so... i wouldnt worry that much
You can try out the Internet Explorer Developer Toolbar to help you track down issues related to the CSS. It's nowhere near as good as Firebug but it can be useful occasionally:
If you are getting the double float margin bug, you might want to try applying display: inline; to the floated elements that are giving you issues. This stops the bug from occurring, and means you don’t have to assign different widths for IE.