CSS hellp with IE8 and 9

[aaron4osu]

I have built a site that has been works fine on safari and firefox. Now I'm trying to optimize for IE8 and 9. There are so many little things (borders, positioning, padding, margin, cs3, etc...) that are wrong when viewing on IE and I'm not sure where to start. Are there tools that help with this. I've searched but can't seem to find much help.

Here is the site: http://aaronhaas.com/pitchshark5/index.php?vid_id=4

[chrishirst]

A: lose any positioning, you are probably using incorrectly anyway, not your fault though, most tutorials fail to explain it fully, they just tell you to use it.

In your layout the only place I can where positioning is required is the "drop down menu".

CSS3 with IE8?? Not going to happen! CSS3 with IE9?? A lot of it works, however there is a lot that doesn't.

So: Read up on the W3c box model it is not like a real world box, learn about the floating elements and "clearing" them

And after that start to use positioning is in most cases a last ditch effort to make a layout work, if you have to position elements, you have got something wrong somewhere.
The ONLY exclusion from the above, are CSS "dropdown" menus where postioning is required to make the function appropriately with disrupting the normal flow on each "mouseover"

[aaron4osu]

Thanks Chris, Luckily, most of my positioning is done by floating divs and then using margin to position them. But the site still looks nothing like the normal browsers.

Are there any goods guides to use for this that will show work arounds for ie?

[chrishirst]

You need to look at things like this

#container {
	width:985px;
	margin:0px auto;
  margin-left:20px;
}

Your rules set the container to be centred then promptly break that by resetting the left margin.
Also your widths make no allowance for the fact that margins, padding and borders increase the width of an element so you get "float drop" where elements are forced down to the next horizontal row.

You also need to clear the floats where the buttons "break out" of the parent container to prevent that from happening.