Fluid width iframes in Firefox and IE

One or the other?

[katana_one]

It seems I am having trouble with an iframe's width displaying differently in IE and Firefox.
Currently, it is set to width="100%" which works fine in IE, which most of our visitors use. But Firefox does not seem to like the 100% value, and only renders an iframe about 200-300 px wide instead of using the container DIV's width.

If I change the iframe width to "auto" then it displays correctly in Firefox, and in IE it fails to use the parent DIV's width.

How do I get it to display at 100% of the parent DIV's width in both browsers?

[jo1ene]

Do you have FF's web developer tools (Google it). There is a choice within that outlines block elements. I find it helpful in these cases. Maybe if you posted the code someone could help you spot the problem. I am working on an iframe and it's displaying the same in both browsers so I think your problem is elsewhere.

[stlwebs]

It seems I am having trouble with an iframe's width displaying differently in IE and Firefox.
Currently, it is set to width="100%" which works fine in IE, which most of our visitors use. But Firefox does not seem to like the 100% value, and only renders an iframe about 200-300 px wide instead of using the container DIV's width.

If I change the iframe width to "auto" then it displays correctly in Firefox, and in IE it fails to use the parent DIV's width.

How do I get it to display at 100% of the parent DIV's width in both browsers?

First of all, when I build anything for the web I always preview it in Firefox because if it dispays right there, you pretty much assume it will be good everywhere else.

For your iframe problem, since you are placing iframes within tables and layers/div's, I would check your code for the div or table that you are specifying the iframe to take up 100% of the width.

[katana_one]

The code is not that complicated, but I'll go ahead and post it anyway.
Here is the relevant HTML:

<div id="store">
<iframe name="content_frame" width="100%" height="500" frameborder=0 src="someURL"></iframe>
</div>

In the CSS I currently have:

#store {
position: absolute;
top: 165px; left: 0;
padding: 0 65px 0 65px;
width:100%;
}

This displays fine in IE, but in Firefox the iframe does not fill the DIV. If I change the width to "auto" then the iframe does not fill the DIV in IE.

[edited by: katana_one at 12:51 pm (utc) on May 4, 2005]

[katana_one]

I always preview it in Firefox because if it dispays right there, you pretty much assume it will be good everywhere else.

Obviously, if that were true, I would not be posting this question, now would I?

[katana_one]

<bump!>

[ricfink]

Made a test page, unable to replicate.

Iframe is filling up in both.

Quirks or standards? (What's the doctype.)

Do you have a width set on body?

[katana_one]

No width set on body, and the DTD is 4.01 Transitional.

[katana_one]

Incidentally, Netscape 7x, Opera 7x and IE 6x all display the page the way I originally intended.
I have removed the width reference in the CSS - this was actually how I had it before I began trying to 'fix' it in FF (I originally tested in Opera, IE and NN - I only downloaded FF recently).

I can live with it for now.