IE: overflow problem with table contained by div

[roopurt18]

I'm about ready to gouge my eyeballs out with this one.  They say a picture is worth a thousand words so here's the layout working correctly within FF:

 

 

Here is FF after the navigation menu has been collapsed:

 

Here it is broken in IE:

 

 

As you can see, IE mangles the Hell out of the navigation menu in addition to expanding past the page width (look at the header and footer).

 

Here is the PHP that generates the tables:

<div>
  <!-- Do the plan table -->
  <table id="BidPlans" class="BidDetailsTbl"
         cellpadding="0" cellspacing="0" border="0">
    <tr><td>Plans</td></tr>
    <?php foreach($Plans as $Plan){ ?>
      <tr><td><?=$Plan?></td></tr>
    <?php } ?>
  </table>
  <!-- Do the Sub bids table -->
  <div id="BidSubsContainer">
    <table id="BidSubs" class="BidDetailsTbl"
           cellpadding="0" cellspacing="0" border="0">
    <?php foreach($TblRows as $Row){ ?>
      <tr><td><?=implode("</td><td>", $Row)?></td></tr>
    <?php } ?>
    </table>
  </div>
</div>

 

Here is the CSS:

.BidDetailsTbl {
  border: none;
  margin: 0px;
}

.BidDetailsTbl tr td {
  white-space: nowrap;
  border: inset 1px;
  margin: 2px;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;
}

#BidPlans { /* The bid plans table */
  float: left;
  margin-left: 5px;
}

#BidSubsContainer { /* The div that contains the sub bids table */
  overflow: scroll;
}

#BidSubs { /* The sub bids table */
  background-color: #ffffff;
}

 

Now, I've broken the layout into two separate tables because I'd like people to always see which plans the dollar amounts are attached to.  I've used white-space: nowrap for the table cells to guarantee the two tables are the same height.

 

I don't think I can use any solution that relies on fixed widths.  Doing so would make my life Hell due to the collapsible navigation menu and the fact that our clients can customize the CSS, so not everyone is necessarily using the same widths for the page, navigation area, and content area.

 

Any tips or advice is greatly appreciated.

[roopurt18]

Anyone?

[roopurt18]

So I finally solved this with javascript.  I initially sought after a pure CSS solution because I felt that was the better way to handle this, but came up rather dry.  I contemplated displaying just the content area I'm trying to create as it's own page without any headers, footers, navigation, etc. but decided against it.  Finally, the page is AJAX driven , so any users on this page will need to have JS enabled anyways.

 

I kept my original CSS, as it works in standards-compliant browsers:

.BidDetailsTbl {
  border: none;
  margin: 0px;
}

.BidDetailsTbl tr td {
  white-space: nowrap;
  border: inset 1px;
  margin: 2px;
  padding: 2px;
  padding-left: 10px;
  padding-right: 5px;
}

#BidPlans { /* The bid plans table */
  float: left;
  margin-left: 5px;
}

#BidSubsContainer { /* The div that contains the sub bids table */
  overflow: auto;
  margin-right: 5px;
}

#BidSubs { /* The sub bids table */
  background-color: #ffffff;
}

 

This is the javascript that does the brunt of the work:

// fixOverflowX
// IE has the annoying habit of not obeying overflow properties and will instead
// stretch container elements to fit the content.  This function will set the
// offending element's width to a fixed amount of pixels.  In order to do so,
// it requires the containing element and the offender
// container - containing element, specified as id name or a DOM object
// offender - offending element, specified as id name or a DOM object
window.ieSucks.fixOverflowX = function(container, offender){
  if(!this.isIE()){
    return; // Don't waste time if this isn't IE
  }
  try{
    container = htmlDOM.getElementById(container);
    offender = htmlDOM.getElementById(offender);
    if(!container || !offender){
      return; // Not valid objects
    }
    // Save some properties of the offender
    offender.style.width = ""; // Clear the width so we get "true" dimensions
    var origOffsetLeft = offender.offsetLeft;
    var origOffsetWidth = offender.offsetWidth;
    var origMarginRight = container.clientWidth - offender.offsetLeft
                          - offender.offsetWidth;
    // Now hide the offender so it stops distorting our page
    offender.style.display = "none";
    // Determine if resizing is necessary
    var needed = origOffsetLeft + origOffsetWidth + origMarginRight;
    if( container.clientWidth >= needed ){
      offender.style.display = "";
      offender.style.overflow = "";
      offender.style.overflowX = "";
      return; // No resize
    }
    // If we're still here we need to resize
    var setWidth = container.clientWidth - origOffsetLeft - origMarginRight;
    offender.style.width = setWidth + "px";
    offender.style.display = "";
    // Determine if we need to turn on horizontal scrolling
    if(offender.scrollWidth > offender.clientWidth){
      offender.style.overflowX = "scroll";
    }
  }catch(e){
    alert("Error: ieSucks: fixOverflowX");
  }
  return;
}

 

Just in case someone runs into the same issue.

 

(EDIT) Fixed 2 issues with JS function.