Why dosen't my layout look right?

timROGERS · 29-10-2005, 11:47 AM

Here is the full code for my layout:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}body {
	background-color: #ff9900;
}
</style>
<!--Fireworks 8 Dreamweaver 8 target.  Created Sat Oct 29 12:38:58 GMT+0100 (GMT Standard Time) 2005-->
</head>
<body>
<center>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <table border="0" cellpadding="0" cellspacing="0" width="780">
<!-- fwtable fwsrc="Untitled" fwbase="index.jpg" fwstyle="Dreamweaver" fwdocid = "1979523505" fwnested="0" -->
  <tr>
   <td><img src="spacer.gif" width="33" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="87" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="29" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="459" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="27" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="85" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="60" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td colspan="7"><img name="index_r1_c1" src="index_r1_c1.jpg" width="780" height="96" border="0" id="index_r1_c1" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="96" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="5"><img name="index_r2_c1" src="index_r2_c1.jpg" width="33" height="404" border="0" id="index_r2_c1" alt="" /></td>
   <td rowspan="4"><iframe width="87" height="319" src="nav.htm" name="nav">&nbsp;</td>
   <td rowspan="5"><img name="index_r2_c3" src="index_r2_c3.jpg" width="29" height="404" border="0" id="index_r2_c3" alt="" /></td>
   <td rowspan="3"><img name="index_r2_c4" src="index_r2_c4.jpg" width="459" height="315" border="0" id="index_r2_c4" alt="" /></td>
   <td rowspan="5"><img name="index_r2_c5" src="index_r2_c5.jpg" width="27" height="404" border="0" id="index_r2_c5" alt="" /></td>
   <td><img name="index_r2_c6" src="index_r2_c6.jpg" width="85" height="137" border="0" id="index_r2_c6" alt="" /></td>
   <td rowspan="5"><img name="index_r2_c7" src="index_r2_c7.jpg" width="60" height="404" border="0" id="index_r2_c7" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="137" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="index_r3_c6" src="index_r3_c6.jpg" width="85" height="34" border="0" id="index_r3_c6" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="34" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="index_r4_c6" src="index_r4_c6.jpg" width="85" height="144" border="0" id="index_r4_c6" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="144" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="2"><img name="index_r5_c4" src="index_r5_c4.jpg" width="459" height="89" border="0" id="index_r5_c4" alt="" /></td>
   <td rowspan="2"><img name="index_r5_c6" src="index_r5_c6.jpg" width="85" height="89" border="0" id="index_r5_c6" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="4" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="index_r6_c2" src="index_r6_c2.jpg" width="87" height="85" border="0" id="index_r6_c2" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="85" border="0" alt="" /></td>
  </tr>
</table></center>
</body>
</html>

Why does it appear completely incorrectly, here is what it looks like:
http://www.habplus.co.uk/test

Why is it that once it reaches the iframe it just completely stops loading?

Sygon · 29-10-2005, 12:11 PM

Well when i recieve the html for your site it just comes up how it loads mauybe there was something wrong ewhen you sliced it, can you provide us source without iframe?

timROGERS · 29-10-2005, 12:18 PM

Heres source without iFrame:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}body {
	background-color: #ff9900;
}
</style>
<!--Fireworks 8 Dreamweaver 8 target.  Created Sat Oct 29 12:38:58 GMT+0100 (GMT Standard Time) 2005-->
</head>
<body>
<center>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <table border="0" cellpadding="0" cellspacing="0" width="780">
<!-- fwtable fwsrc="Untitled" fwbase="index.jpg" fwstyle="Dreamweaver" fwdocid = "1979523505" fwnested="0" -->
  <tr>
   <td><img src="spacer.gif" width="33" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="87" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="29" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="459" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="27" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="85" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="60" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td colspan="7"><img name="index_r1_c1" src="index_r1_c1.jpg" width="780" height="96" border="0" id="index_r1_c1" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="96" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="5"><img name="index_r2_c1" src="index_r2_c1.jpg" width="33" height="404" border="0" id="index_r2_c1" alt="" /></td>
   <td rowspan="4">&nbsp;</td>
   <td rowspan="5"><img name="index_r2_c3" src="index_r2_c3.jpg" width="29" height="404" border="0" id="index_r2_c3" alt="" /></td>
   <td rowspan="3"><img name="index_r2_c4" src="index_r2_c4.jpg" width="459" height="315" border="0" id="index_r2_c4" alt="" /></td>
   <td rowspan="5"><img name="index_r2_c5" src="index_r2_c5.jpg" width="27" height="404" border="0" id="index_r2_c5" alt="" /></td>
   <td><img name="index_r2_c6" src="index_r2_c6.jpg" width="85" height="137" border="0" id="index_r2_c6" alt="" /></td>
   <td rowspan="5"><img name="index_r2_c7" src="index_r2_c7.jpg" width="60" height="404" border="0" id="index_r2_c7" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="137" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="index_r3_c6" src="index_r3_c6.jpg" width="85" height="34" border="0" id="index_r3_c6" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="34" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="index_r4_c6" src="index_r4_c6.jpg" width="85" height="144" border="0" id="index_r4_c6" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="144" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="2"><img name="index_r5_c4" src="index_r5_c4.jpg" width="459" height="89" border="0" id="index_r5_c4" alt="" /></td>
   <td rowspan="2"><img name="index_r5_c6" src="index_r5_c6.jpg" width="85" height="89" border="0" id="index_r5_c6" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="4" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="index_r6_c2" src="index_r6_c2.jpg" width="87" height="85" border="0" id="index_r6_c2" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="85" border="0" alt="" /></td>
  </tr>
</table></center>
</body>
</html>

It displays fine without the iframe. When I close the iframe tag properly it slightly changes it, but it dosen't fix it, here is a link to it with proper closure:

http://www.habplus.co.uk/test

nets · 29-10-2005, 01:05 PM

I'll see if I can find out whats wrong, I just need to get something to eat.

timROGERS · 29-10-2005, 01:07 PM

OK, I get everything working, and it looks nice, but as soon as I add in the iframe it breaks it.

nets · 29-10-2005, 01:09 PM

This could be because there is padding in the column, and your iframe is at the pixel size of the table and the padding.

timROGERS · 29-10-2005, 01:11 PM

So, what would be the correct iframe code? Will you give it to me so I may learn from my mistake

By the way, this is my first ever layout I've designed and tried to code, and unlike many people I haven't asked for someone to do it for me, I've tried and came to an error, and now I need some help so that I may learn

nets · 29-10-2005, 01:23 PM

Ok I've looked at the code and I think the problem is that on line 50 you have a non breaking space under the Iframe (Causing the column to stretch bigger than it should).

HTML Code:

    <TD rowSpan=4><IFRAME name=nav src="index_jpg_files/nav.htm" frameBorder=0 
      width=87 height=319></IFRAME>&nbsp;
	  </TD>

Delete the non breaking space " " so your code looks like this on line 50, and I think it should work.

HTML Code:

    <TD rowSpan=4><IFRAME name=nav src="index_jpg_files/nav.htm" frameBorder=0 
      width=87 height=319></IFRAME>
	  </TD>

timROGERS · 29-10-2005, 01:34 PM

THanks, that fixed it! +REP

Thread: Why dosen't my layout look right?

Thread Tools

Why dosen't my layout look right?

Posting Permissions