Why is my HTML reacting like this?

[michaelwl]

Why doesn't the code below make the image (<img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1">) the correct size on my page? My PHP script seems to be generating it correctly can't see why it's not being displayed correctly.

 

<script type="text/javascript">
document.write(" <TR> <TD> ");
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td height="14" class="infoBoxHeading"><img src="images/infobox/corner_left.gif" border="0" alt="" width="11" height="14"></td>
    <td width="100%" height="14" class="infoBoxHeading">Categories</td>
    <td height="14" class="infoBoxHeading" nowrap><img src="images/pixel_trans.gif" border="0" alt="" width="11" height="14"></td>
  </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="1" class="infoBox">
  <tr>
    <td><table border="0" width="100%" cellspacing="0" cellpadding="3" class="infoBoxContents">
  <tr>
    <td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
  </tr>
  <tr>
    <td class="boxText">
<img src="images/trans.gif" width="150" height="60.95"></td>
  </tr>
  <tr>
    <td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
  </tr>
</table>
</td>
  </tr>
</table>
document.write("");
document.write(" <\/TD> <\/TR> ");
</script>

[thedarkwinter]

maybe you can try making the <td width='100%'>

 

also, try doing it without the css, and see if that helps

[michaelwl]

Tried that still is not appearing... I'm killing myself trying to get this right.

 

Anyone have any ideas?

[DeadEvil]

try

document.write(" <TR> <TD width='100%'> ");

[Crew-Portal]

Yo did not end off your Javascript Tags Try:

 

<script type="text/javascript">
document.write(" <TR> <TD> ");
</script>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td height="14" class="infoBoxHeading"><img src="images/infobox/corner_left.gif" border="0" alt="" width="11" height="14"></td>
    <td width="100%" height="14" class="infoBoxHeading">Categories</td>
    <td height="14" class="infoBoxHeading" nowrap><img src="images/pixel_trans.gif" border="0" alt="" width="11" height="14"></td>
  </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="1" class="infoBox">
  <tr>
    <td><table border="0" width="100%" cellspacing="0" cellpadding="3" class="infoBoxContents">
  <tr>
    <td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
  </tr>
  <tr>
    <td class="boxText">
<img src="images/trans.gif" width="150" height="60.95"></td>
  </tr>
  <tr>
    <td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
  </tr>
</table>
</td>
  </tr>
</table>
<script type="text/javascript">
document.write("");
document.write(" <\/TD> <\/TR> ");
</script>

[ToonMariner]

is it stretching your image?????

 

width 100% will make the image as wide as the width of the parent elment...