Grow your CSS skills. Land your dream job.

CSS not displaying correctly in ie6

  • # August 14, 2008 at 6:45 am

    Hi i’m a noobie,
    I developed a site for a friend using code snippets I found online in tutorials, photoshop and dreamweaver the site displays perfectly in Firefox and ie 7 but for some people it doesn’t show in internet explorer 6 or doesn’t display correctly.
    I have found that some IE users can not access it. All they get is a solid color background. Upon further investigating you can see that all the source is there but nothing is being shown. I have not experienced this problem on any computer I tested the website on, but it is fairly common. I don’t know anybody having any problem with it using Firefox or Safari. Only SOME IE users are getting this problem. What could possibly be preventing some people to access it but not others?
    I’m so frustrated right now and wonder if i should just redesign the layout using tables.

    The URL is http://www.newprovidenceclassicalschool.org

    The site has two style sheets one named layout for the page formatting and the other named style for text formatting. I have searched numerous forums and tried everything I could find including cutting and pasting code samples and browser hacks and everything please help.

    The layout.css starts here
    /************/
    /* GLOBAL */
    /************/

    /* NON-HEADER */
    *{padding:0; margin:0;}
    body {font-size:62.5%; background-color:#AC000C; font-family:verdana,arial,sans-serif;} /*Font-size: 1.0em = 10px when browser default size is 16px*/
    .page-container {width:760px; margin:0px auto; margin-top:10px; margin-bottom:10px; font-size:1.0em;}
    .main {clear:both; width:760px; padding-bottom:10px; background:transparent url(../images/bkg.jpg) repeat-y;}
    .main-content {display:inline; /*Fix IE floating margin bug*/; float:left; width:700px; margin:0 0 0 50px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
    .footer {clear:both; width:760px; height:220px; padding:1.1em 0 0; background:#AC000C url(../images/footer.jpg) no-repeat; font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}

    /* HEADER */
    .header {width:760px; font-family:"trebuchet ms",arial,sans-serif;}
    .header-top {width:760px; height:10px; background-color:#AC000C; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
    .header-middle {width:760px; height:334px; margin:0px auto; background:#AC000C url(../images/header.jpg) no-repeat; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
    .header-bottom {width:760px; height:40px; background:rgb(255,255,255);}
    .header-breadcrumbs {clear:both; width:760px; padding:1.0em 0 1.5em 0; background:rgb(100,100,100) url(../images/bkg.jpg) repeat-y;}

    /*******************/
    /* HEADER SECTION */
    /*******************/

    .nav0 {width:350px; position:absolute; z-index:2; margin:25px 0 0 0; margin-left:550px !important /*Non-IE6*/; margin-left:553px /*IE6*/;}
    .nav0 ul {float:right; padding:0 20px 0 0;}
    .nav0 li {display:inline; list-style:none;}
    .nav0 li a {padding:0 0 0 3px;}
    .nav0 a:hover {text-decoration:none;}
    .nav0 a img {height:14px; border:none;}

    .nav1 {width:350px; position:absolute; z-index:3; margin:45px 0 0 550px;}
    .nav1 ul {float:right; padding:0 15px 0 0; font-weight:bold;}
    .nav1 li {display:inline; list-style:none;}
    .nav1 li a {display:block; float:left; padding:2px 5px 2px 5px; color:rgb(125,125,125); text-decoration:none; font-size:120%;}
    .nav1 a:hover {text-decoration:none; color:rgb(50,50,50);}

    .sitemessage {width:350px; height:120px; position:absolute; z-index:1; margin:20px 0 0 530px; color:rgb(234,239,247); /*overflow:visible !important /*Activate if Firefox print problems*/; overflow:hidden /*IE6*/;}
    .sitemessage h1 {width:350px; text-align:right; font-size:230%;}
    .sitemessage h2 {float:right; width:270px; margin:8px 0 0 0; text-align:right; line-height:100%; font-size:160%;}
    .sitemessage h3 {float:right; width:270px; margin:10px 0 0 0; text-align:right; font-size:140%;}
    .sitemessage h3 a {text-decoration:none; color:rgb(234,239,247);}
    .sitemessage h3 a:hover {text-decoration:none; color:rgb(50,50,50);}

    .nav2 {float:left; width:760px; height:67px; border:none; background:rgb(220,220,220) url(../images/menu.jpg) repeat-x; font-size:1.0em; font-size:130%; } /*Color navigation bar normal mode*/
    .nav2 ul {list-style-type:none; margin:10px 0 0 30px;}
    .nav2 ul li {float:left; position:relative; z-index:1000;}
    .nav2 ul li ul {display:none; border:none;}
    .nav2 ul li ul {margin-left:-30px; padding:0 30px 30px 30px; } /*Sticky hover zones*/
    .nav2 ul li a {float:left; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(255,255,255);}
    .nav2 ul li:hover {width:auto;}
    .nav2 table {position:absolute; z-index:999; top:0; left:0; border-collapse:collapse;}

    /*Non-IE6*/
    .nav2 ul li:hover a {text-transform:uppercase; color:rgb(0,0,0);} /*Color main cells hovering mode*/
    .nav2 ul li:hover ul {display:block; position:absolute; z-index:998; top:3.0em; margin-top:0.1em; left:0;}
    .nav2 ul li:hover ul li ul {display: none;}
    .nav2 ul li:hover ul li a {display:block; width:10em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
    .nav2 ul li:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/

    /*IE6*/
    .nav2 ul li a:hover {text-decoration:none; color:rgb(0,0,0);} /*Color main cells hovering mode*/
    .nav2 ul li a:hover ul {display:block; position:absolute;z-index: 998; top:3.1em; top:3.0em; left:0; margin-top:0.1em;}
    .nav2 ul li a:hover ul li a {display:block; width:10em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
    .nav2 ul li a:hover ul li a ul {visibility:hidden; height:0px; width:0px; position:absolute; z-index: 997;}
    .nav2 ul li a:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/

    .header-breadcrumbs ul { margin:0 0 0 40px; float:left; width:560px; list-style:none; padding:0 0 0 15px; font-family:verdana,arial,sans-serif;}
    .header-breadcrumbs ul li {display:inline; padding:0 0 0 10px; background:transparent url(../images/bg_bullet_arrow.gif) no-repeat 0 50%; font-weight:bold; color:rgb(125,125,125); font-size:100%;}
    .header-breadcrumbs ul a {color:rgb(70,122,167); text-decoration:none;}
    .header-breadcrumbs ul a:hover {color:rgb(42,90,138); text-decoration:underline;}

    .header-breadcrumbs .searchform {float:right; width:285px; padding:0 17px 0px 0px !important /*Non-IE6*/; padding:0 12px 0px 0px /*IE6*/;}
    .header-breadcrumbs .searchform form fieldset {float:right; border:none;}
    .header-breadcrumbs .searchform input.field {width:10.0em; padding:0.2em 0 0.2em 0; border:1px solid rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:120%; }
    .header-breadcrumbs .searchform input.button {width:3.0em; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:120%;}
    .header-breadcrumbs .searchform input.button:hover {cursor:pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}

    /* — For alternative headers END PASTE here — */

    /******************/
    /* MAIN SECTION */
    /******************/

    /* MAIN CONTENT */
    .column1-unit {width:680px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
    .column2-unit-left {float:left; width:335px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/; border-right:dotted #CCCCCC thin;}
    .column2-unit-right {float:right; width:345px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
    .column3-unit-left {float:left; width:253px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
    .column3-unit-middle {float:left; width:253px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/; margin-left:40px;}
    .column3-unit-right {float:right; width:253px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}

    /********************/
    /* FOOTER SECTION */
    /********************/
    .footer p {margin-top:220px; line-height:1.3em; text-align:center; color:rgb(240,240,240); font-weight:bold; font-size:110%;}
    .footer p.credits {font-weight:normal;}
    .footer a {text-decoration:underline; color:rgb(0,0,0);}
    .footer a:hover {text-decoration:none; color:rgb(255,255,255);}
    .footer a:visited {color:rgb(0,0,0);}

    /******************/
    /* CLEAR FLOATS */
    /******************/
    .page-container:after, .header:after, .header-breadcrumbs:after, .main:after, .main-content:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
    .column1-unit:after, .column2-unit-left:after, .column2-unit-right:after, .column3-unit-left:after, .column3-unit-middle:after, .column3-unit-right:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
    .footer:after, p:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
    .clear-contentunit {clear:both; width:680px; height:0.1em; border:none; background:rgb(210,210,210); color:rgb(210,210,210);}

    /********************************/
    /* PRINTING and MISCELLANEOUS */
    /********************************/
    @media print {.header-top {width:760px; height:80px; background:rgb(240,240,240); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}}
    @media print {.header-breadcrumbs {width:760px; background:transparent;}}
    @media print {.nav2 {float:left; width:760px; border:none; background:rgb(240,240,240); color:rgb(75,75,75); font-size:1.0em; font-size:130%;}} /*Color navigation bar normal mode*/
    @media print {.main {clear:both; width:760px; padding-bottom:30px; background:transparent;}}
    @media print {.footer {clear:both; width:760px; height:3.7em; padding:1.1em 0 0; background:rgb(240,240,240); font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}}
    html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} /*IE proprietary flicker hack for background images. Not validating, but OK*/

    layout.css ends here and the style.css starts here
    /******************/
    /* MAIN SECTION */
    /******************/

    /* MAIN CONTENT */
    .main-content h1.pagetitle {margin:0 1.0em 0.4em 0; padding:0 0 2px 0; border-bottom:solid 7px rgb(225,225,225); font-family:"trebuchet ms",arial,sans-serif; color:rgb(100,100,100); font-weight:bold; font-size:220%;}
    .main-content h1.block {clear:both; margin:1.0em 1.0em 0em 0; padding:2px 0 2px 2px; background:rgb(190,190,190); font-family:"trebuchet ms",arial,sans-serif; color:rgb(255,255,255); font-weight:bold; font-size:220%;}
    .main-content h1 {clear:both; margin:1.0em 0 0.5em 0; font-family:"trebuchet ms",arial,sans-serif; color:rgb(0,0,0); font-weight:normal; font-size:210%;}
    .main-content h2 {clear:both; margin:1.0em 0 0.5em 0; font-family:"trebuchet ms",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:170%;}
    .main-content h3 {clear:both; margin:-1.0em 0 0.5em 0; font-family:"trebuchet ms",arial,sans-serif; color:rgb(125,125,125); font-weight:normal; font-size:130%;}
    .main-content h1.side {clear:none;}
    .main-content h2.side {clear:none;}
    .main-content h3.side {clear:none;}

    .main-content h4 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-family:"trebuchet ms",arial,sans-serif; font-weight:normal; font-size:170%;}
    .main-content h5 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-family:"trebuchet ms",arial,sans-serif; font-size:140%;}
    .main-content h6 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-family:"trebuchet ms",verdana,arial,sans-serif; font-weight:normal; font-size:140%;}
    .main-content p {margin:0 0 1.0em 0; line-height:1.5em; font-size:120%;}
    .main-content p.center {text-align:center;}
    .main-content p.right {text-align:right;}
    .main-content p.details {clear:both; margin:-0.25em 0 1.0em 0; line-height:1.0em; font-size:110%;}
    .main-content blockquote {clear:both; margin:0 30px 0.6em 30px; font-size:90%;}

    .main-content table {clear:both; width:600px; margin:2.0em 0 0.2em 20px; table-layout: fixed; border-collapse:collapse; empty-cells:show; background:#ffffff url(../images/renee.jpg) top left repeat-x;}
    .main-content table th.top {height:3.5em; padding:0 7px 0 7px; empty-cells:show; text-align:center; color:rgb(255,255,255); font-weight:bold; font-size:110%;}
    .main-content table th {height:3.0em; padding:2px 20px 2px 7px; border-left:solid 2px rgb(255,255,255); border-right:solid 2px rgb(255,255,255); border-top:solid 2px rgb(255,255,255); border-bottom:solid 2px rgb(255,255,255); text-align:center; color:rgb(80,80,80); font-weight:bold; font-size:110%;}
    .main-content table td {height:3.0em; padding:2px 7px 2px 7px; border-left:solid 2px rgb(255,255,255); border-right:solid 2px rgb(255,255,255); border-top:solid 2px rgb(255,255,255); border-bottom:solid 2px rgb(255,255,255); text-align:center; font-weight:normal; color:rgb(80,80,80); font-size:110%;}
    p.caption {clear:both; margin:0.5em 0 2.0em 20px; text-align:left; color:rgb(80,80,80); font-size:110%;}

    .main-content ul {list-style:none; margin:0.5em 0 1.0em 1.5em;}
    .main-content ul li {margin:0 0 0.2em 2px; padding:0 0 0 12px; background:url(../images/bg_bullet_full_1.gif) no-repeat 0 0.5em; line-height:1.4em; font-size:120%;}
    .main-content ol {margin:0.5em 0 1.0em 20px !important /*Non-IE6*/; margin:0.5em 0 1.0em 25px /*IE6*/;}
    .main-content ol li {list-style-position:outside; margin:0 0 0.2em 0; line-height:1.4em; font-size:120%;}

    .column2-unit-right h1 {clear:both; margin:1.0em 0 0.5em 0; font-family:"trebuchet ms",arial,sans-serif; color:rgb(0,0,0); font-weight:normal; font-size:210%;}

    .contactform {width:418px; margin:2.0em 0 0 0; padding:10px 10px 0 10px; border:solid 1px rgb(200,200,200); background-color:rgb(240,240,240);}
    .contactform fieldset {padding:20px 0 0 0 !important /*Non-IE6*/; padding:0 /*IE6*/; margin:0 0 20px 0; border:solid 1px rgb(220,220,220);}
    .contactform fieldset legend {margin:0 0 0 5px !important /*Non-IE*/; margin:0 0 20px 5px /*IE6*/; padding:0 2px 0 2px; color:rgb(80,80,80); font-weight:bold; font-size:130%;}
    .contactform label.left {float:left; width:100px; margin:0 0 0 10px; padding:2px; font-size:110%;}
    .contactform select.combo {width:175px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
    .contactform input.field {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
    .contactform textarea {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
    .contactform input.button {float:right; width:9.0em; margin-right:20px; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;}
    .contactform input.button:hover {cursor: pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}

    .loginform {width:160px; margin:-10px 20px 0 20px;}
    .loginform p {clear:both; margin:0; padding:0;}
    .loginform fieldset {width:160px; border:none;}
    .loginform label.top {float:left; width:125px; margin:0 0 2px 0; font-size:110%;}
    .loginform label.right {float:left; width:125px; margin:5px 0 0 0; padding:0 0 0 3px; /*IE6*/; font-size:110%;}
    .loginform input.field {width:158px; margin:0 0 5px 0; padding:0.1em 0 0.2em 0 !important /*Non-IE6*/; padding:0.2em 0 0.3em 0 /*IE6*/; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
    .loginform input.checkbox {float:left; margin:5px 0 0 0 !important /*Non-IE6*/; margin:2px 0 0 -3px /*IE6*/; border:none;}
    .loginform input.button {float:left; width:5.0em; margin:10px 0 5px 0; padding:1px; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;}
    .loginform input.button:hover {cursor:pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}

    /********************/
    /* COMMON CLASSES */
    /********************/
    .main img {clear:both; float:left; margin:3px 10px 7px 0; padding:1px; border:1px solid rgb(150,150,150);}
    .main img.center {clear:both; float:none; margin:0; padding:1px; border:1px solid rgb(150,150,150);}
    .main img.right {clear:both; float:right; margin:3px 0 7px 10px; padding:1px; border:1px solid rgb(150,150,150);}

    .main a {color:rgb(70,122,167); font-weight:bold; text-decoration:none;}
    .main-content h1 a {color:rgb(70,122,167); font-weight:normal; text-decoration:none;}
    .main a:hover {color:#AC000C; text-decoration:underline;}
    .main a:visited {color:rgb(42,90,138);}

    .main a img {border:solid 1px rgb(150,150,150);}
    .main a:hover img {border:solid 1px rgb(220,220,220);}

    .red {color: #AC000C}

    the style.css ends here

    here is the source of the page

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml&quot; lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="3600" />
    <meta name="revisit-after" content="2 days" />
    <meta name="robots" content="index,follow" />
    <meta name="publisher" content="DreamWeaver" />
    <meta name="copyright" content="Copyright 2008 New Providence Clssical School" />
    <meta name="author" content="Design: C.A.N.I. / Author: C.A.N.I." />
    <meta name="distribution" content="global" />
    <meta name="description" content="New Provicence Classical School" />
    <meta name="keywords" content="New, Providence, Classical, School, Nassau, Bahamas, Christian, Education, Latin" />
    <link rel="stylesheet" type="text/css" media="screen,projection,print" href="./css/layout.css" />
    <link rel="stylesheet" type="text/css" media="screen,projection,print" href="./css/style.css" />
    <link rel="icon" type="image/x-icon" href="./images/favicon.ico" />

    <title>Welcome to New Providence Classical School</title>
    </head>
    <!– Global IE fix to avoid layout crash when single word size wider than column width –>
    <!–[if IE]><style type="text/css"> body {word-wrap: break-word;}</style><![endif]–>
    <body>
    <!– Main Page Container –>
    <div class="page-container">
    <!– For alternative headers START PASTE here –>
    <!– A. HEADER –>
    <div class="header">
    <!– A.1 HEADER TOP –>
    <div class="header-top"> </div>

    <!– A.2 HEADER MIDDLE –>
    <div class="header-middle">
    <!– Site message –>
    </div>
    <!– A.3 HEADER BOTTOM –>
    <div class="header-bottom">
    <!– Navigation Level 2 (Drop-down menus) –>
    <div class="nav2">
    <!– Navigation item –>

    <ul>
    <li><a href="http://newprovidenceclassicalschool.org/index.html">Home</a></li&gt;
    </ul>
    <!– Navigation item –>
    <ul>
    <li><a href="about.html">About Us
    <!–[if IE 7]><!–>
    </a>
    <!–<![endif]–>

    <!–[if lte IE 6]><table><tr><td><![endif]–>
    <ul>
    <li><a href="http://newprovidenceclassicalschool.org/about.html">About Us</a></li>
    <li><a href="http://newprovidenceclassicalschool.org/history.html">Our History</a></li>
    <li><a href="http://newprovidenceclassicalschool.org/faith.html">Statement of Faith</a></li>
    <li><a href="http://newprovidenceclassicalschool.org/why.html">Why Chose Us</a></li>
    <li><a href="http://newprovidenceclassicalschool.org/uniform.html">Uniform Policy</a></li>

    <li><a href="http://newprovidenceclassicalschool.org/contact.html">Contact Us</a></li>
    </ul>
    <!–[if lte IE 6]></td></tr></table></a><![endif]–>
    </li>
    </ul>
    <!– Navigation item –>
    <ul>
    <li><a href="http://newprovidenceclassicalschool.org/classical.html">Classical Education
    <!–[if IE 7]><!–>

    </a>
    <!–<![endif]–>
    <!–[if lte IE 6]><table><tr><td><![endif]–>
    <ul>
    <li><a href="http://www.gbt.org/text/intro.html">Overview</a></li&gt;
    <li><a href="http://newprovidenceclassicalschool.org/trivium.html">The Trivium</a></li>
    <li><a href="http://en.wikipedia.org/wiki/Grammar">Grammar</a></li&gt;

    <li><a href="http://en.wikipedia.org/wiki/Logic">Logic</a></li&gt;
    <li><a href="http://en.wikipedia.org/wiki/Rhetoric">Rhetoric</a></li&gt;
    </ul>
    </li>
    </ul>
    <!– Navigation item –>
    <ul>
    <li> <a href="http://newprovidenceclassicalschool.org/academics.html">Academics</a&gt; </li>

    </ul>
    <!– Navigation item –>
    <ul>
    <li><a href="/affiliates.html">Affiliates
    <!–[if IE 7]><!–>
    </a>
    <!–<![endif]–>
    <!–[if lte IE 6]><table><tr><td><![endif]–>
    <ul>

    <li><a href="http://www.accsedu.org/36680.ihtml">Classical Association</a></li>
    <li><a href="http://newprovidenceclassicalschool.org/links.html">Links</a></li&gt;
    </ul>
    <!–[if lte IE 6]></td></tr></table></a><![endif]–>
    </li>
    </ul>
    <!– Navigation item –>
    <ul>

    <li><a href="http://newprovidenceclassicalschool.org/admissions.html">Admissions</a></li&gt;
    </ul>
    <!– Navigation item –>
    <ul>
    <li><a href="http://newprovidenceclassicalschool.org/contact.html">Contact Us</a></li>
    </ul>
    </div>
    </div>

    <!– A.4 HEADER BREADCRUMBS –>
    <!– Breadcrumbs –>
    <div class="header-breadcrumbs">
    <ul>
    <li>You Are Here &nbsp;</li>
    <li>Home</li>
    </ul>
    </div>

    </div>
    <!– B. MAIN –>
    <div class="main">
    <!– B.1 MAIN CONTENT –>
    <div class="main-content">
    <!– Pagetitle –>
    <h1 class="pagetitle">A Better Approach To Education</h1>
    <!– Content unit – One column –>

    <div class="column1-unit">
    <p>New Providence Classical School is a full day school for children from K5 to 4th grade with plans to expand to 12th grade. It employs the <a href="http://en.wikipedia.org/wiki/Trivium_(education)">Trivium</a&gt;, a &quot;classical method&quot; used to shape and cultivate young minds. We teach the classical curricula used by the 210-strong Association of Classical and Christian Schools.<br />
    <br />
    Over the centuries, the classical method produced some of the world’s greatest minds and helped shape the best parts of western civilisation. However, today, common education largely ignores this long-successful, proven approach. New Providence Classical School aims to correct that—our methods equip children with the fundamental skills and tools that help them to achieve greatness in any of life’s endeavours.<br />
    <br />

    We encourage you to visit our web site links and discover our need for the classical method. Join us as we cultivate your child in realizing their full potential.<br />
    </p>
    </div>
    <hr class="clear-contentunit" />
    <br />
    <!– Content unit – Two columns –>
    <div class="column2-unit-left">
    <h1>Now Accepting Applications </h1>

    <h3>for September 2008</h3>
    <br />
    <br />
    <h1>Visit Our Open House <br />
    Monday, August 11th, 2008</h1>
    <h3>12 noon until 7p.m.</h3>
    </div>

    <div class="column2-unit-right">
    <h1>Contact Us</h1>
    <h2>New Providence Classical School</h2>
    <p>57 Jerome Avenue <br />
    P.O. Box, SS-6302 Nassau, Bahamas<br />
    Tel: (242) 394-7393/4 <span class="red">|</span> Fax: (242) 394-7292 </p>

    <p>Email: <a href="mailto:newprovidenceclassicalschool@gmail.com">info@NewProvidenceClassicalSchool.org</a></p>
    </div>
    <hr class="clear-contentunit" />
    </div>
    </div>
    <!– C. FOOTER AREA –>
    <div class="footer">
    <p>Copyright &copy; 2008 New Providence Classical School | All Rights Reserved<br />

    Original design by <a href="http://www.canisupport.com&quot; title="Designer Homepage">C.A.N.I. </a> | <a href="http://validator.w3.org/check?uri=referer&quot; title="Validate XHTML code">W3C XHTML 1.0</a> | <a href="http://jigsaw.w3.org/css-validator/&quot; title="Validate CSS code">W3C CSS 2.0</a></p>
    </div>
    </div>
    </body>
    </html>

    # August 14, 2008 at 8:17 am

    I just took a look at it using IETester, and yikes! I don’t get just a solid color in IE6, but it does completely destroy the layout, and I have to roll over the main content to get it to show. Even so, most of your navigation links are missing in IE6. It’s a shame, really, because your site actually looks pretty good in FireFox and IE7 and whatnot, but in order to cater to the largest audience you really can’t ignore IE6 users.

    Without running any tests, here’s what I’ve gathered so far from a quick look at the source code and looking at the site in IE6. The header is fine in IE6. When I get to the nav bar, I only get Home and About. About is your first rollover with the hover menu, which doesn’t display in IE6 on a mouseover. I’m willing to bet the fact that you’re trying to have the dropdown displayed in a table could have something to do with it (after all, the table elements are in a less-than-or-equal-to IE6 conditional comment, and it works on IE7). Speaking of conditional comments, I don’t see the point of the conditional comment to close out the <a> tag on a couple of your nav bar elements. I’d say that your layout will likely still work in Firefox and other non-IE browsers if you just made that </a> a part of your code. I’m not an expert, but I’d say that if you try it without the table for the rollover menus in IE6 or lower, that might fix that problem. As far as the rest of it goes, I haven’t really looked at it yet.

    Lastly, if you’d like to test out how your layout looks in different browsers and on different Operating Systems without relying on word-of-mouth, I’d suggest trying out http://www.browsershots.org. I use them all the time to check out my layouts in different settings. The problem with that is, it’s not going to check your functionality for you, just the look.

    # August 14, 2008 at 10:47 am

    Firstly, Thank you so much, I would have never thought about that. I will try that and let you know what happens. also the link you gave to browswershots is very useful.
    You stated:

    Quote:
    Speaking of conditional comments, I don’t see the point of the conditional comment to close out the <a> tag on a couple of your nav bar elements. I’d say that your layout will likely still work in Firefox and other non-IE browsers if you just made that </a> a part of your code.

    but i’m not sure what you mean by that

    # August 14, 2008 at 11:34 am

    You were right it was the menu. Now I notice that with some minor changes in ie it doesn’t show the dropdown. but the site displays perfectly

    # August 14, 2008 at 11:35 am

    You have…

    Code:

    I’m suggesting to change it to just

    Code:

    I just don’t see the point of only closing the tag in IE7 for a couple of reasons – 1, it’s not going to affect your display in Firefox or Opera or Safari or anything else if you close the tag there, and 2, it’s going to wind up causing your page not to validate, because the validator isn’t going to see the closing tag there if it’s nested within conditional comments (that’s the <!–[if IE 7]> and <!–<![endif]–> parts).

    # August 14, 2008 at 11:39 am

    Actually, I just checked, it validates, so you can ignore all that about the conditional comments. I’m not real good with the rollover menus, but http://www.dynamicdrive.com might have a script on it to help you out. Good luck!

    # August 14, 2008 at 3:07 pm

    Well I got it to look right by adjusting my code a bit I forgot a new conditional comments on the drop downs which is why the page was out of whack but I am stil unable to get the drop downs to display in ie 6. I’m wondering whether or not I should hard code the links as static links on the pages.

    I now need to figure out how to make the drop downs work.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".