Skip navigation
Currently Being Moderated

page not rendering correctly in IE6-8

Jul 20, 2012 12:41 PM

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>

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points