In the normal cases, if we use an iframe on IE 8 having option scrolling=”no”, then the scrollbar must be hidden no matter what a browser you are using. But accidents happen.

I was using AjaxToolKit Accordion in one of the web applications, and inside the AccordionPane, i added an iframe. On IE 7, firefox, chrome this section was working perfect. The code was as follow:

<ajaxToolkit:Accordion ID=”MyAccordion” runat=”server” SelectedIndex=”0″ FadeTransitions=”false” FramesPerSecond=”40″   TransitionDuration=”250″ RequireOpenedPane=”false” SuppressHeaderPostbacks=”true”>
<Panes>
<ajaxToolkit:AccordionPane ID=”AccordionPane1″ runat=”server”>
<Header>Control Header</Header>
<Content>
<table cellpadding=”0″ cellspacing=”0″ width=”100%”>
<tr>
<td style=”height: 190px;”>
<iframe src=”MyPage.aspx” frameborder=”0″  scrolling=”no”  marginheight=”0″ marginwidth=”0″>
</iframe>
</td>
</tr>
</table>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>

But the only exception was the IE 8, this code was showing a small scrollbar because of the iframe and the Ajax issue. And for sure that was not accepted. So the only solution I found to remove the scrollbar from the iframe was applying a small css trick:

<iframe src=”MyPage.aspx” frameborder=”0″ style=”width:100%; border:0; height:100%; overflow:auto;” scrolling=”no”  marginheight=”0″ marginwidth=”0″>
</iframe>

The overflow:auto and the height:100% solved the issue and hid the scrollbar.