Welcome to WebmasterWorld Guest from 54.147.63.124

Forum Moderators: incrediBILL

Message Too Old, No Replies

Fluid width iframes in Firefox and IE

One or the other?

     
8:53 pm on May 3, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Apr 9, 2004
posts:250
votes: 0


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?

10:00 pm on May 3, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:May 20, 2004
posts:469
votes: 0


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.
1:19 am on May 4, 2005 (gmt 0)

New User

10+ Year Member

joined:Apr 29, 2005
posts:4
votes: 0


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.

12:23 pm on May 4, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Apr 9, 2004
posts:250
votes: 0


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]

12:31 pm on May 4, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Apr 9, 2004
posts:250
votes: 0


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?
12:27 pm on May 5, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Apr 9, 2004
posts:250
votes: 0


<bump!>
12:28 am on May 6, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 10, 2003
posts:188
votes: 0


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?

12:07 pm on May 6, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Apr 9, 2004
posts:250
votes: 0


No width set on body, and the DTD is 4.01 Transitional.
1:09 pm on May 6, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Apr 9, 2004
posts:250
votes: 0


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.