I have a problem with firefox adding unnecessary scroll-bars (its working ok in chrome and ie).
See the following two files: page.html & iframe.html.
Page.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#myframe {
height: 550px;
overflow: auto;
width: 665px;
}
</style>
</head>
<body style="background-color:#dcdcdc;">
<iframe id="myframe" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" src="iframe.html" style="display: inline;">
</iframe>
</body>
</html>
Iframe.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
html {
direction: rtl;
}
</style>
</head>
<body>
<div style="width: 665px; height: 537px; background-color: blue;">
x
</div>
</body>
</html>
In firefox v30 i always get vertical and horizontal scroll-bars showing. The size of the content in iframe.html is the same as the iframe tag size.
I narrowed the problem down to using direction:rtl tag in the iframe.html file. When i add the direction:rtl i get the scrollbars and removing it fixes the problem.
Any idea why ?
How to fix this without using scrolling="no" on the iframe ?
Edit: I dont think adding overflow:hidden is the solution, the content should not "overflow" - its smaller then the parent. Also i'd like to have the option for content to overflow and show scrollbars in-case that the content is long.
Thanks for your help :)
change:
with this:
Alternative add !important at the end of the css rule