The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> CSS works on Chrome, Firefox and Safari but not in IE
oddcarout
post May 2 2012, 04:43 PM
Post #1


Member
***

Group: Members
Posts: 60
Joined: 21-November 06
Member No.: 1,017



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; }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 2 2012, 05:08 PM
Post #2


.
********

Group: WDG Moderators
Posts: 6,172
Joined: 10-August 06
Member No.: 7



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

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


--------------------
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Steball
post May 3 2012, 12:14 PM
Post #3





Group: Members
Posts: 2
Joined: 3-May 12
Member No.: 17,042



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post May 3 2012, 12:37 PM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,021
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE
<!--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/


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Steball
post May 3 2012, 01:10 PM
Post #5





Group: Members
Posts: 2
Joined: 3-May 12
Member No.: 17,042



QUOTE(Darin McGrew @ May 3 2012, 12:37 PM) *

QUOTE
<!--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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 3 2012, 02:11 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,571
Joined: 9-August 06
Member No.: 6



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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 31st October 2014 - 10:41 AM