CSS not rendering properly on Internet Explorer

HTML & CSS
1

Hi,

I’m facing a conundrum while trying to design a page using CSS.

The page looks fine on all browsers except IE.

I don’t know why this is happening. I do know that IE doesn’t support curved corners but the rest should work fine. The menu doesn’t drop down in IE.

Plzzzzzz help me out. Thanks in advance!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head> 
<title>Jeevan Sanyam - empowering needy children</title>
<style type="text/css">
body { background-color: white; margin: 0; padding: 0; font-size:100%; overflow: scroll }
.everything {width: 1134px; height: 600px;position: relative}
.firstbox  {width: 210px; height: 210px; background-color: #B7C32F; position: absolute; top: 25%; display: inline; float: left; left: 210px; text-align: center;border:2px solid #B7C32F;-moz-border-radius:25px; /* Firefox */border-radius:25px;}
.secondbox {width: 210px;left: 432px;height: 210px; background-color: #98D6B7; float: left; display: inline; position: absolute; top: 25%;border:2px solid #98D6B7;-moz-border-radius:25px; /* Firefox */border-radius:25px; }
div.secondbox:hover {height: 295px}
div.secondbox:hover p {display: block;}
.thirdbox {width: 210px; left: 654px; height: 210px; background-color: #F7C509; float: left; display: inline; position: absolute; top: 25%;border:2px solid #F7C509;-moz-border-radius:25px; /* Firefox */border-radius:25px;}
div.thirdbox:hover {height: 345px}
div.thirdbox:hover p {display: block;}
.fourthbox {width: 210px; left: 876px; height: 210px; background-color: #C01349; float: left; display: inline; position: absolute; top: 25%;border:2px solid #C01349;-moz-border-radius:25px; /* Firefox */border-radius:25px;}
div.fourthbox:hover {height: 270px}
div.fourthbox:hover p {display: block;}
.firstbox span {font-family: Verdana; font-weight: 900; font-size: 20pt; color: white; position: absolute; top: 30%; display: block; text-align: center; width: 100%}
.secondbox span {font-family: Verdana;font-weight: 900; font-size: 150%; color: white; position: absolute; top: 30%; display: block; text-align: center; left: 10%; right: 10%}
.thirdbox span {font-family: Verdana; font-weight: 900; font-size: 20pt; color: white; position: absolute; top: 30%; display: block; text-align: center; width: 100%; z-index: 20876}
.fourthbox span {font-family: Verdana; font-weight: 900; font-size: 20pt; color: white; position: absolute; top: 30%; display: block; text-align: center; width: 100%}
div.secondbox p {display: none; margin-left: 5%; margin-right:5%; width: 90%; font-weight: bold; font-family : Verdana; font-size: 0.8em; position: absolute; top: 200px; text-align: center}
div.secondbox a {text-decoration: none; display: block; color: white; z-index: 28387; text-align: center; padding: 5px;}
div.secondbox a:hover{background-color: white;color: #98D6B7; border:2px solid #98D6B7;-moz-border-radius:10px; /* Firefox */border-radius:10px;}
div.thirdbox p {display: none; margin-left: 5%; margin-right:5%; width: 90%; font-weight: bold; font-family : Verdana; font-size: 0.8em; position: absolute; top: 200px; text-align: center}
div.thirdbox a {text-decoration: none; display: block; color: white; z-index: 28387; text-align: center; padding: 5px;}
div.thirdbox a:hover{background-color: white; color: #F7C509; border:2px solid #F7C509;-moz-border-radius:10px; /* Firefox */border-radius:10px;}
div.fourthbox p {display: none; margin-left: 5%; margin-right:5%; width: 90%; font-weight: bold; font-family : Verdana; font-size: 0.8em; position: absolute; top: 200px; text-align: center}
div.fourthbox a {text-decoration: none; display: block; color: white; z-index: 28387; text-align: center; padding: 5px;}
div.fourthbox a:hover{background-color: white; color: #C01349; border:2px solid #C01349;-moz-border-radius:10px; /* Firefox */border-radius:10px;}
</style>
</head>
<body>
<table>
<tr>
<td>
<div class="firstbox">
<span>JEEVAN<br />SANYAM</span>
</div>
</td>
<td>
<div class="secondbox" id="second">
<span>ABOUT US</span>
<p>
<a href="http://www.yahoo.com">WHAT WE DO</a>
<a href="http://www.yahoo.com">STAFF</a>
<a href="http://www.yahoo.com">PARTNERSHIPS</a>
</p>
</div>
</td>
<td>
<div class="thirdbox">
<span>SOLUTIONS</span>
<p>
<a href="http://www.yahoo.com">CHILD CARE</a>
<a href="http://www.yahoo.com">MALTREATMENT</a>
<a href="http://www.yahoo.com">PASSENGER</a>
<a href="http://www.yahoo.com">FIRE & BURN</a>
<a href="http://www.yahoo.com">HOME SAFETY</a>
</p>
</div>
</td>
<td>
<div class="fourthbox">
<span>CONTACTS</span>
<p>
<a href="http://www.yahoo.com">CONTACT US</a>
<a href="http://www.yahoo.com">LOCATIONS</a>
</p>
</div>
</td>
</table>
</body>
</html>
2

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
change this to :
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

second, it has nothing to do with your IE problem but it’s silly to use a class only ONCE and especially when you also have IDs.

It would be more efficient to write .box { all the common rules to second, third and fourth box} and add the individual attributes to their respective IDs. You’ll thank me in the long run.

Which version of IE Are you using… Drop downs dont work inIE6 w/o javascript, as IE only supports :hover on anchors. The changing of the doctype as I suggested earlier should fix some box sizing problems and give you hover in IE7+

3

Thanks a lot!!! :slight_smile:
That solved my problem.

Thanks again for your suggestion! :slight_smile:
I’ll do that.

I’m using IE8 & now everything’s working fyn, thanx 2 u! :slight_smile: