Jump to content

Archived

This topic is now archived and is closed to further replies.

appeland

scrollable table does not behave properly in IE

Recommended Posts

Hello,
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,
Andi

Share this post


Link to post
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;
width:515px;
height:450px;
margin-left: 215px;
overflow: auto;
visibility: visible;
border-color:#ccc;
border-style:solid;
border-width:thin;
left: 0px;
top: 110px;

}

Share this post


Link to post
Share on other sites

×

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.