Image Spacing Issue--bad HTML?

[scrmbledeggs]

I am building a web site for my new online jewelry business using ProStores (www.prostores.com). I didn't realize when signing up for the service that I was restricted to their designs so I created my own images for the site. I used to work as a web designer using Dreamweaver (I have now been out of the country for several years so am a little behind on the technology), but I never got into much coding. Now, after racking my brain trying to figure out what the issue is with my header, I have no idea how to fix it. I did a validation test and it looks like there are quite a few issues, most of them already exisiting in the ProStores code. I really just wanted to insert my images and links in the header...It shouldn't be that hard, should it? Here is my site:

www.karmavidajewelry.com

I would really appreciate any help on this.

[cbVision]

The link you posted seems to have images in the header..

http://www.karmavidajewelry.com/images/store_version1/logo.gif
http://www.karmavidajewelry.com/images/store_version1/go.gif
http://www.karmavidajewelry.com/images/store_version1/nav_left.gif
...images for the navigation

Are you trying to replace these images?

[scrmbledeggs]

I actually got one of the spacing issues worked out. But i am still trying to get the arrow ("go.gif") closer to the search box at the top of the page. Ive tried everything i can think of and still it is all the way at the right-hand side of the page.

I have already replaced the text links that are provided by the ProStores code. I replaced their text with my images (the images currently seen on www.karmavidajewelry.com). I added the code for the search box as well. Do you have any idea how to move the image "go.gif"?

thanks for your help!

[cbVision]

It looks like you have everything in this table:

<!-- START SEARCH BUTTON -->

<TABLE height="94" cellSpacing="0" cellPadding="0" width="312" align="center" border="0">
<tr valign="top">
<!-- word search -->

<td class="navbar">
<form action="/servlet/Categories" method="post">
<strong>Search</strong>
<td class="leftnav"><input type="text" size="15" name="keyword" /></td>
<td valign="top" align="left" class="leftnav"> <input type="image" src="/images/store_version1/go.gif" border="0" alt="GO"></td>
</form>
</td>
</TR>
</TBODY>
</TABLE>
<!-- END SEARCH BUTTON -->


You need to specify widths for you TD cells and apply padding and margins for placement. Try this:
<!-- START SEARCH BUTTON -->

<table align="center" border="0" cellpadding="0" cellspacing="0" height="20" width="312" style="padding-bottom: 50px; padding-left: 100px">
<tbody><tr valign="top">
<!-- word search -->

<td class="navbar" width="55px" style="padding-top: 4px;">
<form action="/servlet/Categories" method="post">
<strong>Search</strong>
</form></td><td class="leftnav" width="120px"><input size="15" name="keyword" type="text"></td>
<td class="leftnav" align="left" style="padding-top: 10px;"> <input src="/images/store_version1/go.gif" alt="GO" border="0" type="image"></td>


</tr>
</tbody>
</table>
<!-- END SEARCH BUTTON -->

[scrmbledeggs]

well, i tried the code you suggested and it only made the header much longer. now i think the search box and button and label "Search" are all even more spread out. do you know why that might be?

thanks again.

[cbVision]

My apologies, I just whipped something up real quick and tested in in Firefox. It looks better in Firefox, but in IE, it's definitely spread out. You just need to add paddings to the cells and margins to the table to get the correct positioning.