SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation CSS not rendering properly on Internet Explorer

    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!

    HTML Code:
    <!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. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    <!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. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    <!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+
    Thanks a lot!!!!!!
    That solved my problem.

    Thanks again for your suggestion!
    I'll do that.

    I'm using IE8 & now everything's working fyn, thanx 2 u!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •