Solved

Simple HTML - not working... strange

Posted on 2003-12-05
16
220 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
ID: 9884197
Is this it?

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


0
 

Author Comment

by:Quarfelburg
ID: 9884212
unfortunately not.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9884421
What is it that's displaying incorrectly?
0
 

Author Comment

by:Quarfelburg
ID: 9884491
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
ID: 9884500
I can't access either of those links...
0
 

Author Comment

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

Author Comment

by:Quarfelburg
ID: 9884526
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
ID: 9884527
Okay, I can see the image. Can be specific as to what's not lined up?
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.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 9884529
>>>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
ID: 9884550
Okay - I see the problem now. Sorry about that. Hold on a moment...
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9884563
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
ID: 9884586
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
ID: 9884614
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
ID: 9884654
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
ID: 9884666
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
ID: 9884725
Thanks Sean.
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

Title # Comments Views Activity
USE HTML to redirect a webpage to a local Xcel file. 2 39
Modify Table Width 6 22
HTML Relative path 9 29
Zoom the page when you go in from your phone 3 0
Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 the basics of jQuery including how to code hide show and toggles. 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…

914 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

14 Experts available now in Live!

Get 1:1 Help Now