Results 1 to 4 of 4

Thread: iframe tag problem

  1. #1
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post iframe tag problem

    I designed a page, which dynamically scales to the browser's window. One trick I used was to define the width and height of an iframe with the tags...

    left=12 top=12 right=12 bottom=12

    ...so it's rather defined as a rectangle with given corner coordinates.
    Unfortunately, the right and bottom tags are only recognized by Netscape 7. The page looks completely ugly in Internet Explorer and Opera...

    Is there any substitute tag for Internet Explorer, so that the layout is displayed correctly in every browser?

    Many thanks!
    vpdigital
    Last edited by vpdigital; 01-28-2005 at 06:25 PM.

  2. #2
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vpdigital
    One trick I used was to define the width and height of an iframe with the tags...

    left=12 top=12 right=12 bottom=12
    The word, "tags", is horribly abused. People use it to mean all kinds of things. Used properly,

    HTML Code:
    <p>...</p>
    contains two tags. One opening, one closing. Together they delimit a p element. The opening tag may optionally contain attributes, such as id and style. When someone uses the word to refer to all of these things (and more!), it's almost impossible to decipher meaning from a description alone.

    So, now that we have some terminology laid out, could you describe your problem again or better yet, post a link to the page in question. Preferably the latter: I fear that you're describing nothing related to HTML as there are no left, right, top nor bottom attributes. However, those properties do exist in CSS, in which case the correct syntax is:

    Code:
    property: value;
    and the numbers must be followed with a unit (like em or px).

    Mike

  3. #3
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Sorry, you are right!

    Sorry for my bad terminology! I'm not a native english speaker/writer...
    Ok, I looked up, how I constructed the page so far: You are right! I created the main layout with <DIV> Layers with the above CSS-properties:
    HTML Code:
    <div id="mainsection" style="position:absolute; z-index:1;
     left: 162px; right: 162px; top: 72px; bottom: 12px;
     background-color: #00CCCC; border: 0px; overflow: auto">
    <iframe id="main" src="infos.htm" width="100%" height="100%"
     leftmargin="12" topmargin="12" marginwidth="12" marginheight="12"
     hspace=0 vspace=0 frameborder=0 scrolling=auto>
    </iframe>
    </div>
    So this way, I want to get an iframe, which fits exactly the size of the defined <DIV> Layer.
    But only Netscape displays the page correctly. In Internet Explorer, the iframe looks much smaller (in width and height)!

    Can you help me?

  4. #4
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vpdigital
    Sorry for my bad terminology!
    It's OK. However, I do think it illustrates how important correct usage can be.

    If you're not sure of the proper way to describe something, there's always a sure solution: post a link to a minimal example. Just enough code to show relevant parts of the problem). That way, a reader simply needs to activate that link and bingo! - they can inspect the problem for themselves. As the saying goes: "a picture is worth a thousand words".

    <DIV> Layers
    Layers is another term (invented by Macromedia) that is thrown around too much. A "layer" could realistically be any positioned element, so it's generally better to say "an absolutely-positioned div" or similar. Again, it just avoids confusion (and annoying "buzz" words).

    In Internet Explorer, the iframe looks much smaller (in width and height)!
    As usual, IE is being a pain in the ass.

    When you specify values for the left/right or top/bottom properties, the width or height should be calculated to take up the intervening space. If a child then specifies 100% width or height, it should use the computed value (as Mozilla, Opera, and other compliant browsers do). IE doesn't.

    To achieve what you want, you'll have to set explicit values for the containing element (the div). As the use of px (pixel) units should generally be avoided, you'd probably be better off using percentages. However, as you haven't presented exactly what you're trying to produce, I might be wrong.

    IE compounds this problem with its strange treatment of the height property. It's usual behaviour is, at best, unusual, but if a value is specified as a percentage, the containing element must have an explicit height. I really do hate IE...

    I've added borders purely so you can see the position of both element clearly.

    Code:
    #main-section {
      border: 1px solid blue;
      position: absolute;
      left: 20%;
      width: 60%;
      /* You could probably get away with using
       * absolute units (preferably em) for the top
       * property as vertical scrolling isn't so bad
       * as horizontal. Still, be careful.
       */
      top: 10%;
      /* As I mentioned above, this property will
       * have to be explicit. Again, the em unit is
       * preferred.
       */
      height: 25em;
    }
    #main-section iframe {
      border: 1px solid red;
      height: 100%;
      width: 100%;
    }
    HTML Code:
    <div id="main-section">
      <iframe frameborder="0"></iframe>
    </div>
    Hope that helps,
    Mike

Bookmarks

Posting Permissions

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