View Full Version : Getting Style to apply to Iframe

11-28-2002, 03:49 PM
Hi All,

I'm trying to apply a style to an IFrame, but it appears to ignore the style. The style is defined in a style sheet (with other defs)

<STYLE TYPE="text/css">

padding-top: 0;


and the iframe tag is this

<Div><iframe width="100%" scrolling="no" class="MenuFrame" name="menubar" ></iframe></div>

I have to use the DIV tag becasue without it the iframe is not positioned correctly. Am I using the style sheet correctly? Does the Div tag have anything to do with blocking the style? I tried setting the div tag style to "MenuFrame" so that the iframe would inherit the style, but no good.

I would appreciate someone setting me straight.

Scott Stewart

11-28-2002, 05:37 PM
could you put the styling in the html of the iframe?

11-28-2002, 06:00 PM
Thanks for your reply,

I did try that but I still can't control the appearance or position of the iframe. It completely ignores anything but width="100%" and scrolling="no". It is as though the style sheet is not being seen, but other styles are showing up.

11-28-2002, 06:14 PM
whoops... i didnt read your questoin right :rolleyes:

as you are trying to change the iframe and not the content in it you will need to put the styling into the page that has the iframe in... and some of it in the page inside the iframe :eek:

so put this in the page with the iframe in:

height: 22px;
width: 100%;
and also <iframe ... frameborder="0"> etc

and this inside the page inside the iframe:

body {
line-height: 1.0; &nbsp &nbsp /* 1.0 what? */
margin-top: 0px;
margin-left: 0px;
padding-top: 0px;

as for the div, you would have to position it from what i think you've said:

<div style="postition: absolute; left: 100px; top: 100px">

hope that makes sense and works...

12-02-2002, 08:09 PM
What about putting the class attribute on the DIV instead of the IFRAME?

12-02-2002, 09:43 PM
placing the class inside of the div as apposed to the iframe will just customize the div, not the iframe, the class call has to be inline with the tag that its being used for, unless the style is inherited, but in this case it isnt.

12-02-2002, 10:23 PM
The iframe is inside the DIV. Setting the width/height for the div will constrain the iframe to the same size (if it's hard set to width/height=100%). This should achieve the desired visual effect, no? The same argument applies to the other style properties being set, except for the background color.

12-02-2002, 11:37 PM
Originally posted by wac
The iframe is inside the DIV. Setting the width/height for the div will constrain the iframe to the same size

yes correct, if the div was sized right, and the the iframe was sized inside of the div with % then the div would control the iframe size.

example of inherited styling:

<table style="font:8pt arial"><tr><td>
this is the specified font size

example of non inherited styling:

<table style="font:8pt arial"><tr><td>
<input type="text" value="the text is NOT changed">

select sires
12-03-2002, 02:36 AM
quick semi-off topic question,
which browsers accept i-frames?

12-03-2002, 04:27 AM
as far as i know
opera6 ie6 netscape7

12-03-2002, 05:06 AM
Thanks everyone for excelent answers. I didn't know height could be sized by % but I don't know why not. I even looked it up on W3C site.

I ended up having to get rid of the div because I am using FrontPage and it does weird stuff whenever you save or preview. In my case it moved the opening div and iframe tags to the inside of my form and the closing iframe and div after the closing form tag. Another time it inserted 6 lines of <dd>&nbsp</dd> between the iframe tags. I only used div tags to try and control the layout of the page. But ForntPage has it's own idea of what a web page should look like. What I end up having to do is use 1st Page 2000 (free and excelent) at work where FP is the ONLY allowed program and hope nobody opens the page with FP.

I switched to span tags and was able to gain some control. Liberally placing comments around helped (don't ask me why) and then I had to give up on the auto insert <p> tags everywhere that eat up space on my page.

The entire company uses MS which means nothing but IE 6 so I don't have the multiple browser issue to contned with.

Sorry for the long winded reply and thanks for letting me vent on FrontPage!