CSS width iframe problem

Topic

New Reply

Hi, i am having a problem with CSS, i currently have a 3 column layout i devised that is fluid but resizes according to margins as opposed to %, which works fine in FF and IE, however, i use an iframe in the center section that uses margins to resize, and i initially used width:100% which sohuld have taken all available space within the container, however, in IE, it stretches over the center section, but goes how it is supposed to when you resize the browser window, in FF it works fine, but it seems to inherit the background of the section, but that’s ok.
HTML

Your browser does not support inline frames click here
to get the content.

CSS
#center
{
background-color:#33dd5f;
color:#000;
margin-left:205px;
margin-right:205px;
border:1px solid #000;
padding-bottom:10px;
}
#center iframe
{
height:350px;
margin-top:5px;
width:100%;
}

Reply | Quote

Replies

I see the problem, but I’m not sure why it happens. To force IE to redraw the width of the , one option is to wait until it loads and then re-assert the style setting. Test using this in the section:


window.onload = function() {
if (document.all) {
var firstiframe = document.getElementsByTagName("iframe")[0];
firstiframe.style.width = "100%";
}
}


Unfortunately, I can’t think of a way to do that any earlier.

Reply | Quote

Ok that works good for the inital load, however, the iframe is re-directed using some links on the left, and now each time i click one, the same thing happens…

Reply | Quote

Danny

I am having difficulty recreating this as I need to see the whole box model…any chance you can zip it and sent it as an attachment please?

Reply | Quote

Ok here are the two files you need to see the problem. Open with IE after unzipping.

Reply | Quote

Hi Danny
Thanks for that…a lovely piece of work BTW

I think the issue you have, and I have to admit I have had a very long day today, may be down to the dreaded inheritance Therefore I have created a new class called content and placed it thus:

…

Welcome

Your browser does not support inline frames click here
to get the content.

…

The adapted css is attached

I am still not quite sure what the issue is but this seemed to improve the layout a tad.

Reply | Quote

Jez, again, you are a legend, i thought i had tried putting in a container, maybe i mis-spelled the ID when i called it, heh, many many thanks!
Also, i think i relaise what is happening, i have not defined a wdith for the center section as it resizes according to margins, so when it tries to check the initial width, it isn’t there, so when i resize my browser, the width is checked again and it reads OK, but the fix you give is perfect, thanks for the thumbs up on the work too, it’s nice to recieve

Reply | Quote