page not rendering correctly in IE6-8
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>
