asked on

What does IE Compatibility Mode change?

I am working on some very simple CSS/HTML, but I am having some trouble understanding whats going on.

Take a look at this page, the coloring is for testing only.

http://gihelpdesk.com/tut/gihd/tutorials.php

The red and blue div's should be (are) nested in the tbody div. I should be able to float one left and one right and they should be horizontally aligned and pushed to either side of the tbody div.

This ONLY works in IE with Compatibility Mode enabled. I could absolutely position the divs in the tbody div, but I really want to know why the float is not working and what IE is changing to make it work.

Thanks

<div class="tbody">
	<h1>What can we help you with?</h1>
			<div class="lcol"><h1>TUT PICS</h1></div>
			<div class="rcol"> <h1>Tutorial description with link</h1></div>

Open in new window

CityofGI

ASKER

Here is my full CSS

/*******************Index*******************/
div.ibody {
	position: relative;
	margin: 0px auto 0px auto;
	width: 800px;
	height: auto;
	background-color: #FFFFFF;
	border: 1px #ABADB3 solid;
}
h1 {
	color: #FE7700;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	padding: 0px 0px 0px 20px;
}
p {
	padding: 10px 50px 10px 30px;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
}

/*******************Header*******************/
div.header {
	position: relative;
	width: 800px;
	height: 64px;
	margin: 0px auto 0px auto;
	padding: 0;
	background-image: url('../images/logo.jpg');
	background-position: center;
	background-repeat: no-repeat;
}
div.navbar {
	position: relative;
	width: 800px;
	height: 24px;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
	background-color: #FFFFFF;
	border: 1px #ABADB3 solid;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
}
    #nav {
      clear:both;
      margin:0;
      padding:0 40px 0 0;
      height:24px;
      border-bottom:1px solid;
}
	#nav li {
      list-style:none;
      margin:0;
      padding:0;
      display:inline;	
}

#nav li a {
      height:24px;
      line-height:24px;
      display:block;
      float:left;
      padding-left:25px;
      margin:0 10px 0 10px;
      text-decoration:none;
      font-weight:bold;
      float:right;
    }

a {
	color: #006699;
	text-decoration: none;
}
a:hover {
	color: #DB8606;
	text-decoration: none;
}
	#nav a.home { background:url('../images/home.gif') 0 5px no-repeat; }
    #nav a.new_ticket { background:url('../images/new_ticket.gif') 0 5px no-repeat; }
    #nav a.how { background:url('../images/howdoi.png') 0 5px no-repeat; }

body {
	padding: 0;
	margin: 5px 0px 0px 0px;
	background-color: #E9DFC4;
	font-family:arial, helvetica, sans-serif;
  	font-size:9pt;
}
/*******************Tutorials*******************/
div.tbody {
	position: relative;
	margin: 0px auto 0px auto;
	width: 800px;
	height: 90%;
	background-color: #FFFFFF;
	border: 1px #ABADB3 solid;
	clear: none;
}
div.lcol {
	position: relative;
	width: 350px;
	height: 400px;
	border: 1px #ABADB3 solid;
	background-color: blue;
	float: left;
}
div.rcol {
	position: relative;
	width: 350px;
	height: 400px;
	border: 1px #ABADB3 solid;
	background-color: red;
	float: right;
}
/*******************Footer*******************/
div.footer {
	position: relative;
	width: 800px;
	height: 20px;
	background-color: #FFFFFF;
	margin: 0px auto 0px auto;
	border: 1px #abada3 solid;
	text-align: center;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	padding: 5px 0px 0px 0px;
}

Open in new window

ASKER CERTIFIED SOLUTION

CityofGI

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tony O'Byrne

Floated content has no height and things were probably getting confused as a result. google the CSS hasLayout fix for more info.