I have a frame-set and each frame has a table with width:100%. In IE 8 and 9, the table does not fill the whole window, but instead has a strange right margin. In all other browsers it worked fine.
I confirmed that it is not related to margin/padding and is to do with scrollbar because if I change the scrollbar width in the control panel, the reserved space changes too. If the page is viewed outside of frame this problem will not happen.
This is lagacy code. Each frame has scrolling=auto. From the internet I saw two related discussions:
However I still can’t find a solution. Adding scroll=no to the body of the page will eliminate the space, but this prevents scrollbar from showing when needed. I tried a few other solution but can’t find a fully working one yet.
EDIT: This only happens in vertical split frame.
Sample Code:
index.html
<html>
<frameset rows="150,*" cols="*" framespacing="0" border="0" frameborder="no">
<frame scrolling="auto" noresize src="top.html" name="menu">
<frame scrolling="auto" noresize src="bottom.html" name="main">
</frameset>
</html>
top.html
<html>
<body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgColor="#AAFFAA">
<table cellspacing=0 cellpadding=0 width="100%" border=1>
<tr>
<td width="100%" align=middle>TOP<td>
</tr>
</table>
</body>
</html>
bottom.html
<html>
<body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgColor="#FFAAAA">
<table cellspacing=0 cellpadding=0 width="100%" border=1>
<tr>
<td width="100%" align=middle>bottom<td>
</tr>
</table>
</body>
</html>
Sorry i cant comment under the question.
Did you try to replace the scrolling with an oveflow?
try adding a style
overflow: auto:oroverflow-x: auto; overflow-y: hidden;