Solved

Simple HTML - not working... strange

Posted on 2003-12-05
16
219 Views
Last Modified: 2010-04-09
Just have a simple table.

<table width="420" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                          <td width="420" colspan="2" class="header" align="left" valign="top">
                                                Drawer Chests
                                          </td>
                                    </tr>
                                    <tr>
                                          <td width="420" colspan="2" align="left" valign="top" bgcolor="#FFFFFF">
                                                <img src="images/blank.gif" width="1" height="2" alt=""><br>
                                          </td>
                                    </tr>
                                    
                                    <tr>
                                          <td width="76" align="left" valign="middle">
                                                <a href="tokyodansu.html"><img src="images/antiques/drawerchests-thumb.jpg" width="76" height="65" alt="Japanese Furniture" border="0"><br></a>
                                          </td>
                                          
                                          <td width="344" align="right" valign="middle" class="picleft">
                                                Made of Kiri wood in a traditionally asymmetrical design, the <a href="tokyodansu.html" class="antiqueslink">Tokyo Dansu Japanese Drawer Chest</a> is perfect for storing personal affects.
                                          </td>
                                    </tr>
                                    
                                    <tr>
                                          <td width="420" colspan="2" align="left" valign="top" bgcolor="#FFFFFF">
                                                <img src="images/blank.gif" width="1" height="2" alt=""><br>
                                          </td>
                                    </tr>
                                    
                                    <tr>
                                          <td width="420" colspan="2" class="header" align="left" valign="top">
                                                Coin Chests
                                          </td>
                                    </tr>
                                    
                                    <tr>
                                          <td width="420" colspan="2" align="left" valign="top" bgcolor="#FFFFFF">
                                                <img src="images/blank.gif" width="1" height="2" alt=""><br>
                                          </td>
                                    </tr>
                                    
                                    <tr>
                                          <td width="344" align="left" valign="middle" class="picleft">
                                                Made of Kiri wood in a traditionally asymmetrical design, the <a href="tokyodansu.html" class="antiqueslink">Tokyo Dansu Japanese Drawer Chest</a> is perfect for storing personal affects.
                                          </td>
                                          
                                          <td width="76" align="right" valign="middle">
                                                <a href="tokyodansu.html"><img src="images/antiques/drawerchests-thumb.jpg" width="76" height="65" alt="Japanese Furniture" border="0"><br></a>
                                          </td>
                                    </tr>
                                    
                                    <tr>
                                          <td width="420" colspan="2" align="left" valign="top" bgcolor="#FFFFFF">
                                                <img src="images/blank.gif" width="1" height="2" alt=""><br>
                                          </td>
                                    </tr>
                                    
                              </table>


Here is "picleft":

.picleft {
            display: block;
            width: 344px;
            text-align: left;
            text-decoration: none;
            font-family: Arial;
            height: 65px;
            font-size: 13px;
            font-weight: 500;
            color: #555A56;
            padding: 7px;
            background-color: #FFFFFF;
            }

For some odd reason it doesn't like this code.   Take a look at http://www.greenteadesign.com/newantiques.html

Thanks,
Hayden
0
Comment
Question by:Quarfelburg
16 Comments
 
LVL 18

Expert Comment

by:SquareHead
Comment Utility
Is this it?

<td width="344" align="right" valign="middle" class="picleft">
                            ^^^^^^^


0
 

Author Comment

by:Quarfelburg
Comment Utility
unfortunately not.
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
What is it that's displaying incorrectly?
0
 

Author Comment

by:Quarfelburg
Comment Utility
its just not aligned correctly... take a look at http://www.greenteadesign.com/newlayout.html its just the image but that is how it should be aligned.
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
I can't access either of those links...
0
 

Author Comment

by:Quarfelburg
Comment Utility
are you being redirected to .ca?  I'll put it up on ca as well.
0
 

Author Comment

by:Quarfelburg
Comment Utility
should work now.  note that if I remove:

<tr>
                                          <td width="344" align="left" valign="middle" class="picleft">
                                                Made of Kiri wood in a traditionally asymmetrical design, the <a href="tokyodansu.html" class="antiqueslink">Tokyo Dansu Japanese Drawer Chest</a> is perfect for storing personal affects.
                                          </td>
                                          
                                          <td width="76" align="left" valign="middle">
                                                <a href="tokyodansu.html"><img src="images/antiques/drawerchests-thumb.jpg" width="76" height="65" alt="Japanese Furniture" border="0"><br></a>
                                          </td>
                                    </tr>

Everything is aligned correctly.  I must be missing something obvious.
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Okay, I can see the image. Can be specific as to what's not lined up?
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
>>>For some odd reason it doesn't like this code.

What exactly is the error?  The link you posted does not work.  I get "page not found".

Cd&
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Okay - I see the problem now. Sorry about that. Hold on a moment...
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
What's happengin is your table cells are contradicting each other.

You have 344 and 76 in one row, and then 76 and 3444 in the next. (Reversed)

The easiest solution is to simply split the rows into separate tables.

Like this:

