IE is being a bear with CSS

*SOLVED*

Here is the page I am working with. www.finalcoatpainting.com/hdwp

Oh boy, IE7 has a bunch of errors. First, here is the screenshot of Firefox (how it should look)http://www.finalcoatpainting.com/tmp/ff.jpg So here is IE7 http://www.finalcoatpainting.com/tmp/ie7.jpg
Items are moving out of the container, background colors are not on headers as they should be. The coding is w3c error free so far.

I'll break down what I see wrong, but can't figure out.

#1.) The logos at the bottom of the columns. Right now, that area is coded as an absolute position that sits right off of the bottom and is aligned center. For example, the first one is coded like this .multiHousingColumn div {
bottom: 10px;
position: absolute;
text-align: center;
width: 200px;
}That doesn't play well with IE7 I guess.

#2.) Header background goes away on one of the headers. The code is .fmColumn h3 {
background: url("../images/FMTitleBackground.png") repeat-x scroll 0 0 transparent;
color: #FFFFFF;
font-size: 18px;
font-weight: normal;
height: 60px;
line-height: 20px;
margin: 0;
padding: 13px 0 0;
text-align: center;
text-transform: uppercase;
width: 100%;
}On the header in the second column, but that doesn't play well with IE7 either.

There are quite a few more errors too, which is discouraging. What is the deal here? Thanks for any advice

From my experience, IE does not do a very good job "guessing" when things aren't defined explicitly. FF seems to.

I don't have time to look at all your code right now (appologies), but for #1.) have you tried defining the positioning (ie. left: .. px)? Also, is the parent div a set width? And is it defined as absolute or relative?

Thanks for your brief stab. Adding left:0; did the trick for that. Now, off to the other issues...

Might want to check the validation of your CSS document, seems to be a few errors there. Firefox sometimes lets a few minor errors slip whereas IE will kick you in the face for them. :)

Huh?
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.finalcoatpainting.com%2Fhdwp%2F
"This document was successfully checked as XHTML 1.0 Transitional!"


I got most of it figured out. IE7 was kicking around my absolute positioned elements. There are a couple of minor bugs left, and I wouldbet money that the rollovers are garbage in IE7, but I don't know how to check that.

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.finalcoatpainting.com%2Fhdwp%2F&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en

:)

Yeah, those errors are for a rotating image plugin and a cross-browser css drop-shadow. Weird how 2 different w3c throws different results

Any idea how I would check the rollovers? I don't have any access to IE7

validator.w3.org just validates html markup.

jigsaw.w3.org validates CSS definitions.

Thanks.