Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile CSS problem with Internet Explorer

    I've (started) making a site that looks fine in firefox, safari and opera but is a complete mess in internet explorer. I think it may have to do with EI not allowing <dev> overlaps? I'm not quite sure.
    I made a page with screen shots of the error at http://www.freewebs.com/sapphworks/eibug.htm
    The page itself is at http://www.freewebs.com/sapphworks/mamapg.htm
    And this is the code: (bold stuff is probably important to the problem)

    <html>
    <head>
    <title>Welcome to SWC online!</title>

    <script language="javascript">
    function showMe(tehid){
    document.getElementById(tehid).style.visibility="visible";
    }

    function hideMe(tehid){
    document.getElementById(tehid).style.visibility="hidden";
    }
    </script>

    <style type="text/css">

    <!--login table--!>
    table.loggy{color:e09800;font-family:"georgia"}

    <!--drop down menus--!>
    div.menu1{background-color:000000;position:fixed;left:400;top:110;color:FFFFFF;visibility:hidden;font-family:"georgia"}
    div.menu2{background-color:000000;position:fixed;left:420;top:110;color:FFFFFF;visibility:hidden;font-family:"georgia"}
    div.menu3{background-color:000000;position:fixed;left:440;top:110;color:FFFFFF;visibility:hidden;font-family:"georgia"}
    div.menu4{background-color:000000;position:fixed;left:460;top:110;color:FFFFFF;visibility:hidden;font-family:"georgia"}
    div.menu5{background-color:000000;position:fixed;left:480;top:110;color:FFFFFF;visibility:hidden;font-family:"georgia"}

    <!--parchment background--!>
    div.back{background-image:url("parchmentbase.jpg");position:fixed;left:100;top:120;width:800;height:400;}

    <!--scrolling text--!>
    div.text{background-image:none;position:relative;left:100;top:120;margin-left:120;width:650;height:390;overflow:auto;font-family:"georgia"}

    <!--login box--!>
    div.zippy{background-image:url("church.jpg");background-repeat:no-repeat;color:e09800; height:249px;width:200px;position:fixed;left:10px;top:150px;font-family:"georgia"}

    <!--golden header--!>
    div.header{background-color:e09800;height:75px;width:800;position:fixed;left:100px;top:10px;}

    <!--non-dropping part of the drop down menu--!>
    div.menu{background-color:0090e6; background-image:url(bluerib.jpg);background-repeat:no-repeat;height:25px;width:800px;position:fixed;left:100px;top:85px;}

    </style>
    </head>
    <body bgcolor=000080>

    <div class="back">
    <BR>
    </div>

    <div class="text">
    blah blah blah .........
    </div>

    <div class="zippy">
    <table height=249 class="loggy" cellpadding=0 border=0 cellspacing=0>
    <tr><td>
    Control Panel<BR>
    </td></tr>
    <tr><td valign=bottom>
    <u>Please Login.</u><BR>
    User Name: <BR>
    <input type="text" value="" size=10><BR>
    Password: <BR>
    <input type="password" value="" size=10><BR>
    <input type="button" value="Submit">
    </td></tr>
    </table>
    </div>

    <div class="header">
    <center>

    <img src="goodgold.jpg"></img>
    </center>
    </div>

    <div class="menu">
    <center>
    <a href="">Home</A>
    <a href="" onMouseOver="showMe('m1');" onMouseOut="hideMe('m1');">The School</A>
    <a href="" onMouseOver="showMe('m2');" onMouseOut="hideMe('m2');">The Events</A>
    <a href="" onMouseOver="showMe('m3');" onMouseOut="hideMe('m3');">The Sports</A>
    <a href="" onMouseOver="showMe('m4');" onMouseOut="hideMe('m4');">The Clubs/Activites</A>
    <a href="" onMouseOver="showMe('m5');" onMouseOut="hideMe('m5');">The Achidemics</A>

    <a href="">The Staff</A>
    <a href="">Other Resources</A>
    </center>
    </div>

    <div class="menu1" id="m1">
    School Home<BR>
    History<BR>
    Present<BR>
    Principal's Letter<BR>
    Virtual Tour<BR>
    Rules<BR>
    Contact Info
    </div>

    <div class="menu2" id="m2">
    Events Home<BR>
    Announcement History<BR>
    SWC CalanAder<BR>
    DSBN Calander<BR>
    </div>

    <div class="menu3" id="m3">
    Sports Home<BR>
    Sports....<BR>
    </div>

    <div class="menu4" id="m4">
    Clubs/Activities Home<BR>
    Clubs/Activites....<BR>
    </div>

    <div class="menu5" id="m5">
    Achidemics Home<BR>
    Achidemics....<BR>
    </div>
    </body>
    </html>

    Any Clue what could be going wrong?
    Thanks so much!
    Arthan Khwelnul

  • #2
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    You have some errors in your HTML. I would try adding a doctype.

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Besides what croatiankid has already said: Are you aware that your page is rendered in quirks mode.

    Before you continue doing anything you need to specify a document type. Put this on the first line:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up A solution is found!

    thanks guys, i figured it out i just threw in <!--[if IE]> <![EndIf]--> tags and rewrote my formatting for IE because it's screwy.
    Just incase somebody who's reading this is having the same problems, do this:

    <style>
    put your code for normal not stupid browsers here
    </style>
    <!--[if IE]>
    <style>
    put your adapted-for-ie css code here
    </style>
    <![EndIf]-->

    Thanks though!
    Arthan Khwelnul

  • #5
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    You're going to have problems with future sites if you don't use a valid doctype at the start of your page, since IE6 will start rendering as IE5.5 without one.


  •  

    Posting Permissions

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