Help! I made an error

[tiffany3]

Not sure what on earth I did. I have a few problems.

First off, I think my template has a border built in. There is a line on the right-side of the page and it is going right through my text and products. It looked normal on my laptop, but not on a bigger screen. How do I remove it or enlarge the actual border so it isnt in the middle of my text?

Secondly, I coded a table of some pics at the top and i is going to the bottom of the page. What am I missing?

Also, it cut off a whole section. There is a whole New Orleans Jewelry section that disappeared.

Thanks so much in advance!

http://www.charmiesonline.com

[htmlbasictutor]

Ok,
Either you fixed this or it is a cross-browser issue. Looks fine in IE7 (other than your table of pictures? Don't see any at the bottom. Maybe you deleted them in frustration?).

Your navigation column isn't quite up against the left. Is that on purpose?

Looks the same in FF 3.5.

[tiffany3]

First off, thanks so much for looking. I just removed my table of pics because I knew that was the problem. I would like to add it back in there but I havent the slightest clue what I am doing wrong. Like I said in my above post, it supposed to go under the first set of text, but it places itself at the very bottom of the page and it removes the entire New Orleans section. Any ideas or suggestions? Thanks again.

Here is the code:

<table border="0" width="100%" cellspacing="0" cellpadding="5">
<tr>
<td align="center" width="20%">
<a href="http://www.charmiesonline.com/store/WsDefault.asp?One=318">
<img border="0" src="/fpdb/images/home1.jpg" width="150" height="150"
alt="Nala Mommy Bracelet – Tiger Eye Mommy Bracelet"></a></td>
<td align="center" width="20%">
<a href="http://www.charmiesonline.com/store/WsDefault.asp?One=440">
<img border="0" src="/fpdb/images/home2.jpg" width="150" height="150"
alt="Hand Stamped Necklace – Hand Stamped Jewelry"></a></td>
<td align="center" width="20%">
<a href="http://www.charmiesonline.com/store/WsDefault.asp?One=421">
<img border="0" src="/fpdb/images/home4.jpg" width="150" height="150"
alt="Family Generation Bracelet – Grandma Bracelet"></a></td>
<td align="center" width="20%">
<a href="http://www.charmiesonline.com/store/WsDefault.asp?One=326">
<img border="0" src="/fpdb/images/home5.JPG" width="150" height="150"
alt="Tia Mommy Bracelet – Onyx Mothers Bracelet"></a></td>
</tr>
<tr>
<td align="center" width="20%" valign="top">
<a href="http://www.charmiesonline.com/store/WsDefault.asp?One=318"> Nala Mommy Bracelet – Tiger Eye Mommy Bracelet

</a></td>
<td align="center" width="20%" valign="top">
<a href="http://www.charmiesonline.com/store/WsDefault.asp?One=440"> Hand Stamped Necklace – Hand Stamped Jewelry </a></td>
<td align="center" width="20%" valign="top">
<a href="http://www.charmiesonline.com/store/WsDefault.asp?One=421"> Family Generation Bracelet – Grandma Bracelet </a></td>
<td align="center" width="20%" valign="top">
<a href="http://www.charmiesonline.com/store/WsDefault.asp?One=326"> Tia Mommy Bracelet – Onyx Mothers Bracelet </a></td></table>

[htmlbasictutor]

Try putting it after:

Customization 
                      is our specialty. If you don't see what you had in mind, 
                      contact us.<font color="#00ccff"></font> </font></span></p>

Right after the closing </p>

Now, having taken a closer look at your actual coding, you have way too much inline styling in this page plus some coding errors (mixing HTML and XHTML coding).

You really need to clean up these so it's easier to troubleshoot when things aren't going as intended.

[tiffany3]

Ok, I have added in the table so you can see what I am talking about. There is a line going through it. Is there a way to just remove it?

How do I make my navigation column go to the left? I didn't even realize it was moved over. Oy!

As you can see, I know very little about coding. When I need help, I just google "coding for a table", etc. I follow that and just play with it. I looked up the difference between html and xhtml. From what I gathered, all xhtml must be closed and lower case? Is that it? If I know what to look for, then I could try to clean it up. Thanks so much for your help. You have no idea!

[htmlbasictutor]

Your coding (spaced better so you can see how the table is constructed):

<table border="0" width="100%" cellspacing="0" cellpadding="5">
  <tr> 
    <td align="center" width="20%">
      <a href="http://www.charmiesonline.com/store/WsDefault.asp?One=318"><img border="0" src="/fpdb/images/home1.jpg" width="160" height="150" alt="Nala Mommy Bracelet – Tiger Eye Mommy Bracelet"></a>
    </td>
    <td align="center" width="20%">
      <a href="http://www.charmiesonline.com/store/WsDefault.asp?One=440"><img border="0" src="/fpdb/images/home2.jpg" width="160" height="150" alt="Hand Stamped Necklace – Hand Stamped Jewelry"></a>
    </td>
    <td align="center" width="20%">
      <a href="http://www.charmiesonline.com/store/WsDefault.asp?One=421"><img border="0" src="/fpdb/images/home4.jpg" width="160" height="150" alt="Family Generation Bracelet – Grandma Bracelet"></a>
    </td>
    <td align="center" width="20%">
      <a href="http://www.charmiesonline.com/store/WsDefault.asp?One=326"><img border="0" src="/fpdb/images/home5.JPG" width="160" height="150" alt="Tia Mommy Bracelet – Onyx Mothers Bracelet"></a>
    </td>
  </tr>
  <tr> 
    <td align="center" width="20%" valign="top"> 
      <a href="http://www.charmiesonline.com/store/WsDefault.asp?One=318">Tiger Eye Mommy Bracelet </a>
    </td>
    <td align="center" width="20%" valign="top"> 
      <a href="http://www.charmiesonline.com/store/WsDefault.asp?One=440">Hand Stamped Jewelry </a>
    </td>
    <td align="center" width="20%" valign="top"> 
      <a href="http://www.charmiesonline.com/store/WsDefault.asp?One=421">Grandmothers Bracelet </a>
    </td>
    <td align="center" width="20%" valign="top"> 
      <a href="http://www.charmiesonline.com/store/WsDefault.asp?One=326">Onyx Mothers Bracelet </a>
    </td>
  </tr>
</table>

Table theory:
All the widths of spacing and contents (in your case images) have to add up to the total width of the table.

You want to use 4 images therefore, the width of each cell must be 25% not 20% if you are forcing cell widths. But...it isn't actually 25% because you set the cellpadding to 5.

The width of your table is set to 100%. This tells the browser you want the table to fill 100% of the available space width wise. In your case, the width available is determined by the width of the design less the left column and where the right border lands.

You can try setting the cellpadding to 0 and see if that fixes your table overlapping the right border.

If that doesn't work, then your pictures are too wide. i.e. all the picture widths added up is greater than the space available.

The width of your navigation column is set to 260px. The background image is set to appear top right in the div that surrounds the navigation content. It would appear that your background image for the navigation column itself is missing (the brown strip down the left to make it visually the same as at the bottom). You will have to ask the designer how come.

[FGTH]

Run your code through validators:

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/