HTML Tables -> CSS transition problems

[yuppie]

Initial URL: http://www.teamtesting.com (TABLES)

I decided to rewrite all the pages in my portal without tables using CSS.
Here is a draft version of the index page:
http://www.teamtesting.com/tmp/index.jsp

Now the problems:
1) A login form on the left side of the page looks differently in IE and FF. The way it looks in IE is alright, and I expect the same behaviour in FireFox, but unfortunately I got form's bottom image shifted as well as the top border of the form's top image Any ideas on why it happens?
2) How to insert textual data/input fields into the login form without form's left and right images being shifted (as you see I use float:left and float:right for left and right border images of the form)? Could you please provide a snippet from my sources, where you add some text inside the form (inside 4 images around).

P.S.: this is my first serious CSS experience, so I would appreciate if you give me some hints/guidelines, if I'm doing anything wrong.

Thank you very much,
yuppie.

 

[Luc]

Bump for you. I had similar issues with IE/FF differences. Even Opera seems to show the sites properly but FF always messes up some minor details.

Bump for someone who knows CSS well, or I might have to go out and get me a book.

 

[Coreycyberdesig]

HMM Interesting

Hmm nice design let me take a look and see if I can assist.

 

[Dan]

                    <div style="float: left; height: 151px;"><img src="form2.jpg" border=0 alt=""></div>
                    <div style="float: right; height: 151px;"><img src="form3.jpg" border=0 alt=""></div>

Make that into 1 div with a background image of what both of those would normally be.