[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Table breaking

Posted on 2006-10-19
6
Medium Priority
?
243 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 3

Accepted Solution

by:
tatkuu earned 800 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

649 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