| | |
Moving iFrames
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
Hey all, I need with my iframes that I put on my webpage.
As you can see by the image here, they are not centered properly:
Using the center alignment just doesn't move it enough to the spot I want it. I was wondering if maybe there were some other way to move it. Any help would be appreciated.
Here's my code:
Thanks in advance :mrgreen:
As you can see by the image here, they are not centered properly:

Using the center alignment just doesn't move it enough to the spot I want it. I was wondering if maybe there were some other way to move it. Any help would be appreciated.
Here's my code:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- TemplateBeginEditable name="doctitle" --> <title>Untitled Document</title> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <style type="text/css"> <!-- body { background-image: url(../background.gif); } .style1 {color: #FFFFFF} .style2 {color: #000000; } --> </style> </head> <body> <div style="text-align:center;"> <p><img src="../toppartpsd copy copy.png" width="800" height="240" border="0" /></p> <p> </p> </div> <table width="100%" height="600" border="1" align="center" cellpadding="5" cellspacing="1"> <tr> <td width="200" height="220" align="right" valign="middle" background="../litle box.png" bgcolor="#2C2C2C" scope="col"> <iframe src="http://www.teamufh.com/phsycostats" width="120" height="180" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling=yes> </iframe></td> <td width="343" rowspan="2" align="right" valign="bottom" bordercolor="#2B2B2B" background="../main-box.png" scope="col"><p> <iframe src="http://www.teamufh.com/main" width="300" height="420" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling=yes> </iframe> </p> <p> </p> <p> </p></td> <td width="250" height="280" align="center" valign="middle" background="../litle box.png" bgcolor="#2C2C2C" scope="col"> <iframe src="http://www.teamufh.com/phsycostats" width="120" height="180" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling=yes> </iframe></td> </tr> <tr> <td width="250" height="280" align="center" valign="middle" bordercolor="#F4F4F4" background="../litle box.png" bgcolor="#2D2D2D" scope="col"> <iframe src="http://www.teamufh.com/phsycostats" width="120" height="180" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling=yes> </iframe></td> <td width="250" height="280" align="center" valign="middle" background="../litle box.png" bgcolor="#2B2B2B" scope="col"> <iframe src="http://www.teamufh.com/phsycostats" width="120" height="180" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling=yes> </iframe></td> </tr> </table> </body> </html>
Thanks in advance :mrgreen:
It has been my experience that, since different browsers render objects differently, that it is impossible to do what you are trying to do and have it render correctly on all browsers. The usual causes of the problem are:
- Some browsers include the borders, margins, and padding in the width you declare of a block object. Others do not include these, so the object gets wider when you add borders, margins, or padding.
- When this extra width is added in, it can make the entire page wider than 100 percent. Then the browser has to cheat to fit everything in. It steals the room where it can find it. This results in uneven locations, squeezed columns, moved images, and columns stacked vertically.
- If you write the page for the browser that takes more space for the extras, then the page has slop in it when rendered on browsers which don't take more space for the extras. So everything slides to the left.
- On the browsers that don't take more space outside the block, the space is taken inside the block. This squeezes the stuff in the block.
- With the browsers that take the extra space outside the block, code written for browsers that take the space inside the block now has slop inside the block.
The moral is: You can't win. Your page is sloppy on some browser, no matter how you write your code.
Since IE is the one not following the standard, I let the page look sloppy on IE, and say why.
- Some browsers include the borders, margins, and padding in the width you declare of a block object. Others do not include these, so the object gets wider when you add borders, margins, or padding.
- When this extra width is added in, it can make the entire page wider than 100 percent. Then the browser has to cheat to fit everything in. It steals the room where it can find it. This results in uneven locations, squeezed columns, moved images, and columns stacked vertically.
- If you write the page for the browser that takes more space for the extras, then the page has slop in it when rendered on browsers which don't take more space for the extras. So everything slides to the left.
- On the browsers that don't take more space outside the block, the space is taken inside the block. This squeezes the stuff in the block.
- With the browsers that take the extra space outside the block, code written for browsers that take the space inside the block now has slop inside the block.
The moral is: You can't win. Your page is sloppy on some browser, no matter how you write your code.
Since IE is the one not following the standard, I let the page look sloppy on IE, and say why.
Last edited by MidiMagic; Feb 9th, 2007 at 2:49 pm.
Daylight-saving time uses more gasoline
Thank you for the pointers, its too bad that I can't get them to do exactly what i want them to do. I did manage to get them fairly centered although some of them are a little off still but it is the best that I can do. I wish there were a better way to do this :-| but o well, it doesn't have to be THAT perfect anyway.
I'll post the link to the website once i get the content on it finished
I'll post the link to the website once i get the content on it finished
![]() |
Similar Threads
- iframes help (HTML and CSS)
- Moving to a larger case (Troubleshooting Dead Machines)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: how does this work?
- Next Thread: printing webpages
| Thread Tools | Search this Thread |
Tag cloud for JavaScript / DHTML / AJAX
ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate api automatically blackjack browser bug calendar captchaformproblem checkbox child class close cookies createrange() cursor dependent disablefirebug dom dropdown editor element embed engine events explorer ext file firehose flash form forms game google gxt hiddenvalue highlightedword html htmlform ie8 iframe image() images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jump libcurl math matrixcaptcha media microsoft object onerror onmouseoutdivproblem onreadystatechange parent paypal pdf php player post progressbar rated regex runtime scroll search security session shopping size software sql star stars stretch synchronous text textarea tweet twitter unicode validation web webservice website window windowsxp wysiwyg \n






