www.webdeveloper.com
Results 1 to 7 of 7

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

  1. #1
    Join Date
    Mar 2010
    Posts
    3

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

    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!

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    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>

  3. #3
    Join Date
    Aug 2006
    Posts
    1,917
    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

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    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.

  5. #5
    Join Date
    Jan 2009
    Posts
    3,346
    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.

  6. #6
    Join Date
    Mar 2010
    Posts
    3
    Quote Originally Posted by tirna View Post
    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!

  7. #7
    Join Date
    Mar 2010
    Posts
    3
    Quote Originally Posted by tracknut View Post
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles