Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Simple HTML - not working... strange

Posted on 2003-12-05
16
Medium Priority
?
228 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
[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
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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 400 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying 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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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…

604 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