<table width="420" border="1" cellspacing="0" cellpadding="0">
                              <tr>
                                   <td width="420" colspan="2" class="header" align="left" valign="top">
                                        Drawer Chests
                                   </td>
                              </tr>
                              <tr>
                                   <td width="420" colspan="2" align="left" valign="top" bgcolor="#FFFFFF">
                                        <img src="images/blank.gif" width="1" height="2" alt=""><br>
                                   </td>
                              </tr>
                             
                              <tr>
                                   <td width="76" align="left" valign="middle">
                                        <a href="tokyodansu.html"><img src="images/antiques/drawerchests-thumb.jpg" width="76" height="65" alt="Japanese Furniture" border="0"><br></a>
                                   </td>
                                   
                                   <td width="344" align="right" valign="middle" class="picleft">
                                        Made of Kiri wood in a traditionally asymmetrical design, the <a href="tokyodansu.html" class="antiqueslink">Tokyo Dansu Japanese Drawer Chest</a> is perfect for storing personal affects.
                                   </td>
                              </tr>
</table>
<table width="420" border="1" cellspacing="0" cellpadding="0">                              
                              <tr>
                                   <td width="420" colspan="2" align="left" valign="top" bgcolor="#FFFFFF">
                                        <img src="images/blank.gif" width="1" height="2" alt=""><br>
                                   </td>
                              </tr>
                             
                              <tr>
                                   <td width="420" colspan="2" class="header" align="left" valign="top">
                                        Coin Chests
                                   </td>
                              </tr>
                             
                              <tr>
                                   <td width="420" colspan="2" align="left" valign="top" bgcolor="#FFFFFF">
                                        <img src="images/blank.gif" width="1" height="2" alt=""><br>
                                   </td>
                              </tr>
                             
                              <tr>
                                   <td width="344" align="left" valign="middle" class="picleft">
                                        Made of Kiri wood in a traditionally asymmetrical design, the <a href="tokyodansu.html" class="antiqueslink">Tokyo Dansu Japanese Drawer Chest</a> is perfect for storing personal affects.
                                   </td>
                                   
                                   <td width="76" align="right" valign="middle">
                                        <a href="tokyodansu.html"><img src="images/antiques/drawerchests-thumb.jpg" width="76" height="65" alt="Japanese Furniture" border="0"><br></a>
                                   </td>
                              </tr>
                             
                              <tr>
                                   <td width="420" colspan="2" align="left" valign="top" bgcolor="#FFFFFF">
                                        <img src="images/blank.gif" width="1" height="2" alt=""><br>
                                   </td>
                              </tr>
                             
                         </table>
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 100 total points
Comment Utility
I'll let you decide on the best place to do the split. Probably something like:

<table width="420" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="420" colspan="2" class="header" align="left" valign="top">Drawer Chests</td>
  </tr>
  <tr>
    <td width="420" colspan="2" align="left" valign="top" bgcolor="#FFFFFF"><img src="images/blank.gif" width="1" height="2" alt=""><br></td>
  </tr>
  <tr>
    <td width="76" align="left" valign="middle"><a href="tokyodansu.html"><img src="images/antiques/drawerchests-thumb.jpg" width="76" height="65" alt="Japanese Furniture" border="0"><br></a></td>
    <td width="344" align="right" valign="middle" class="picleft">Made of Kiri wood in a traditionally asymmetrical design, the <a href="tokyodansu.html" class="antiqueslink">Tokyo Dansu Japanese Drawer Chest</a> is perfect for storing personal affects.</td>
  </tr>
  <tr>
    <td width="420" colspan="2" align="left" valign="top" bgcolor="#FFFFFF"><img src="images/blank.gif" width="1" height="2" alt=""><br></td>
  </tr>
</table>
<table width="420" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="420" colspan="2" class="header" align="left" valign="top">Coin Chests</td>
  </tr>
  <tr>
    <td width="420" colspan="2" align="left" valign="top" bgcolor="#FFFFFF"><img src="images/blank.gif" width="1" height="2" alt=""><br></td>
  </tr>
  <tr>
    <td width="344" align="left" valign="middle" class="picleft">Made of Kiri wood in a traditionally asymmetrical design, the <a href="tokyodansu.html" class="antiqueslink">Tokyo Dansu Japanese Drawer Chest</a> is perfect for storing personal affects.</td>
    <td width="76" align="right" valign="middle"><a href="tokyodansu.html"><img src="images/antiques/drawerchests-thumb.jpg" width="76" height="65" alt="Japanese Furniture" border="0"><br></a></td>
  </tr>
  <tr>
    <td width="420" colspan="2" align="left" valign="top" bgcolor="#FFFFFF"><img src="images/blank.gif" width="1" height="2" alt=""><br></td>
  </tr>
</table>
0
 

Author Comment

by:Quarfelburg
Comment Utility
But I don't see why it wouldn't work just sticking with one table.  But sure I'll just make another table for each section.
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Becaase a cell can't be 76 wide in one row, and 344 in the next. Whatever width the cell is set to in the "initial" row, it has to remain that width throughout.
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Note: you can also solve the problem with using div's and css - but the workaround's would take longer than just using table code - which is supported by all browsers anyway.
0
 

Author Comment

by:Quarfelburg
Comment Utility
Thanks Sean.
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
This article discusses how to create an extensible mechanism for linked drop downs.
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…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

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

11 Experts available now in Live!

Get 1:1 Help Now