Jump to content

scrollable table does not behave properly in IE


Recommended Posts

I have surrounded a table with the following div:
[code]<div style=" width:100%; height:500px; overflow:auto;">[/code]

Internet Explorer takes the width of the stuff inside the divs as 100% while
Firefox uses the 100% of the table that surrounds everything (tamplate table).

That results in the (mambo) template being messed up in IE  :(
Any idea how to fix this please ?
Thanks & regards,
Link to comment
Share on other sites

overflow in general is apples and oranges for IE and proper browsers.

overflow:auto is a nightmare in IE.

Many coders use overflow:hidden and overflow:visible as actual IE hacks to get IE 5.0.x and 5.5 to tame the IE "double margin bug" and the "expanding box bug".

What you most likely are looking for is the "overflow:auto" element along with the "visibility" feature of an absolute div (aka "layer" in DreamWeaver). On its own it has no reference points other than what you want the browser default to guess at (and you never want to leave it up to IE to guess). BUT, used in an absolute positioned div it tells the browser how to guess.

Example - what I did here was to put a table based form within an absolute positioned div, http://www.manhattanapts.com/forms/r_lwu.php :

Here is the css I used. The div should be wider than the table, but the table must be longer than the div. Then designate how much of the div you want to be visible with height and when you specify overflow:auto it adds scrolling up and down for visibile table height (you can do the same with width by making the table width wider than the div width.

#form {
position: absolute;
        top: 108px;
margin-left: 215px;
overflow: auto;
visibility: visible;
left: 0px;
top: 110px;

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.