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
Solved

Simple HTML - not working... strange

Posted on 2003-12-05
16
222 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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
 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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)

860 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