2 Replies Latest reply on Jun 4, 2010 10:34 AM by 69Pisces

    Page not rendering in IE6

    69Pisces

      I just updated my site and I discovered that the page is not rendering in IE6 (and IE5.5, but I suppose no one uses that anymore).

      All I can see is the red background color.

       

      The link to the site is www.schudden.net.

       

      Can anybody tell me why the page is not visible in IE6?

        • 1. Re: Page not rendering in IE6
          Zabeth69 Level 5

          Sure is Red.

           

          Looks fine in all the other browsers I checked in.

           

          What kind of images are you using? IE6 doesn't handle transparency in pngs very well (or at all).

           

          I see that your site is constructed in Frames, so I am unable to get to the code. Sorry about that.

           

          Before you updated, was the site totally visible in IE6? What did you change?

           

          Beth

          • 2. Re: Page not rendering in IE6
            69Pisces Level 1

            I use a transparant png for the footer.

             

            I did not use any frames to construct my site, made this from a one column, fixed header and footer template in dreamweaver.

            The previous site was visible in IE 6.

             

            I actually made a whole new layout, but he content stayed the same.

             

            When I validate in dreamweaver it gives me two errors in the css file:

             

            Unsupported property: _position

            Affects: Firefox 1.5, 2.0, 3.0; Internet Explorer 6.0, 7.0, 8.0b1; Internet Explorer for Macintosh 5.2; Netscape 8.0; Opera 8.0, 9.0; Safari 2.0, 3.0

            Unsupported value: 'fixed'

            Affects: Internet Explorer 6.0, 7.0, 8.0b1; Internet Explorer for Macintosh 5.2

             

            Perhaps this is causing the error, but I don't know how to resolve this.

            There was also an error about the min-height I used. I deleted that option, but it did'n't help.

             

            This is the source code:

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <!-- TemplateBeginEditable name="doctitle" -->
            <title>Schudden fansite</title>
            <!-- TemplateEndEditable -->
            <!-- TemplateBeginEditable name="head" -->
            <!-- TemplateEndEditable -->
            <link href="../css/Noorderzon.css" rel="stylesheet" type="text/css" />
            <!--[if gte IE 5.5]>
            <![if lt IE 7]>
            <style type="text/css">
            div#Sticky {
            /* IE5.5+/Win - this is more specific than the IE 5.0 version */
            right: auto; bottom: auto;
            left: expression( ( 0 - Sticky.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
            top: expression( ( 0 - Sticky.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
            }
            <![endif]>
            <![endif]-->


            </head>

            <body class="oneColElsCtrHdr">

            <div id="container">
            <div id="header">
            <h1> </h1>
            <!-- end #header --></div>
            <div id="mainContent">
            <div id="nav"><a href="index.html" title="Home">Home</a> | <a href="nieuws.html" title="Nieuws">Nieuws</a> | <a href="../schudden.html" title="Schudden">Schudden</a> | <a href="../speellijst.html" title="Speellijst">Speellijst</a> | <a href="../media.html" title="Media">Media</a> | <a href="../links.html" title="Links">Links</a> | <a href="http://www.tboek.nl/tboek/index.php?name=schudden" title="Gastenboek" target="_blank">Gastenboek</a> | <a href="mailto:info.schudden.net@home.nl" title="Contact">Contact</a> | <a href="../nieuwsbrief.html" title="Nieuwsbrief">Nieuwsbrief</a></div>
            <!-- TemplateBeginEditable name="Contenttext" -->Contenttext<!-- TemplateEndEditable --></div>
              <div id="footer">
                <p> </p>
              <!-- end #footer --></div>
            <!-- end #container --></div>
            </body>
            </html>

            And this is the CSS code:

            @charset "utf-8";
            html, body {
            height: 100%;
            }

            body {
            padding: 0;
            text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
            color: #333;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 9pt;
            background-color: #800000;
            margin-top: 0;
            margin-right: auto;
            margin-bottom: 0;
            margin-left: auto;
            height: 100%;
            }

            body,td,th {
            font-size: 9pt;
            color: #333;
            text-align: center;
            }
            /* Tips for Elastic layouts
            1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
            2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
            3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
            */
            #container  {
            text-align: center; /* this overrides the text-align: center on the body element. */
            margin-top: 0;
            margin-right: auto;
            margin-bottom: 0;
            margin-left: auto;
            background-color: #800000;
            top: 0px;
            bottom: 0px;
            padding: 0px;
            width: 100%;
            }
            #header  {
            width: 960px;
            padding-top: 0;
            padding-bottom: 0;
            height: 160px;
            margin-right: auto;
            margin-left: auto;
            background-color: #DDDDDD;
            background-image: url(../images/header.jpg);
            }
            #header h1  {
            margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
            padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
            }
            #mainContent  {
            width: 960px;
            margin-right: auto;
            margin-left: auto;
            padding-top: 0;
            padding-right: 0px;
            padding-bottom: 0;
            padding-left: 0px;
            background-image: url(../images/mainbg.jpg);
            line-height: 15pt;


            }
            .titlelink {
            font-size: 16px;
            font-weight: 500;
            font-variant: small-caps;
            color: #800000;
            }
            .alignleft {
            text-align: left;
            }


            #nav {
            text-align:center;
            margin-top:0px;
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:10pt;
            color:#000;
            font-weight:700;
            padding-top:9px;
            padding-bottom:10px;
            text-decoration:none;
            background-image: url(../images/mainbg.jpg);
            background-repeat: repeat;
            width: 960px;
            }

            #nav a {
            background:#fff;
            color:#000;
            text-decoration:none;
            }

            #nav a:active {
            background:#fff;
            }

            #nav a:hover {
            background:#fff;
            color:#000;
            font-size:10pt;
            padding-bottom:2px;
            border-bottom-width: 3px;
            border-bottom-style: dotted;
            border-bottom-color: #800000;
            }
            a:link {
            color: #000;
            }
            a:hover {
            color: #000;
            }
            a:active {
            color: #369;
            }


            a:visited {
            font-style: normal;
            color: #369;
            }
            #footer  {
            color:#FFF;
            border: 0px solid orange;
            position:fixed;
            /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
            _position: absolute;
            right: 0px;
            bottom: 0px;
            width: 100%;
            background-image: url(../images/bottom.png);
            height: 100px;
            padding-top: 0;
            padding-right: 10px;
            padding-bottom: 0;
            padding-left: 10px;
            }

            .subtext {
            font-size: 8pt;
            color: #800000;
            }
            .tableheader {
            font-weight: 700;
            color: #FFF;
            line-height: 30px;
            text-transform: uppercase;
            background-image: url(../images/tableheader.jpg);
            padding-left: 10px;
            }
            table tr .tableheader {
            text-align: left;
            padding-left: 10px;
            }
            .tablecontent {
            padding-left: 10px;
            text-align: left;
            }
            .center {
            text-align: center;
            }
            .justify {
            text-align: justify;
            }
            .linkheader {
            background-image: url(../images/linkheader3.jpg);
            line-height: 30px;
            font-weight: 700;
            text-transform: uppercase;
            color: #fff;
            }
            #subnav {
            text-align:center;
            margin-top:0px;
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:10pt;
            color:#000;
            font-weight:700;
            padding-top:9px;
            padding-bottom:10px;
            text-decoration:none;
            background-image: url(../images/mainbg.jpg);
            background-repeat: repeat;
            width: 960px;
            }

            I hope this helps

             

            @pziecina : the validation errors are weird, because I have a doctype in my documents.

            Could this be caused by the fact that I have domainname linked to an external site (I use the free space I got from my provider, and the domainname link is forwarded to this space). Because, when I validate the original index.html file (http://members.home.nl/justme4u/index.html) it only gives me two errors.