HTML - Alignment Issues In Table Layout.

Hello, I just made my new site for my company and I tried to keep it extremely simple. I used wordpress to do the basic layout automatically and made some simple edits with some basic html i picked up along the way this week. There seems to be two problems though:


1) the form is inside a table which doesnt seem to align properly within any of the popular browsers (firefox/IE/chrome) .... it should look like 1 image instead of 3 separate pieces

2) i eventually got the form to align slightly better but the spot where I "Enter my zip code" doesnt align with the background image behind it.....sometimes it doesnt even say "enter zip code" which is very bad for a user experience. in firefox it doesnt say it, but in chrome it does say it....either way, both are aligned very poorly.....


I put my code into this site:
http://w3schools.com/html/tryit.asp?...=tryhtml_intro

...and after editing it, i've come to find that it works perfectly within that html editor and looks exactly how i want it to look. but then when i put the code back into my wordpress site, the alignment messes up again......

so i did some research and found out that wordpress has "deprecated" some of the html tags and that they dont work anymore...if i understand correctly. so now i have to find a way to pick new tags or use CSS...this is just so confusing and i thought maybe somebody here might be able to offer me some assistance to help me fix up this form/table problem.

my site's url is:
http://www.allautoinsurance.org

my code that I'm editing is on the right sidebar, where the alignment messes up:

<div style="text-align: center;"><span style="font-size: 14pt; font-family: Georgia; color: rgb(0, 0, 0);"><span style="font-size: 14pt;"><span style="font-size: 14pt;">Our free online service instantly browses the best rates in your zip code area at the click of a button. We've helped thousands of people quickly and easily save money on their auto insurance:</span></span></span><br />
<br />

<form action="http://network.mossaffiliatemarketing.com/z/61/CD62/&subid3= "method="post">
<table border="0" cellpadding="0" cellspacing="0" width="225">
<tr>
<td colspan="2"><img src="http://www.allautoinsurance.org/wp-content/uploads/2009/08/top.jpg"></td>
</tr>

<tr>
<td class="background1" valign="middle" height="54" width="153">
<style>
.background1 {
background-image: url(http://www.allautoinsurance.org/wp-c...tom_left.jpg);
background-repeat: no-repeat;
}
</style>

<input type="text" name="subid1" value="ENTER ZIP CODE" style="margin-left:30px; margin-bottom:5px; width:110px; border-width:0px; font-size:14px; font-family: Arial, Helvetica, sans-serif;" onClick="javascript:this.value='';">
</td>
<td>
<input type="image" src="http://www.allautoinsurance.org/wp-content/uploads/2009/08/bottom_right.jpg"></td>
</tr>
</table>

</form>

</div>
<div style="text-align: left;"><span style="font-size: 12pt;"><span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 1)</span> Input your zip code and click the button above to begin browsing the auto insurance providers in your area</span></span></span><br />
<br />
<span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 2)</span> Select the auto insurance provider you're most comfortable with by clicking their picture<span style="font-weight: bold; color: rgb(255, 0, 0); font-size: 12pt;">&nbsp; </span></span></span></span><br />
<span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(255, 0, 0); font-size: 12pt;">Warning</span>: Dont <span style="font-style: italic; font-size: 12pt;">always </span>go with the cheapest in the area</span></span></span><br />
<br />
<span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 3)</span> Continue with the providers process if they meet your requirements</span></span></span></span><br />
</div>
<div style="margin-left: 40px;"><span style="font-size: 10pt; font-family: Georgia;"><span style="font-size: 10pt;"></span></span></div><span style="font-size: 10pt; font-family: Georgia;"><span style="font-size: 10pt;"><br />
<span style="font-size: 12pt;">***We've been showing people how to get insurance quickly and easily for years.&nbsp; We respect your privacy, it is just as important to us as it is to you.</span></span></span>



.....thanks for any help, i really appreciate your time and effort. if this code doesnt look smart at all its cuz i used some free WYSIWYG editor to generate it. i actually am very confused lol. thanks again.
Best,
Kyle P

I am new to the world of web design and i am building http://www.bluephoric.com
i am using a bg image on two of the pages and it is throwing off the header alignment. the header jumps around depending what page you are on? i am soo lost as how to fix this. can someone please help thanks

The Image of the guy on this page ( http://www.kaerumusic.com/2011/06/13/jay-chou/ ) is coded like this:
HTML Code:

<img src="http://i139.photobucket.com/albums/q303/froggirl003/KM%20Pix/6962_jaychou.jpg" alt="" width="200px" height="280px" align="left" />

But I want the text after the description (the tabs) to be after the picture. How to do this?

hello all, I've recently ventured back into html and css after an extended break and was wondering if I could run this past someone:

If you visit www.pcclinic-loanhead.co.uk, when you click on each of the menu links you will find that the page alignments don't seem to synch. What is strange is that the Home and Contact pages share the same alignment whilst Services and Epson share another. I've scanned the HTML and can't see any obvious differences.. there is also a main.css attached to each page.

Can anyone with an expert eagle eye take a look at this and a) verify that you see the same problem and b)if possible, suggest a solution?

Thanks very much in advance.
Sam

G'day guys,

I'm having trouble getting my submit button aligned to the right edge of the textarea above it.

Could you please tell me what I'm doing wrong, (still a bit raw when it comes to CSS).

Here's the link:

http://csusap.csu.edu.au/~jpress03/impel/contactus.html

Here's my CSS code:

Code:

#frmwrap	{
border: 1px dashed #8DBA2C;
padding: 10px;
width: 350px;
}
form	{
font-family: Arial, Sans-serif;
}
input, textarea {
	border: 1px solid #gray;
	font-family: Arial, Sans-serif;
}
label {
	display: block;
	float: left;
	width: 100px;
}
form div {
	margin-top: 3px;
}
.button {
	background: #f1f1f1;
	border: 1px solid gray;
}

Any help is greatly appreciated.

Cheers,
Jamie