I _want_ these div's to overlap, but IE won't do it...

**lerxstrulz** · 03-22-2010 07:06 PM

Hi All,

Been wracking my brain and searching everywhere for help but just can't get this figured out. OF COURSE this works perfect in non-IE browsers, but IE just won't display it right.

I'm trying to build a calendar app where blocks of time are shown (using divs)...think like the Outlook calendar. In non-IE, the appointment div overlaps the hours div's just fine (for ex if the appt is 8-9am the div overlaps the 8 to 9 hours) but in IE it keeps expanding the parent div to whatever the height of the appointment div is.

I have a main div, then two floated divs and within the second div am trying to add the appointment div. Here is the code:

Code:

<style>
/* This is the main wrapper div */
.cal_hour {
 height: 18; 
 width: 100%; 
 z-index: 0;
}
/* this div displays the hour */
.cal_left_hour {
  height: 100%; 
  width: 18%; 
  float: left; 
  font-size: 14px; 
  font-weight: bold; 
  border: 1px solid #e2e2e2; 
  padding: 0 5 0 5; 
  text-align: right;
  z-index: 0;
}
/* This div holds the appointment(s) */
.cal_right_hour {
  height: 100%; 
  width: 78%; 
  float: right; 
  border: 1px solid #e2e2e2; 
  padding: 0 5 0 5;
  z-index: 0;
}
</style>

<div style="width: 80%;">

<div class="cal_hour">
 <div class="cal_left_hour">8:00</div>
 <div class="cal_right_hour">
  <div style="background-color: red; color: white; position: relative; width: 100; height: 100; left: 1; top: 1;">This is some text</div>
 </div>
</div>
<div class="cal_hour">
 <div class="cal_left_hour">8:15</div>
 <div class="cal_right_hour"><br></div>
</div>
<div class="cal_hour">
 <div class="cal_left_hour">8:30</div>
 <div class="cal_right_hour"><br></div>
</div>
<div class="cal_hour">
 <div class="cal_left_hour">8:45</div>
 <div class="cal_right_hour"><br></div>
</div>

</div>

Any help or pointers would be MUCH appreciated. Thank you!

**tirna** · 03-22-2010 07:46 PM

I think part of the problem was using px as the unit for font-size in .cal_left_hour

I normally use either pt or em.

I added a body selector in the css to set the page's font-size and in IE8 anf FF3.6 the page now looks ok to me.

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
 
body {
font-size: 1em }
 
/* This is the main wrapper div */
.cal_hour {
 height: 18; 
 width: 100&#37;; 
 z-index: 0;
}
/* this div displays the hour */
.cal_left_hour {
  height: 100%; 
  width: 18%; 
  float: left; 
  /*font-size: 14px; */ 
  font-weight: bold; 
  border: 1px solid #e2e2e2; 
  padding: 0 5 0 5; 
  text-align: right;
  z-index: 0;
}
/* This div holds the appointment(s) */
.cal_right_hour {
  height: 100%; 
  width: 78%; 
  float: right; 
  border: 1px solid #e2e2e2; 
  padding: 0 5 0 5;
  z-index: 0;
}
</style>
</head>
<body>
<div style="width: 80%;">
<div class="cal_hour">
 <div class="cal_left_hour">8:00</div>
 <div class="cal_right_hour">
  <div style="background-color: red; color: white; position: relative; width: 100; height: 100; left: 1; top: 1;">This is some text</div>
 </div>
</div>
<div class="cal_hour">
 <div class="cal_left_hour">8:15</div>
 <div class="cal_right_hour"><br></div>
</div>
<div class="cal_hour">
 <div class="cal_left_hour">8:30</div>
 <div class="cal_right_hour"><br></div>
</div>
<div class="cal_hour">
 <div class="cal_left_hour">8:45</div>
 <div class="cal_right_hour"><br></div>
</div>
</div>
</body>
</html>

**tracknut** · 03-22-2010 08:04 PM

I haven't tested that code at all, but you're missing units on several places where you list padding, width, height, left, top, etc. IE doesn't tend to like invalid code.

Dave

**tirna** · 03-22-2010 08:20 PM

I normally use units so that the css will pass the validator, but I think most if not all browsers will assume units of px unless otherwise stated.

But I agree, why give the browser the chance to guess wrong

- specify units and you eliminate one possible source of problems.

**criterion9** · 03-22-2010 08:46 PM

but in IE it keeps expanding the parent div to whatever the height of the appointment div is

The overflow property should help you out there. IE likes to expand the container to accommodate (even with static heights) for everything unless it is set to overflow:hidden or manually made to scroll using overflow:scroll or overflow:auto.

See the W3C page.

**lerxstrulz** · 03-22-2010 11:17 PM

Originally Posted by tirna

I think part of the problem was using px as the unit for font-size in .cal_left_hour

I normally use either pt or em.

I added a body selector in the css to set the page's font-size and in IE8 anf FF3.6 the page now looks ok to me.

Thanks for the reply. I cut and pasted the code with fixes but now in both IE 8 and FF 3.6 the 8 o'clock hour is just filled in red instead of the div extending down past the 8:45 hour.

SO.....

I went back and placed units next to all sizes, heights and widths and voila! Just for grins I played around with it some more and found that the doctype declaration couple with the specified measurement units did the trick.

Thanks so much for your help! I'm just finishing up my CSS for Dummies book

I'll be sure to include units next to everything from now on!

**lerxstrulz** · 03-22-2010 11:18 PM

Originally Posted by tracknut

I haven't tested that code at all, but you're missing units on several places where you list padding, width, height, left, top, etc. IE doesn't tend to like invalid code.
Dave

Yes you are right that was part of the problem. I will stop being lazy with my CSS...

Thread: I _want_ these div's to overlap, but IE won't do it...

Thread Tools

Display

I _want_ these div's to overlap, but IE won't do it...

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions