And after previewing it in FF, Safari, Opera, I recently published it online. Last week, I tested it using Browserlab in IE, where is among a few other issues, the container div on the home page is approximately 20 pixels (of margins) too high in IE 6 and 7… It looks a mess.
I also notice that the “submit” div is displaying too far right in IE8 (it’s partially beneath the “content” div).
I tried troubleshooting to no avail and then consulted a friend who suggested I try writing a conditional comment for fixes. But the comment does not seem to work; the home page is still not displaying properly. I used the following code in my html doc:
In the the IE_fix.css file I included the following declaration:
#container_one {
margin-top: 102px;
}
Can anyone look at my site tell me how I can lower the container div and why this problems is occurring?
I think what you could do for IE6 is set a lesser height on the container.
Laying out elements with position: absolute is no really a good approach, though. Floating is much more reliable and a lot more flexible. I’d recommend that in future.
It actually looks fine in both IEs. The conditional comments are working. Only the png images aren’t working in IE6, but there are fixes for that if you want them.
I’ve been messing around with the code and things are looking good in IE7.
But, when I checked IE8 in Browserlab , I’m still having issues; container_one div is 20 pixels too low (I was however able to fix the submit div by setting display:block; ).