Need some help aligning table in IE

Hi guys,

I just added a subscription form on my blog.
www.xytheme.com

However, while it sits fine in Firefox, IE shows that it does not aligned with the theme.

Can anyone teach me how to fix this or how to convert the table to CSS DIV?


Thanks in advance.

<table align="left" border="0" style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; LEFT: 10px; PADDING-BOTTOM: 5px; WIDTH: 180px; PADDING-TOP: 5px; TOP: 15px; HEIGHT: 83px; BACKGROUND-COLOR: #51473b" cellspacing="0">
  <tr><td style="PADDING-LEFT: 5px">
      <p align="center">
  <b><font face="Verdana" color="#ffffff" size="2">Web Proxies Feed</font>    </b></p>
  </td></tr>
  <form action="http://groups.google.com/group/proxywhereabouts/boxsubscribe">
  <tr><td style="PADDING-LEFT: 5px" bgcolor="#51473b">
      <p align="center"><font face="Verdana" color="#ffffff" 
      size=2>Email:</font>
   <input name="email" ><font size="1"> 
      <br></font>
  <input type="submit" name="sub" value="Subscribe"> 
      </p>
  </td></tr>
</form>
</table>

Code (markup):

 

use following :

<table align="left" border="0" style="float:left; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; LEFT: 10px; PADDING-BOTTOM: 5px; WIDTH: 180px; PADDING-TOP: 5px; TOP: 15px; HEIGHT: 83px; BACKGROUND-COLOR: #51473b" cellspacing="0">
  <tr><td style="PADDING-LEFT: 5px">
      <p align="center">
  <b><font face="Verdana" color="#ffffff" size="2">Web Proxies Feed</font>    </b></p>
  </td></tr>
  <form action="http://groups.google.com/group/proxywhereabouts/boxsubscribe">
  <tr><td style="PADDING-LEFT: 5px" bgcolor="#51473b">
      <p align="center"><font face="Verdana" color="#ffffff" 
      size=2>Email:</font>
   <input name="email" ><font size="1"> 
      <br></font>
  <input type="submit" name="sub" value="Subscribe"> 
      </p>
  </td></tr>
</form>
</table>

HTML:

 

You seem to know your stuff, softnmore, but why encourage stuff like this:
<font></font>
or this?

<table align="left" border="0" style="float:left; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; LEFT: 10px; PADDING-BOTTOM: 5px; WIDTH: 180px; PADDING-TOP: 5px; TOP: 15px; HEIGHT: 83px; BACKGROUND-COLOR: #51473b" cellspacing="0">

Code (markup):

First it's aligned left (deprecated), then floated left, then positioned left with left: 10px but without setting a position other than static... I mean, how's anyone to know which command is setting the table left? FF seems better at guessing some of this stuff than IE6, but should they be guessing at all?
Heck, I'd take such a simple form out of the table altogether. But if it works, eh.

Mostly, I see the sidebar being dropped below the main content stuff. Usually IE6 does this because it thinks #container doesn't have enough room for the two to sit side-by-side and drops one. Reduction of width on one or the other boxes, OR having no set with on the main content at all (which stops Haslayout from triggering) often fixes it. You need to add up all the widths, including margins and padding on the sides, and make sure that the total adds up to something less than the total width of the container. IE6 can also add 3 pixels extra space between them or double the margins on the floated element too.

*Edit, softnmore, I can't see what you changed with his code????

 

I dont see any difference between both code?

 

i used "float:left"

 

Duh! I saw it but thought it was also in his code : )

 

[edited]

Thanks softnmore,

It does fixed the mess in IE.
In firefox, the table seems a little outside the panel.
Anyway to fix this?

Thanks in advance.

 

hmm...
remove "PADDING-RIGHT: 5px;" from "table" tag

 

Thank you softnmore!
Rep +