IFRAME centered in TABLE CELL ???

[Gordo]

For this post, I'm not interested in cross-browser, etc. This relates to IE only (even just IE6 if needed).

I really need to have the contents of an iframe centered within a table cell. At this point, I don't care too much about the width/height of the iframe -- probably just 100% W/H of the table cell.

I just need the contents of the source (src) to be centered within the table cell. Is this possible!? I've searched both the CF and WA forums. I don't think I've ever seen it done.

Okay, this is what I have so far (as an example). When you use the iframe, the eBay logo (see bottom of post) is placed in the upper left corner of the bottom table row's cell. I need it in the middle/center of that cell...like the text in the code.


<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td width="100%" height="22%" valign="middle" align="center">
<div align="center">
<center>
<table border="0" cellpadding="4" cellspacing="0" width="100%" height="100%">
<tr>
<td bgcolor="#FF0000">
Top row
</td>
</tr>
</table>
</center>
</div>
</td>
</tr>
<tr>
<td width="100%" height="78%" valign="middle" align="center">
This text is centered vertically and horizontally in this table row's cell. Can this be done with the contents of an iframe source?
</td>
</tr>
</table>


Now, substitute the iframe tag below for the "This text is centered..." text. See the difference!?

<iframe id="datamain" name="centerofpage" style="width:100%; height:100%;" src="http://pics.ebay.com/aw/pics/navbar/ebay_logo_home.gif" marginwidth="5" marginheight="5" hspace="0" vspace="0" border="0" frameborder="0" scrolling="auto"></iframe>

[joh6nn]

that is happening, and i know why you're confused. you're thinking that the image, is the iframe. it's not, it's the image. (this is sort of like "there is no spoon", but not quite).

the iframe is set to take up all of the space in the cell, so you're confusing the space in the cell, with the space in the iframe. if you make it possible to differentiate between the space in the cell and the space in the iframe (ie, by changing the background color of the cell) then you can see that there actually isn't a problem.

examine the following code, and i think you'll see what i'm talking about:

<table border="1" cellpadding="0" cellspacing="0" width="50%" height="50%">
 <tr valign="middle" align="center">
  <td bgcolor="#FF0000">Top row</td>
 </tr>
 <tr>
  <td valign="middle" align="center" HEIGHT="50%" bgcolor="#0000FF">
   <iframe id="datamain" name="centerofpage" style="width:50%; height:50%;" src="http://pics.ebay.com/aw/pics/navbar/ebay_logo_home.gif" marginwidth="5" marginheight="5" hspace="0" vspace="0" border="0" frameborder="0" scrolling="auto"></iframe>
  </td>
 </tr>
</table>

[Gordo]

Gotcha. I'd played around with it enough to determine that...but was still looking for the SPOON!

FYI, using the [c o d e] tags end up putting all of the code on one line when copy-n-pasting. Not a huge problem or anything...just an FYI.

In your example though, is it possible to have the iframe centered in that table cell? Leaving the iframe at 50%-50%, it still aligns itself at the top of the table cell, even though the cell declares that its contents should be centered horizontally and vertically. And with my example, I won't be able to position the iframe absolutely with top: 100px; left: 200px or anything like it. The page/example will adjust to the user's resolution via table %'s. Follow?

So is that possible?

The one semi-solution I've found is to have the content of the iframe src (like iframed-page.htm) centered in the middle of the page.

But, I was hoping I wouldn't have to do that for each and every page source. It would be a LOT better if I could just figure out how to make the iframe appear in the exact middle of the table cell...regardless of size of the iframe and/or table cell.

Hmmm, this may be just too difficult and/or impossible!?

[joh6nn]

what? what browser are you using? it worked perfectly for me in mozilla.

i will keep that in mind about the [/code] tags.

[Gordo]

VERY INTERESTING

In IE6, the iframe is placed at the top of the table cell.

In Mozilla (as you know), it is centered just the way I want it.

Unfortunately, I'm coding this particular deal for IE. I don't know what else I can do. I do NOT have the coding skills/knowledge to force it to be in the center of the table cell -- at least not past what I've already shown here.

Oh, the copying the [code] tag worked this time. Who knows!? It may not be an issue afterall.

[joh6nn]

dude, sorry, i tried all kinds of things, nothing seems to work.

[boxer_1]

This is a bit of a cheat / workaround:

