Horizontal scroll bar not appearing in IE

adireddyravindra · Joined: 08 May 2008 Posts: 4

Hi all,

Following code works as i excepted in mozilla(horizontal scrollbar appears) but it does not in IE.
am I missing anything?

appreciate your help

<html>
<body>
<div>
<table width="60%" style="border:1px solid #000000;">
<tr>
<td>

<div style="overflow-x: auto; width:100%; height:100%;">
<table>
<tr>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
</tr>
<tr>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
<td>sadaskjjdhsakda</td>
</tr>

</table>

</div>
</td>
</tr>
</table>

</div>
</body>
</html>

Thanks,
Ravi

kevin.carbonaro · Joined: 08 May 2008 Posts: 7 Location: Malta

IE does not understand 'overflow' when the width and height are given in percentage. One of the reasons I don't like IE Wink

You have to use absolute pixel width and height.

In the following part of your code I have set the table width to 450px, same as the div width, so that the table border size is the same as the div. The height of the div is also set in pixels.

Hope this helps...

adireddyravindra · Joined: 08 May 2008 Posts: 4

Hi kevin,

Thanks for your help, it works when width is given in pixel. Is there any way or any hack to make it work if width is given in % ?.

Thanks,
ravi

kevin.carbonaro · Joined: 08 May 2008 Posts: 7 Location: Malta

I have experimented a bit, and through some research found that IE does not fully support overflow-x yet.

However the following code seems to work and gives a similar result to what you require.

Still... note the height property which has to be given in pixels.

Also note that I have made changes in code to the table structure. Not sure if you needed this to be a nested table.

Let me know if you have any more questions.

adireddyravindra · Joined: 08 May 2008 Posts: 4

Hi kevin,

Thanks for your help. Your solution helped me a lot but when i have nested table again it fails. I have a requirement where tables and div's are nested and if the table width is greater than the display width, then a horizontal scrollbar should appear(user can provide width in pixel, % , em or he can leave blank without providing any value). Is there any other way to support this requirement in IE as well??

Appriciate your help

Thanks
ravi[/img]

adireddyravindra · Joined: 08 May 2008 Posts: 4

the example i provided to you is very simple, but the table i have to implement this feature is very big, nested and very complex(the nested level is 10 approximately ).

kevin.carbonaro · Joined: 08 May 2008 Posts: 7 Location: Malta

Your exact requirements seem to be that there is a width and height at the top level Table and then another width and height in the lower level tables.

With CSS this can be done and would work in most browsers.

So I have made changes to the code, where the DIVs have styles applied to them, instead of using TABLE attributes.

I have set the Inner DIV to 50% height and changed the colors so that you can see how it works more easily.

I would also try to avoid using tables for layout in favor of CSS Stylesheets. Tables are tricky and difficult to maintain.