Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Getting Style to apply to Iframe

    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">
    <!--

    .MenuFrame{
    height:22;
    line-height:1.0;
    margin-top:0;
    margin-left:0;
    padding-top: 0;
    background-color:#05a561;
    border:none;
    width:100%;

    }
    -->
    </style>

    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

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    could you put the styling in the html of the iframe?
    redhead

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    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.
    Scott Stewart
    Always happy to learn from pros.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    whoops... i didnt read your questoin right

    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

    so put this in the page with the iframe in:

    <style>
    .MenuFrame{
    height: 22px;
    width: 100%;
    border:none;
    }
    </style>
    and also <iframe ... frameborder="0"> etc

    and this inside the page inside the iframe:

    <style>
    body {
    line-height: 1.0; &nbsp &nbsp /* 1.0 what? */
    margin-top: 0px;
    margin-left: 0px;
    padding-top: 0px;
    background-color:#05a561;
    }
    </style>

    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...
    redhead

  • #5
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts
    What about putting the class attribute on the DIV instead of the IFRAME?
    Wayne Christian

  • #6
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Right,
    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.
    Wayne Christian

  • #8
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    </td></tr></table>


    example of non inherited styling:

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

  • #9
    New Coder
    Join Date
    Aug 2002
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    quick semi-off topic question,
    which browsers accept i-frames?

  • #10
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    as far as i know
    opera6 ie6 netscape7

  • #11
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    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!
    Scott Stewart
    Always happy to learn from pros.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •