Solved

Table breaking

Posted on 2006-10-19
6
225 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
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)

920 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

16 Experts available now in Live!

Get 1:1 Help Now