<html>
<head>
<title>Testing</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="50%" height="50%">
<tr valign="middle" align="center">
<td bgcolor="#FF0000">Top row</td>
</tr>
<tr>
<td valign="middle" align="center" HEIGHT="50%" bgcolor="#0000FF">
<iframe [b]vspace="50%"[/b] id="datamain" name="centerofpage" style="width:50%; height:50%;" src="http://pics.ebay.com/aw/pics/navbar/ebay_logo_home.gif" marginwidth="5" marginheight="5" hspace="0" vspace="0" border="0" frameborder="0" scrolling="auto"></iframe>
</td>
</tr>
</table>
</body>
</html>

Any help ?

[joh6nn]

that might do it. giving the iframe 50% margins or something. good idea, boxer.

[boxer_1]

Originally posted by joh6nn
that might do it. giving the iframe 50% margins or something. good idea, boxer.

Thanxs, you're right about the margins. Here's the same code using margins instead of 'vspace':

Edit: *Code removed* Hmm, I didn't seem to have any luck using 'margin-top' and margin-bottom. Maybe I'm missing something .

[Gordo]

Wow, those last few posts were quite a good exchange of information. I'm testing various versions now.

Honestly, I think my best option is to simply have the iframe 100% W&H, and then have the content of the external .htm files centered in a table (on each external page). That way, no matter what the content (how wide/long), it should look "ok".

Just to make my specific desired result clear.......
It seems like the last example or so are trying to center the eBay image. I'm not trying to center the upper left hand corner of an iframe within the cell. I'm not trying to center a single image. I am trying to get the content (single line of text, an image or two, a long page of HTML, etc.) to center inside the table cell. Therefore, having the iframe at 100% W&H is best. From there, it's the content that needs to be centered.

Irregardless, you two have gone much further with the placement of iframe content than I've ever seen. I'm sure others will benefit from this exchange in the future --- should they be able to search these forums correctly.

THANKS again!

[joh6nn]

boxer, i'm thinking there's no reason to restrict it to just margin-top and margin-bottom. we want the same 50% margins on the sides, too. just set margin: 50%; and that should work.

Gordo, the last couple of attempts were still focused on centering the iframe. aside from "whatever works is the best way to do it", i think the best way to solve the problem is to center the iframe, and not the content in the iframe. let's see if setting the margins does the trick, and if not, i'll see if i can hunt up an explanation from somewhere, as to why this doesn't work in explorer.

[Gordo]

i think the best way to solve the problem is to center the iframe, and not the content in the iframe. let's see if setting the margins does the trick, and if not, i'll see if i can hunt up an explanation from somewhere, as to why this doesn't work in explorer.

Hey, I'm all for keeping this quest going! And having the iframe auto-center (as it did in Mozilla) would be GREAT...a lot less coding would be required on all the potential iframe src pages.

I played around with the margins (of your examples) above, but was unable to achieve anything close to the ultimate goal. So, if either of you (or anyone else) comes up with a solution...I'm all ears!

Thanks again.

I was under the general impression that IE was the most forgiving browser...the one that would be easiest to make this whole thing happen to begin with. I'm actually surprised that Mozilla would "do the right thing"...and not IE!

[boxer_1]

Joh6nn, maybe you can post an example using margin: 50% and have the iframe center horizontally in IE 6, but I've tried quite a few variations and haven't any luck with anything besides setting the hspace and vspace to 50%. .

In the code below, I used hspace and vspace 50%, but changed the src of the iframe to this thread as opposed to the ebay image to avoid the illusion of centering the image only and to better illustrate that the iframe itself is centered in the lower table cell. I've tested it in Mozilla 1.1a and IE 6 only:

<html>
<head>
<title>Testing</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="50%" height="50%">
<tr valign="middle" align="center">
<td bgcolor="#ff0000">Top row</td>
</tr>
<tr>
<td valign="middle" align="center" HEIGHT="50%" bgcolor="#0000FF">
<iframe [b]vspace="50%" hspace="50%"[/b] id="datamain" name="centerofpage" style="width:50%; height:50%;" src="http://www.codingforum.net/showthread.php?s=&threadid=1913" marginwidth="5" marginheight="5" border="0" frameborder="0" scrolling="auto"></iframe>
</td>
</tr>
</table>
</body>
</html>

[joh6nn]

well, i thought maybe the margins property would work, but you're right. i couldn't get it working in IE either. your code seems to be working for me in IE6, 5, and Mozilla, though.