You'll surprising that even of your IFRAME content have adjusted to fit the width of the IFRAME, the horizontal bar still appeared when web page showing on Internet Explorer 6. Really a headache and time consuming when dealing with that problems. I have take a day to find solutions around and finally came up with these two:
Solution I: Change the DOCTYPE
Replace your current DOCTYPE by this one
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
Please note that should be <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, not <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
You can find more detail information about that on http://www.adobe.com/devnet/dreamweaver/articles/horizontal_scroll.html and http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_21362380.html
Anyway, when using that, you have to make sure that all text size are declared in CSS, if not, you'll experienced wrong text format rendering on IE7 and FireFox.
Solution II: Applying overflow property
This is really simple solution, just add this style to your web page
| <STYLE>
HTML { overflow-x: hidden; }
</STYLE> |
Read more at http://www.computing.net/webdevel/wwwboard/forum/535.html
Good luck ;)