Member Avatar for motox16

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: [IMG]http://img296.imageshack.us/img296/4219/iframehelpsn0.th.jpg[/IMG]

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:

<%@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>&nbsp;</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"> &nbsp;
      <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>&nbsp;
        <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>&nbsp;</p>
    <p>&nbsp;</p></td>
    <td width="250" height="280" align="center" valign="middle" background="../litle box.png" bgcolor="#2C2C2C" scope="col">&nbsp;
    <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">&nbsp;
    <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">&nbsp;
    <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:

  • 2 Contributors
  • 2 Replies
  • 105 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by motox16

Recommended Answers

All 2 Replies

Member Avatar for MidiMagic

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.

Member Avatar for motox16

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.