SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation get relative element position

    Hi all,

    Is there anyway you can get the correct element position in Firefox?

    I have two floated div's and I need to position something over the top of the second div.

    In Internet explorer the positioned items appear how I like them, but in firefox they all apear on top of the first div.

    It seems that firefox is acting correctly, but I have no idea how to solve this.

    Basically I have two relative div's and nested inside each one are multiple absolutely positioned div's (only from the top).

    TIA

    Regards

    Gav


  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    We'd need to see some code to see exactly what you are doing and to give pertinent advice.

  3. #3
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    everything is generated via Javascript, so it'd be silly to post the whole js file. I can however post the result of the javascript.

    CSS
    Code:
     .Calendar_dsCal_1 { width: 600px; position: relative; }.CalendarTable_dsCal_1 { width: 100%; border: solid 1px #666; }.CalendarHourContainer_dsCal_1 { width: 25px; border-bottom: solid 1px #CCC; border-right: solid 1px #666; }.CalendarRow_dsCal_1 { background-color: #FFF8E6; color: #666; border-bottom: solid 1px #CCC; height: 15px; font-size: 0.1px; }.CalendarWorkingHourRow_dsCal_1 { background-color: #FFECC4; color: #666; border-bottom: solid 1px #CCC; height: 15px; font-size: 0.1px; }.CalendarHour_dsCal_1 { font-family: verdana, tahoma, sans-serif; font-size: 66%; width: 25px; text-align: center; }.CalendarAMPM_dsCal_1 { font-family: verdana, tahoma, sans-serif; font-size: 56%; width: 25px; text-align: center; }.CalendarItem_dsCal_1 { background-color: #FFF; cursor: pointer; height: 15px; margin-left: 26px; font-family: verdana, tahoma, sans-serif; font-size: 56%; width: 100%; position: absolute; border: solid 1px #666; }.CalendarItemColor_dsCal_1 { height: 15px; width: 5px; border-right: solid 1px #666; float: left; margin-right: 5px; height: 100%; }
    HTML
    Code:
     <div id="dsCal_1" class="Calendar_dsCal_1"><div class="CalendarItem_dsCal_1" id="CalendarItem_0" style="z-index: 91; margin-top: 270px; height: 106px"><div class="CalendarItemColor_dsCal_1" style="background-color: blue;"></div>Added using CalendarEntry</div><div class="CalendarItem_dsCal_1" id="CalendarItem_1" style="z-index: 91; margin-top: 405px; height: 46px"><div class="CalendarItemColor_dsCal_1" style="background-color: red;"></div>Adding using CalendarEntry Constructor</div><table id="dsCal_1_Table" cellspacing="0" cellpadding="0" border="0" class="CalendarTable_dsCal_1"><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">12</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-7T12:0"> </td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-7T12:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">1</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-7T1:0"> </td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-7T1:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">2</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-7T2:0"> </td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-7T2:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">3</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-7T3:0"> </td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-7T3:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">4</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-7T4:0"> </td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-7T4:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">5</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-7T5:0"> </td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-7T5:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">6</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-7T6:0"> </td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-7T6:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">7</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-7T7:0"> </td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-7T7:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">8</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-7T8:0"> </td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-7T8:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">9</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-7T9:0"> </td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-7T9:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">10</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-7T10:0"> </td></tr><tr><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-7T10:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">11</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-7T11:0"> </td></tr><tr><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-7T11:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">12</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-7T24:0"> </td></tr><tr><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-7T24:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">1</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-7T13:0"> </td></tr><tr><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-7T13:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">2</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-7T14:0"> </td></tr><tr><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-7T14:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">3</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-7T15:0"> </td></tr><tr><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-7T15:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">4</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-7T16:0"> </td></tr><tr><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-7T16:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">5</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-7T17:0"> </td></tr><tr><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-7T17:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">6</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-7T18:0"> </td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-7T18:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">7</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-7T19:0"> </td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-7T19:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">8</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-7T20:0"> </td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-7T20:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">9</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-7T21:0"> </td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-7T21:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">10</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-7T22:0"> </td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-7T22:30"> </td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1"><div class="CalendarHour_dsCal_1">11</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-7T23:0"> </td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-7T23:30"> </td></tr></table></div>
    if you were to stick that all in a file it will not render the way I see it, some reason the merged rows are 100%.

    for images see

    Firefox


    Internet Explorer


  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BTTT

    Anyone?


  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry i went out before you posted last night. I've just had a look at the code you posted and it gives me the exact same result in firefox and ie. They both look similar to your ie jpg except that the layout is only half a page wide. (Those image shack images are hard to see at that size! Aren't they supposed to lead to a larger version.)

    The only thing I notoce from the code is that you offer no co-ordinates for the absolute positioning which means that the element is placed at its position in the flow and then removed from the flow at that point. This may vary between browsers unless you also supply the top and left positions.

    However I don't think that has anything to do with the problem as I the code you supplied seems to look more or less the same in IE and firefox anyway. Could you try updating the code a bit to a working example that shows the differences in ie and firefox? Of course we will need the full html because I don't know what doctype you are working under which may alos have effects if you are working in quirks mode in ie.

    Sorry I couldn't see anything obviously wrong.

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
     <html>
     <HEAD>
     <TITLE> New Document </TITLE>
     
     <style>
     
     .Calendar_dsCal_1 { width: 600px; position: relative; }.CalendarTable_dsCal_1 { width: 100%; border: solid 1px #666; }.CalendarHourContainer_dsCal_1 { width: 25px; border-bottom: solid 1px #CCC; border-right: solid 1px #666; }.CalendarRow_dsCal_1 { background-color: #FFF8E6; color: #666; border-bottom: solid 1px #CCC; height: 15px; font-size: 0.1px; }.CalendarWorkingHourRow_dsCal_1 { background-color: #FFECC4; color: #666; border-bottom: solid 1px #CCC; height: 15px; font-size: 0.1px; }.CalendarHour_dsCal_1 { font-family: verdana, tahoma, sans-serif; font-size: 66%; width: 25px; text-align: center; }.CalendarAMPM_dsCal_1 { font-family: verdana, tahoma, sans-serif; font-size: 56%; width: 25px; text-align: center; }.CalendarItem_dsCal_1 { background-color: #FFF; cursor: pointer; height: 15px; margin-left: 26px; font-family: verdana, tahoma, sans-serif; font-size: 56%; width: 100%; position: absolute; border: solid 1px #666; }.CalendarItemColor_dsCal_1 { height: 15px; width: 5px; border-right: solid 1px #666; float: left; margin-right: 5px; height: 100%; }
     
     .Calendar_dsCal_2 { width: 300px; position: relative; }.CalendarTable_dsCal_2 { width: 100%; border: solid 1px #666; }.CalendarHourContainer_dsCal_2 { width: 25px; border-bottom: solid 1px #CCC; border-right: solid 1px #666; }.CalendarRow_dsCal_2 { background-color: #FFF8E6; color: #666; border-bottom: solid 1px #CCC; height: 15px; font-size: 0.1px; }.CalendarWorkingHourRow_dsCal_2 { background-color: #FFECC4; color: #666; border-bottom: solid 1px #CCC; height: 15px; font-size: 0.1px; }.CalendarHour_dsCal_2 { font-family: verdana, tahoma, sans-serif; font-size: 66%; width: 25px; text-align: center; }.CalendarAMPM_dsCal_2 { font-family: verdana, tahoma, sans-serif; font-size: 56%; width: 25px; text-align: center; }.CalendarItem_dsCal_2 { background-color: #FFF; cursor: pointer; height: 15px; margin-left: 26px; font-family: verdana, tahoma, sans-serif; font-size: 56%; width: 100%; position: absolute; border: solid 1px #666; }.CalendarItemColor_dsCal_2 { height: 15px; width: 5px; border-right: solid 1px #666; float: left; margin-right: 5px; height: 100%; }
     
     #dsCal_1
     {
     	float: left;
     	margin-right: 5px;
     }
     
     </style>
     
     </HEAD>
     
     <BODY>
     
     <div id="dsCal_1" class="Calendar_dsCal_1"><div class="CalendarItem_dsCal_1" id="CalendarItem_0" style="z-index: 91; margin-top: 270px; height: 106px"><div class="CalendarItemColor_dsCal_1" style="background-color: blue;"></div>Added using CalendarEntry</div><div class="CalendarItem_dsCal_1" id="CalendarItem_1" style="z-index: 91; margin-top: 405px; height: 46px"><div class="CalendarItemColor_dsCal_1" style="background-color: red;"></div>Adding using CalendarEntry Constructor</div><table id="dsCal_1_Table" cellspacing="0" cellpadding="0" border="0" class="CalendarTable_dsCal_1"><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">12</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-8T12:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-8T12:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">1</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-8T1:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-8T1:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">2</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-8T2:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-8T2:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">3</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-8T3:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-8T3:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">4</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-8T4:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-8T4:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">5</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-8T5:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-8T5:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">6</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-8T6:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-8T6:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">7</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-8T7:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-8T7:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">8</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-8T8:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-8T8:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">9</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-8T9:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-8T9:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">10</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-8T10:0">&nbsp;</td></tr><tr><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-8T10:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">11</div><div class="CalendarAMPM_dsCal_1">AM</div></td><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-8T11:0">&nbsp;</td></tr><tr><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-8T11:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">12</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-8T24:0">&nbsp;</td></tr><tr><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-8T24:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">1</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-8T13:0">&nbsp;</td></tr><tr><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-8T13:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">2</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-8T14:0">&nbsp;</td></tr><tr><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-8T14:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">3</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-8T15:0">&nbsp;</td></tr><tr><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-8T15:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">4</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-8T16:0">&nbsp;</td></tr><tr><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-8T16:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">5</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-8T17:0">&nbsp;</td></tr><tr><td class="CalendarWorkingHourRow_dsCal_1" title="2006-10-8T17:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">6</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-8T18:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-8T18:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">7</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-8T19:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-8T19:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">8</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-8T20:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-8T20:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">9</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-8T21:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-8T21:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">10</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-8T22:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-8T22:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_1" width="25px"><div class="CalendarHour_dsCal_1">11</div><div class="CalendarAMPM_dsCal_1">PM</div></td><td class="CalendarRow_dsCal_1" title="2006-10-8T23:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_1" title="2006-10-8T23:30">&nbsp;</td></tr></table></div>
     
     <div id="dsCal_2" class="Calendar_dsCal_2"><div class="CalendarItem_dsCal_2" id="CalendarItem_0" style="z-index: 91; margin-top: 105px; height: 91px"><div class="CalendarItemColor_dsCal_2" style="background-color: blue;"></div>Added using CalendarEntry</div><div class="CalendarItem_dsCal_2" id="CalendarItem_1" style="z-index: 91; margin-top: 225px; height: 46px"><div class="CalendarItemColor_dsCal_2" style="background-color: red;"></div>Adding using CalendarEntry Constructor</div><table id="dsCal_2_Table" cellspacing="0" cellpadding="0" border="0" class="CalendarTable_dsCal_2"><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">12</div><div class="CalendarAMPM_dsCal_2">AM</div></td><td class="CalendarRow_dsCal_2" title="2006-10-8T12:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_2" title="2006-10-8T12:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">1</div><div class="CalendarAMPM_dsCal_2">AM</div></td><td class="CalendarRow_dsCal_2" title="2006-10-8T1:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_2" title="2006-10-8T1:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">2</div><div class="CalendarAMPM_dsCal_2">AM</div></td><td class="CalendarRow_dsCal_2" title="2006-10-8T2:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_2" title="2006-10-8T2:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">3</div><div class="CalendarAMPM_dsCal_2">AM</div></td><td class="CalendarRow_dsCal_2" title="2006-10-8T3:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_2" title="2006-10-8T3:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">4</div><div class="CalendarAMPM_dsCal_2">AM</div></td><td class="CalendarRow_dsCal_2" title="2006-10-8T4:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_2" title="2006-10-8T4:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">5</div><div class="CalendarAMPM_dsCal_2">AM</div></td><td class="CalendarRow_dsCal_2" title="2006-10-8T5:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_2" title="2006-10-8T5:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">6</div><div class="CalendarAMPM_dsCal_2">AM</div></td><td class="CalendarRow_dsCal_2" title="2006-10-8T6:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_2" title="2006-10-8T6:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">7</div><div class="CalendarAMPM_dsCal_2">AM</div></td><td class="CalendarRow_dsCal_2" title="2006-10-8T7:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_2" title="2006-10-8T7:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">8</div><div class="CalendarAMPM_dsCal_2">AM</div></td><td class="CalendarRow_dsCal_2" title="2006-10-8T8:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_2" title="2006-10-8T8:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">9</div><div class="CalendarAMPM_dsCal_2">AM</div></td><td class="CalendarRow_dsCal_2" title="2006-10-8T9:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_2" title="2006-10-8T9:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">10</div><div class="CalendarAMPM_dsCal_2">AM</div></td><td class="CalendarWorkingHourRow_dsCal_2" title="2006-10-8T10:0">&nbsp;</td></tr><tr><td class="CalendarWorkingHourRow_dsCal_2" title="2006-10-8T10:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">11</div><div class="CalendarAMPM_dsCal_2">AM</div></td><td class="CalendarWorkingHourRow_dsCal_2" title="2006-10-8T11:0">&nbsp;</td></tr><tr><td class="CalendarWorkingHourRow_dsCal_2" title="2006-10-8T11:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">12</div><div class="CalendarAMPM_dsCal_2">PM</div></td><td class="CalendarWorkingHourRow_dsCal_2" title="2006-10-8T24:0">&nbsp;</td></tr><tr><td class="CalendarWorkingHourRow_dsCal_2" title="2006-10-8T24:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">1</div><div class="CalendarAMPM_dsCal_2">PM</div></td><td class="CalendarWorkingHourRow_dsCal_2" title="2006-10-8T13:0">&nbsp;</td></tr><tr><td class="CalendarWorkingHourRow_dsCal_2" title="2006-10-8T13:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">2</div><div class="CalendarAMPM_dsCal_2">PM</div></td><td class="CalendarWorkingHourRow_dsCal_2" title="2006-10-8T14:0">&nbsp;</td></tr><tr><td class="CalendarWorkingHourRow_dsCal_2" title="2006-10-8T14:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">3</div><div class="CalendarAMPM_dsCal_2">PM</div></td><td class="CalendarWorkingHourRow_dsCal_2" title="2006-10-8T15:0">&nbsp;</td></tr><tr><td class="CalendarWorkingHourRow_dsCal_2" title="2006-10-8T15:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">4</div><div class="CalendarAMPM_dsCal_2">PM</div></td><td class="CalendarWorkingHourRow_dsCal_2" title="2006-10-8T16:0">&nbsp;</td></tr><tr><td class="CalendarWorkingHourRow_dsCal_2" title="2006-10-8T16:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">5</div><div class="CalendarAMPM_dsCal_2">PM</div></td><td class="CalendarWorkingHourRow_dsCal_2" title="2006-10-8T17:0">&nbsp;</td></tr><tr><td class="CalendarWorkingHourRow_dsCal_2" title="2006-10-8T17:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">6</div><div class="CalendarAMPM_dsCal_2">PM</div></td><td class="CalendarRow_dsCal_2" title="2006-10-8T18:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_2" title="2006-10-8T18:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">7</div><div class="CalendarAMPM_dsCal_2">PM</div></td><td class="CalendarRow_dsCal_2" title="2006-10-8T19:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_2" title="2006-10-8T19:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">8</div><div class="CalendarAMPM_dsCal_2">PM</div></td><td class="CalendarRow_dsCal_2" title="2006-10-8T20:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_2" title="2006-10-8T20:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">9</div><div class="CalendarAMPM_dsCal_2">PM</div></td><td class="CalendarRow_dsCal_2" title="2006-10-8T21:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_2" title="2006-10-8T21:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">10</div><div class="CalendarAMPM_dsCal_2">PM</div></td><td class="CalendarRow_dsCal_2" title="2006-10-8T22:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_2" title="2006-10-8T22:30">&nbsp;</td></tr><tr><td rowspan="2" class="CalendarHourContainer_dsCal_2"><div class="CalendarHour_dsCal_2">11</div><div class="CalendarAMPM_dsCal_2">PM</div></td><td class="CalendarRow_dsCal_2" title="2006-10-8T23:0">&nbsp;</td></tr><tr><td class="CalendarRow_dsCal_2" title="2006-10-8T23:30">&nbsp;</td></tr></table></div>
     
     </BODY>
     </HTML>
    The absolute div's have to be changed as they expand further than the containing div, so I use javascript to deal with this.

    Sorry theres no syntax stying in there, the javascript that creates all of this doesn't really care for line breaks etc.

    Cheers


  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I may be on the wrong track here but adding float:left here seems to make them look the same.

    Code:
    .Calendar_dsCal_2 { width: 300px; position: relative;float:left }

  8. #8
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bow down and apraise Paul!, Although could this not affect the layout if I were to have a single calendar placed somewhere on the page.

    This alone, IT WORKED!

    Thanks



Bookmarks

Posting Permissions

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