Solved

Table breaking

Posted on 2006-10-19
6
233 Views
Last Modified: 2010-04-09
I would be glad to give some points to whoever manages to find out why the table on the top left corner breaks so ugly on this page:

http://www.johnnieb.net/index.htm
see how the first 2 pixel slice from the header (just before the J of Johnnie is displaced)

and not on this one

http://www.johnnieb.net/photographer.htm

The code is (supposed to be identical), as I copy-pasted it a few months ago.
Help would be greatly appreciated.
0
Comment
Question by:celeron128
  • 3
  • 2
6 Comments
 
LVL 3

Accepted Solution

by:
tatkuu earned 200 total points
ID: 17770047
Hello!

For some reason, picture in the first cell drops down a little bit. You can fix that by adding
valign="top" to your code like this

<tr>
   <td rowspan="4" valign="top"><img name="index_r1_c1" src=...

This will fix only the symptom. I'm stunned why the other pages are fine with the same code. So the real problem is still there...

-tatu
0
 
LVL 28

Expert Comment

by:gamebits
ID: 17770976
Line 54 to 65 on one script:

   <td colspan="10" valign="top" bgcolor="#000000"><p class="location"><a href="../../index.htm" class="location">Home</a> &gt; Phototgrapher</p>
     <p class="p1"><img src="images/photographer.jpg" alt="photgrapher" width="260" height="344" hspace="10" align="left">I've have admired famous photographers since I was a kid and I always wanted to be one of them. Now I just want to be myself. Nothing more and nothing less. </p>
     <p class="p1"> My experience with photocameras began when my father bought me a Russian Smena camera and explained me the basics of photography.</p>
     <p class="p1">After that he gave me a Russian Zenith - a nice camera back then. By now you have probably figured out that I lived during my childhood in the Eastern block. Indeed, I am born and mostly raised in Bulgaria, but I have travelled a lot. </p>
     <p class="p1">Now I live and work in Munich - Germany and enjoy life and photography.</p>
     <p class="p1">I hope you enjoy it too!</p>
     <p class="p1">Ivan</p>
     <p>&nbsp;</p>
     <p></p></td>
   <td><img name="index_r4_c13" src="images/index_r4_c13.jpg" width="15" height="513" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="513" border="0" alt=""></td>
  </tr>

Same line on the other script:

   <td colspan="10" valign="top" bgcolor="#000000"><table width="100%"  border="0">
     <tr>
       <th width="50%" align="left" valign="top" scope="col"><p class="location">Home</p>
         <p class="location">&nbsp;</p>
         <p class="p1"><a href="models/mike/index.htm" target="_top"><img src="images/mike_cover.jpg" width="50" height="65" border="0"></a> 7.05.2006 - New photo model added - <a href="models/mike/index.htm" target="_top">Mike</a> </p>
         <p class="p1"><a href="models/tarkan/index.htm" target="_top"><img src="images/tarkan_cover.jpg" width="50" height="71" border="0"></a>16.01.2006 - New photo model added <a href="models/tarkan/index.htm" target="_top">Tarkan</a></p>
         <p class="p1"><a href="models/franco/index.htm" target="_top"><img src="images/franco_cover.jpg" width="43" height="76" border="0"></a> 15.01.2006 - First addition to the models photogalleries - <a href="models/franco/index.htm">Franco</a>. Please be patient I am slowly filling it up... </p>
         <p></p></th>
       <th width="50%" class="td_borders" scope="col"><img src="./random/fprotate.php" alt="Random Image"></th>
     </tr>
   </table>     <p><span class="copyrights">(c) 2005-2006 All copyrights reserved.</span></p>
    <p></p>    <p></p>    <p></p>    <p></p>    <p></p></td>

On the second script you have an extra table (and I forgot the term for a table inside a table, it will get back to me eventually), so the two script are not identical.

Gamebits
0
 

Author Comment

by:celeron128
ID: 17771699
OK, 100 points reserved for tatkuu for curing the symptom!

I increase the points to 200. The other 100 go to whoever finds the source of the problem.

Gamebits: The term is nested tables. Of course the source of the whole 2 pages is not the same, since the content of the pages is different. The nested table however is holding the content BELOW the header and in theory should not affect the upper rows of the parent table.
The code for the heading bit (the johnnie b and menus part) is the same for both files, or at least that I think.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:celeron128
ID: 17771740
I am not completely sure, but it may be that that cell is simply too big, because it spans over 4 rows instead of 2 as the next one. However the table is too complex for me to figure out where to correct it such that I spit it in 2 horizontally....
0
 
LVL 3

Expert Comment

by:tatkuu
ID: 17772109
>I am not completely sure, but it may be that that cell is simply too big, because it spans over 4 rows instead of 2 as the next one.
>However the table is too complex for me to figure out where to correct it such that I spit it in 2 horizontally....

Or your picture is still too small. It is now 2px x 600 px. This page http://www.johnnieb.net/photographer.htm is not so high than the other one. Try to modify the picture for example to 2px x 800px.

-tatu
0
 
LVL 3

Expert Comment

by:tatkuu
ID: 17773222
Hello!

Try to change border="1", then you can see better how the table works. I suggest finally that you
1. make the picture "index_r1_c1.jpg" smaller, to size 2px x 76 px.
2. change rowspan to value  2
3. and add one empty cell to the beginning of two rows below.

This should work.

-tatu


The code look like this:

  <tr>
   <td rowspan="2"><img name="index_r1_c1" src="images/index_r1_c1.jpg" width="2" height="600" border="0" alt=""></td>
   <td rowspan="2" colspan="2"><a href="/index.htm" target="_top"><img name="index_r1_c2" src="images/index_r1_c2.jpg" width="42" height="76" border="0" alt=""></a></td>
   <td colspan="3"><a href="/index.htm" target="_top"><img name="index_r1_c4" src="images/index_r1_c4.jpg" width="359" height="49" border="0" alt=""></a></td>
   <td colspan="7"><img name="index_r1_c7" src="images/index_r1_c7.jpg" width="547" height="49" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="49" border="0" alt=""></td>
  </tr>
  <tr>
   <td><img name="index_r2_c4" src="images/index_r2_c4.jpg" width="252" height="27" border="0" alt=""></td>
   <td><a href="/index.htm" target="_top"><img name="index_r2_c5" src="images/index_r2_c5.jpg" width="93" height="27" border="0" alt=""></a></td>
   <td colspan="3"><a href="#" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0011031310_0,0,27,null,'index_r2_c6');"><img name="index_r2_c6" src="images/index_r2_c6.jpg" width="113" height="27" border="0" alt=""></a></td>
   <td><img name="index_r2_c9" src="images/index_r2_c9.jpg" width="121" height="27" border="0" alt=""></td>
   <td><img name="index_r2_c10" src="images/index_r2_c10.jpg" width="90" height="27" border="0" alt=""></td>
   <td><a href="/photographer.htm" target="_top"><img name="index_r2_c11" src="images/index_r2_c11.jpg" width="149" height="27" border="0" alt=""></a></td>
   <td colspan="2"><a href="/contact.htm" target="_top"><img name="index_r2_c12" src="images/index_r2_c12.jpg" width="88" height="27" border="0" alt=""></a></td>
   <td><img src="images/spacer.gif" width="1" height="27" border="0" alt=""></td>
  </tr>
  <tr>
   <td></td>
   <td colspan="12"><img name="index_r3_c2" src="images/index_r3_c2.jpg" width="948" height="11" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="11" border="0" alt=""></td>
  </tr>
  <tr>
   <td></td>
   <td><img name=...
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question