CSS not rendering as expected in IE

Hello,

I am really new to developing websites, but have finally come up with something I'm happy with... in Safari and Firefox at least!

When I view the website in Internet Explorer 7, everything looks pretty obscured... The red line on the background is not in line with the red line on the banner, and the dark part of the panel at the bottom (where you see "step 1") is gappy and not at all how I styled it using CSS...

The panel that contains "step 1" initially is supposed to have 2 states: 'active' and 'non-active'. Step 1 should initially show as 'active' where the text color is #FFFFFF, the left and right borders are #333333, the top border is #FFFFFF, and the bottom border is #999999. When the "continue" button is pushed, this box should turn 'inactive' where the text becomes #999999, and the border colors should all change. Incidentally, "step 2" should be shown next to "step 1", and it should be in the 'active' state.

The web page is viewable at http://web.me.com/philbateman/TowerTool/index.htm

Can anyone please help me to shed some light on how I can fix this? I've been trying everything I can think of, and nothing seems to be working...

Any help greatly appreciated!!

Fix the errors in your markup first, before expecting cross browser support, see http://validator.w3.org/check?uri=http%3A%2F%2Fweb.me.com%2Fphilbateman%2FTowerTool%2Findex.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

Why not make the entire top section a background picture and add on a transparent gif to link to the homepage? I do that whenever I get frustrated and can't find anything else that will solve it.

Fix the errors in your markup first, before expecting cross browser support, see http://validator.w3.org/check?uri=http%3A%2F%2Fweb.me.com%2Fphilbateman%2FTowerTool%2Findex.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

Thanks. I have fixed all of the errors in the markup now, but I am still not getting the expected styling from IE7. As before, the 'active' state, looks ok, but the 'inactive' icons do not seem to be showing the border colors, and it appears as though they are floating. (The background of the body can be seen in between each icon.)

Do you have any ideas on what I could change?


Why not make the entire top section a background picture and add on a transparent gif to link to the homepage? I do that whenever I get frustrated and can't find anything else that will solve it.

Thanks for your advice. I had the same thought earlier, and it certainly solves the problem with the red line alignment. However, the GIF image was pretty blocky, and I couldn't seem to avoid that with a GIF.

Why not make the entire top section a background picture and add on a transparent gif to link to the homepage? I do that whenever I get frustrated and can't find anything else that will solve it.

Sorry, I misread your previous post. I see what you mean now, I'll give that a go, thanks!

I have fixed all of the errors in the markup now Congrats! Now the next important one to read.. "Why tables for layout is stupid? (http://www.hotdesign.com/seybold/)"

PS: have some errors in CSS (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fweb.me.com%2Fphilbateman%2FTowerTool%2Findex.htm&profile=css21&usermedium=all&warning=1&lang=en)too.

Congrats! Now the next important one to read.. "Why tables for layout is stupid? (http://www.hotdesign.com/seybold/)"

PS: have some errors in CSS (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fweb.me.com%2Fphilbateman%2FTowerTool%2Findex.htm&profile=css21&usermedium=all&warning=1&lang=en)too.

Thanks, I have cleaned up the CSS errors, but am still getting the same styling problems. Are the tables definitely causing the problem in IE7? I only ask because this seems like a big job, and will take a lot of time, and it all seems fine in Safari and Firefox (on a Mac).

Are the tables definitely causing the problem in IE7? I can't assure this, but you'd get some quick help/solution from here, if it's not a table layout.

See http://www.boagworld.com/technology/semantic_code_what_why_how/ also.