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; }

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