Simple HTML - not working... strange

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
QuarfelburgAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SquareHeadCommented:
Is this it?

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


0
QuarfelburgAuthor Commented:
unfortunately not.
0
seanpowellCommented:
What is it that's displaying incorrectly?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

QuarfelburgAuthor Commented:
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
seanpowellCommented:
I can't access either of those links...
0
QuarfelburgAuthor Commented:
are you being redirected to .ca?  I'll put it up on ca as well.
0
QuarfelburgAuthor Commented:
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
seanpowellCommented:
Okay, I can see the image. Can be specific as to what's not lined up?
0
COBOLdinosaurCommented:
>>>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
seanpowellCommented:
Okay - I see the problem now. Sorry about that. Hold on a moment...
0
seanpowellCommented:
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
seanpowellCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
QuarfelburgAuthor Commented:
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
seanpowellCommented:
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
seanpowellCommented:
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
QuarfelburgAuthor Commented:
Thanks Sean.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.