?
Solved

What does IE Compatibility Mode change?

Posted on 2010-01-11
3
Medium Priority
?
1,073 Views
Last Modified: 2013-11-19
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

0
Comment
Question by:CityofGI
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 1

Author Comment

by:CityofGI
ID: 26286898
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

0
 
LVL 1

Accepted Solution

by:
CityofGI earned 0 total points
ID: 26287052
Ok so I changed the height from 90% to a set size - 600px and it fixes the problem.  Why is that?  Why wouldn't a percentage or "auto" work as the height value of the parent div?
0
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26287355
Floated content has no height and things were probably getting confused as a result.  google the CSS hasLayout fix for more info.
0

Featured Post

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question