CSS works on Chrome, Firefox and Safari but not in IE Options

[oddcarout]

Here is my CSS can anyone find where I maybe typed something wrong, please. It works for everything but IE.

Thanks

CODE

body { background: url('http://www..png') repeat-x;}
#header { width: 825px; min-height: 30px; margin: 0 auto; }
#navigation { width: 825px; height: 37px; margin: 0 auto; position: relative; top: 0px; background: #7D8768;}
#navigation ul { margin: 0; padding: 0; list-style-type: none; }
#navigation ul li { display: inline; margin-right: 0; }
#navigation ul li a { color: #213D30; background: #7D8768; text-decoration: none; margin: 0 auto; padding: 10px 10px 6px 10px; position: relative; top: 12px; text-transform: uppercase; font-weight: bold; font-size: 16px; }
#navigation ul li.current_page_item a, #navigation ul li a:hover { color: #E6C583; }
#container { overflow: auto; width: 900px; margin: 0 auto; padding: 10px; }
#container h1 {color: #8AA37B; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
#content { width: 600px; min-height: 401px; margin: 0 auto; overflow: auto; background: url('http://www..png'); position: relative; top: 5px;}
#rooms {width: 900px; overflow: auto; background: url('http://www..png')}
#homepic { width: 600px; min-height: 401px; margin: 0 auto; overflow: auto; background: url('http://www..png'); position: relative; top: 5px;}
#contact { width: 800px; overflow: auto; color: #330000;}
#map { width: 800px; height: 600px;}
#photo { width: 600px; overflow: auto;}
#contentleft { width: 450px; float: left; margin-right: 20px; padding: 20px; }
#contentleft h1 {color: #8AA37B; }
#sidebar { width: 250px; float: left; padding: 20px; }
.sidebar-element { overflow: auto; margin-top: 15px; }
#sidebar h3 {color: #8AA37B;  padding: 7px 10px; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}
#footer {width: 800px; margin: 0 auto; text-align: center; }
#footer ul {margin: 0 auto; padding: 0; list-style-type: none; }
#footer ul li {display: inline; margin-right: 5px; }
#footer ul li a {color: #FF7777; text-transform: uppercase; text-decoration: none; }
#footer ul li a:hover { text-decoration: underline; }
#bedandbreakfast {width: 800px; margin: 0 auto; padding: 0; }
#bedandbreakfast a { margin: 0 25px 0 25px; }

#roomsidebar { width: 800px; overflow: auto;  }
#containerleft { width: 250px; float: left; }
#sidebar-rooms { width: 800px; overflow: auto; }
#roomsidebar h3 {}
.hidden, .alt { display: none; }

#powers { width: 900px; }
#besty { width: 900px; }
#humpries {width: 900px; }
#vance { width: 900px; }

[Christian J]

Which IE version? What doesn't work? Where's the HTML?

In the meantime, see http://www.positioniseverything.net/articles/mys-bug.html

[Steball]

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.html

Here 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.

This post has been edited by Steball: May 3 2012, 12:15 PM

[Darin McGrew]

<!--Force IE6 into quirks mode with this comment tag-->

Is there a particular reason you want MSIE in quirks mode? A lot of modern CSS doesn't work in MSIE when it is in quirks mode.

See also:
http://hsivonen.iki.fi/doctype/

[Steball]

<!--Force IE6 into quirks mode with this comment tag-->

Is there a particular reason you want MSIE in quirks mode? A lot of modern CSS doesn't work in MSIE when it is in quirks mode.

See also:
http://hsivonen.iki.fi/doctype/

Well like I mention earlier, I'm still learning. When I was trying to figure out how to do frames in CSS, I came across this page. I could not figure out it's purpose, but all of the examples I found had it in there. I tried taking it out, but it made no difference. I'll check out the link you posted and see if I can't find my answer there. Thanks!

This post has been edited by Steball: May 3 2012, 01:11 PM

[pandy]

That page is pretty hard do understand. You don't need to read all of it, but save the link for later. All you need to know is that doctypes matter. If you use the one I suggested your pages will trigger Standards Mode. It doesn't necessarily help for the problem at hand, but you will avoid other problems in the future.