problem in IE with rounded corners on iframe

Posted on 2009-02-19
Last Modified: 2012-05-06
I have a script which makes the corners of an element rounded.  I am trying to round the corners of an iframe box.  It works in firefox, but I need help getting it to work in internet explorer.

Let me know if you need to see the DD_roundies.js.  It is just one long eval function that makes the corners rounded.
Here is the call to the script.

<script type="text/javascript" src="includes/DD_roundies.js"></script>


    DD_roundies.addRule('#iframe_i_nav', '10px 10px 0 0', true);





Here is the iframe

<iframe id="iframe_i_nav" name="iframe_i_nav" src="m1_dynamic_nav_frame1pre.jsp" frameborder="0" width="998" scrolling="no" height="25" align="top"  style="background-color:#DFE7FF; border-right-width:1px; border-right-color:#CCCCCC; border-right-style:solid; border-left-width:1px; border-left-color:#CCCCCC; border-left-style:solid; border-top-width:1px; border-top-color:#CCCCCC; border-top-style:solid; ">

If you can see this, your browser does not support iframes!


Open in new window

Question by:the_hero
    LVL 1

    Author Comment

    Update: The jquery works if it is placed on a div in both IE and Firefox,

    For instance:
    <div id="roundedframe" style="height:25px; background-color:#DFE7FF;"></div>

    But if I try to put it on the iframe, it only works on firefox.
    LVL 1

    Author Comment

    didn't mean to say jquery above.
    LVL 75

    Assisted Solution

    by:Michel Plungjan
    So wrap the iframe in a div and turn the borders off
    LVL 1

    Accepted Solution

    Tried that, got the same result. IE won't allow it

    I did get it to work though.  What I did was turned the borders off the iframe and made its background the same as the layer behind it.  Then put a div inside the iframe and put the script on that, so it got the same effect I was looking for.

    Featured Post

    Maximize Your Threat Intelligence Reporting

    Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

    Join & Write a Comment

    Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now