I'm having this exact same problem, on any version of IE, and any OS. My page is here:
http://www.ccghospital.com/Hospital/MissionStatement.htmlHere is my CSS
CODE
body{
margin: 0; padding: 0; border: 0; overflow: hidden; height: 100%; max-height: 100%;
font: normal 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
background: #CCFFCC;
}
#framecontentTop{
position: absolute;
top: 0;
left: 0;
right:0;
height: 172px;
overflow: hidden;
background-color: #CCFFCC;
color: black;
}
#framecontentBottom{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 44px;
overflow: hidden;
background-color: #CCFFCC;
color: black;
}
#framecontentLeft{
position: absolute;
top: 172px;
left: 0;
width: 220px;
bottom: 44;
overflow: auto;
background-color: #CCFFCC;
color: black;
}
#maincontent{
position: fixed;
top: 172px; /*Set top value to HeightOfTopFrameDiv*/
left: 220;
right: 0;
bottom: 44px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background-color: #E7FFE7;
}
#leftmaincontent{
position: fixed;
top: 172px; /*Set top value to HeightOfTopFrameDiv*/
left: 220;
width: 220;
bottom: 44px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background-color: #E7FFE7;
}
#rightmaincontent{
position: fixed;
top: 172px; /*Set top value to HeightOfTopFrameDiv*/
left: 440;
right: 0;
bottom: 44px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background-color: #E7FFE7;
}
.Sig{
position: absolute;
top: 5px;
right: 5px;
font: normal 12px Arial;
}
.CR{
position: absolute;
bottom: 5px;
right: 5px;
font: normal 12px Arial;
}
.PP{
position: absolute;
top: 5px;
left: 5px;
font: normal 12px Arial;
}
.PRR{
position: absolute;
bottom: 5px;
left: 5px;
font: normal 12px Arial;
}
#linksTop {
position: absolute;
bottom: 0px;
left: 220px;
width: 802px;
height: 25px;
font: bold 16px Arial;
z-index: 2;
}
#linksTop ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
}
#linksTop ul li{
display: inline;
}
#linksTop ul li a {
float: left;
text-align: center;
text-decoration: none;
padding: 3px 15px;
color: #CCFFCC;
}
#linksTop ul li a:hover, #linksTop ul li .current{
color: #CCFFCC !important;
background: url(images/hBar4.jpg);
background-size: 1px 25px;
background-repeat: repeat-x;
padding-top: 4px;
}
#linksTop ul li a img {
height: 0;
width: 0;
border-width: 0;
}
#linksTop ul li a:hover img, #linksTop ul li .current img{
position: absolute;
top: -147px;
left: 0px;
height: 147px;
width: 802px;
}
#linksTop ul li a:hover img{
z-index: 100;
}
#linksTop ul li .current img{
z-index: 1;
}
#Logo img{
position: absolute;
top: 1px;
left: 1px;
height: 170px;
width: 213px;
border-wideth: 0;
z-index: 100;
}
#lBar img {
position: absolute;
bottom: 0px;
left: 0px;
height: 25px;
width: 100%;
}
#tBar img {
position: absolute;
top: 0px;
left: 0px;
height: 1px;
width: 100%;
border-width: 0;
z-index: 1;
}
#rBar img {
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 1px;
border-width: 0;
z-index: 1;
}
ul.linksSide{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: auto;
background: #CCFFCC; /* background of menu */
margin: 0;
padding: 0;
padding-top: 0px; /* top padding */
padding-bottom: 7px;
list-style-type: none;
}
ul.linksSide li{
text-align: right; /* right align menu links */
}
ul.linksSide li a{
position: relative;
display: inline-block;
text-indent: 30px;
overflow: hidden;
background: url(images/vBar1.jpg);
background-size: 100% 1px;
background-repeat: repeat-y;
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
margin-top: 7px; /* spacing between links */
color: #BBFFBB;
-moz-box-shadow: inset -7px 0 0px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
-webkit-box-shadow: inset -7px 0 0px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 0px rgba(114,114,114, 0.8);
-moz-transition: all 0.3s ease-in-out; /* CSS3 transition of hover properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
ul.linksSide li a:hover, ul.linksSide li .current{
padding-right: 30px; /* add right padding to expand link horizontally to the left */
-moz-box-shadow: inset -0px 0 0px rgba(114,114,114, 0.8); /* contract inner right shadow */
-webkit-box-shadow: inset -0x 0 0px rgba(114,114,114, 0.8);
box-shadow: inset -0px 0 0px rgba(114,114,114, 0.8);
}
ul.linksSub{
position: relative;
overflow: auto;
margin: 0;
padding: 10;
padding-top: 0px; /* top padding */
padding-bottom: 0px;
list-style-type: none;
}
ul.linksSub li{
text-align: center; /* right align menu links */
font: bold 16px Germand;
}
ul.linksSub li a{
position: relative;
display: block;
overflow: hidden;
background: #CCFFCC;
font: normal 14px Germand;
text-decoration: none;
padding: 2px;
margin-top: 2px; /* spacing between links */
color: #003300;
}
ul.linksSub li a:hover, ul.linksSub li .current{
background: #003300;
color: #CCFFCC;
}
And my HTML
CODE
<!--Force IE6 into quirks mode with this comment tag-->
<head>
<title>CCGH</title>
<link rel="stylesheet" type="text/css" href="../CCGH.css" />
</head>
<body>
<div id="framecontentTop">
<div id="linksTop">
<ul>
<li><a href="../Hospital/MissionStatement.html" class="current">Coal County General Hospital<img src="../images/hospital.jpg" width="802" height="147" border="0"></a></li>
<li><a href="../Manor/MissionStatement.html">Ruth Hurley Manor<img src="../images/manor.jpg" width="802" height="147" border="0"></a></li>
<li><a href="../HHH/MissionStatement.html">TenderCare Home Health & Hospice<img src="../images/tendercare.jpg" width="802" height="147" border="0"></a></li>
</ul>
</div>
<div id="lBAR"><img src="../images/hbar3.jpg"></div>
<div id="Logo"><img src="../images/Logo7smt.gif"></div>
</div>
<div id="framecontentLeft">
<div id="rBAR"><img src="../images/bar.gif"></div>
<ul class="linksSide">
<li><a href="MissionStatement.html" class="current">Mission Statement </a></li>
<li><a href="About.html">About Us </a></li>
<li><a href="EmpDir.html">Employee Directory </a></li>
<li><a href="MedServ.html">Medical Services </a></li>
<li><a href="ComProg.html">Community Programs </a></li>
<li><a href="News.html">News </a></li>
<li><a href="CarOp.html">Career Opportunities </a></li>
<li><a href="Contact.html">Contact Us </a></li>
</ul>
</div>
<div id="maincontent">
<table border=0 width=100% height=100%>
<tr>
<td>
<center>
<h1>This area will contain the Hospital's Mission Statement</h1>
</center>
</td>
</tr>
</table>
</div>
<div id="framecontentBottom">
<div id="tBAR"><img src="../images/bar.gif"></div>
<div class="Sig">
Web site created by Matt Balliett: <a href="mailto:smballiett@gmail.com">smballiett@gmail.com</a>
</div>
<div class="CR">
Code for CSS frames and buttons found <a href="http://www.dynamicdrive.com/style/">here</a>
Copyright 2006 <a href="http://www.dynamicdrive.com">Dynamic Drive</a>
Read <a href="http://www.dynamicdrive.com/style/csslibrary/tos/">Usage Terms here</a>
</div>
<div class="PP">
<a href="PP.html">Privacy Policy</a>
</div>
<div class="PRR">
<a href="PRR.html">Patient Rights and Responsibilities</a>
</div>
</div>
</body>
</html>
I'm fairly new to web development, but I'm learning. Unfortunately, I don't know what it is I'm missing.