Solved

Table breaking

Posted on 2006-10-19
6
224 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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
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 …

762 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now