3 Replies Latest reply: Jul 20, 2012 2:45 PM by Nancy O. RSS

    page not rendering correctly in IE6-8

    noviceconnie

      I'm learning DW on my own for a small sports website...the page renders correctly in Browser Lab with all browsers except IE 6-8.  I have two issues:

       

      1.  I don't know how to correct the white space link list bug.

      2.  The two sidebars do not show up in IE 6-8

       

      Here is the code and any help is greatly appreciated.

       

      body {

                font: 100%/1.4 Verdana, Geneva, sans-serif;

                margin: 0;

                padding: 0;

                color: #000;

                background-color: rgba(147,165,196,.8);

                background-image: none;

      }

       

       

      ul, ol, dl {

                padding: 0;

                margin: 0;

                font-size: 24px;

                font-weight: bold;

      }

      h1, h2, h3, h4, h5, h6, p {

                margin-top: 0;

                padding-right: 15px;

                padding-left: 15px;

                color: #000066;

                font-size: 12pt;

                margin-left: 5px;

      }

      a img {

                border: none;

                padding: 10px;

      }

       

       

      a:link {

                color:#003366;

                text-decoration: underline;

      }

      a:visited {

                color: #003366;

                text-decoration: underline;

      }

      a:hover, a:active, a:focus {

                text-decoration: none;

                background-color: #003366;

      }

       

       

      .container {

                max-width: 1000px;

                min-width: 1000px;

                background: #FFF;

                margin: 0 auto;

                border: thick solid #FFFFFF;

      }

       

       

      .header {

                background-color: #FFFFFF;

                background-image: none;

                border: thick double #000066;

                float: left;

                margin-bottom: 5px;

      }

       

       

      .sidebar1 {

                float: left;

                width: 20%;

                background-color: rgba(204,204,204,0.8);

                color: #FFFFFF;

                border-radius: 10px;

                padding: 5px;

       

      }

      .content {

                padding: 10px 0;

                width: 58%;

                float: left;

      }

      .sidebar2 {

                float: right;

                width: 19%;

                color: #FFFFFF;

                background-color: rgba(0,51,102,.8);

                padding-top: 10px;

                padding-bottom: 10px;

                padding-left: 0;

                border-radius: 10px;

                border: medium double #F4F4F4;

      }

       

       

      .content ul, .content ol {

                padding: 0 15px 15px 40px;

      }

       

       

      ul.nav {

                list-style: none;

                margin-bottom: 15px;

                border-radius: 10px;

       

      }

      ul.nav li {

                border-radius: 10px;

                margin-bottom: 5px;

                background-color:  rgba(0,51,102,.7);

                border-top-style: none;

                border-right-style: none;

                border-bottom-style: none;

                border-left-style: none;

                border-top-color: rgb(204,204,204);

                border-right-color: rgb(204,204,204);

                border-bottom-color: rgb(204,204,204);

                border-left-color: rgb(204,204,204)

       

      }

      ul.nav a, ul.nav a:visited {

                display: block;

                text-decoration: none;

                color: #FFFFFF;

                font-weight: bold;

                font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

                font-size: 20px;

                font-style: normal;

                padding-top: 15px;

                padding-right: 5px;

                padding-left: 10px;

                border-radius: 10px;

      }

      ul.nav a:hover, ul.nav a:active, ul.nav a:focus {

                color: #FFF;

                background-color: rgba(147,165,196,.8);

                border-radius: 10px;

                padding-top: 15px;

                padding-bottom:  15px;

      }

       

       

      .footer {

                padding: 10px 0;

                background: rgba(147,165,196,.8);

                position: relative;

                clear: both;

       

      }

       

       

      h1,h2,h3,h4,h5,h6 {

                font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

                font-style: italic;

                color: #0066;

                text-align: center;

      }

      h1 {

                font-size: 20px;

                color: #000066;

                text-align: center

       

      }

      h2 {

                color: #FFF;

                font-size: 20pt;

                font-style: italic;

      }

       

       

      h3 {

                font-size: 18px;

                text-align: center;

                color: #000066;

                font-style: normal;

       

       

      }

      h4 {

                color: #FFF;

                font-size: 18pt;

                font-style: normal;

       

       

      }

       

       

      h5 {

                font-size: 16pt;

                color: #006;

                font-style: normal;

       

      }

       

       

      h6 {

                font-size: 14pt;

                color: #FFF;

                font-style: normal;

       

      }

      -->

      </style><!--[if lte IE 7]>

      <style>

      .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */

      ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */

      </style>

      <![endif]-->

       

       

      </head>

       

       

      <body>

       

       

      <div class="container">

        <div class="header"><!-- end .header --><img src="images/CSN-with-Brent-Beaird-lg.gif" width="990" height="140" alt="CSN logo" /></div>

        <div class="sidebar1">

          <ul class="nav">

            <li><a href="index.html">Home</a><a href="#"></a></li>

            <li><a href="brentsnotebook.html">Brent's Notebook</a><a href="#"></a></li>

            <li><a href="Storylines.html">Storylines</a><a href="#"></a></li>

            <li><a href="In_My_Opinion.html">In My Opinion</a><a href="#"></a></li>

            <li><a href="sportsradio.html">Sports Radio</a><a href="#"></a></li>

            <li><a href="press_box.html">Press Box</a><a href="#"></a></li>

            <li><a href="Inside the SEC.html">Inside the SEC </a><a href="#"></a></li>

            <li><a href="Inside the ACC.html">Inside the ACC</a><a href="#"></a></li>

            <li><a href="../About.html">About CSN</a><a href="#"></a></li>

          </ul>

        </div>