Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

What does IE Compatibility Mode change?

Posted on 2010-01-11
3
Medium Priority
?
1,075 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
  • 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

564 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