iframe tag problem

[vpdigital]

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

[mwinter]

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,

<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:

property: value;

and the numbers must be followed with a unit (like em or px).

Mike

[vpdigital]

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:

<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?

[mwinter]

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.

#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%;
}

<div id="main-section">
  <iframe frameborder="0"></iframe>
</div>

Hope that helps,
Mike