PDA

View Full Version : IE / Firefox show forms differently??


richhemmings
05-25-2006, 07:34 PM
Hi, I'm a slight newbie at this....

I'm making a site aimed at selling a product.
Basically, I have a bit of generated code from PayPal, that starts <form>.
I have put it on my navigation bar, with other buttons that start <img src...
When I load the page in Firefoz, all is well, but in IE the PayPal button is higher than the other buttons?
I tried resizing the cells, and it appears that the problem is something to do with the PayPal code?

The only way round it I've found is to surround the images in <form>...</form>, but this pushes them all to the top of their cells, and I'd rather they were centeralised in both Firefox and IE.

Here's the full code....



<td width="15%" height="40" align="center" valign="middle"><form>images/design/Buttons/Home.png (#)</form></td>
<td width="15%" align="center" valign="middle"><form>images/design/Buttons/Products.png</form></td>
<td width="15%" align="center" valign="middle"><form>images/design/Buttons/Postage.png</form></td>
<td width="15%" align="center" valign="middle"><form>images/design/Buttons/Contact Us.png</form></td>
<td width="15%" valign="top"></td>
<td width="15%" align="center" valign="middle"><form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="1stclasstrading@mail.com">
<input type="image" src="images/design/Buttons/VBasket.png" border="0" name="submit" />
<input type="hidden" name="display" value="1"></form></td></tr>
</table></td>




Any help greatly recieved!
Cheers,

Rich Hemmings

domedia
05-25-2006, 08:12 PM
Rmember that many block level items have default margins. <form> is one of them.
Setform {margin: 0; padding: 0;} to start with in your stylesheet and add from there. If you add with pixels, the output should be the same crossbrowser.
Might be an idea to set the images inside the forms to bolock elements, I usually do so I know there no space around them:
form img {display: block}

richhemmings
05-26-2006, 07:34 AM
Worked great.


Cheers!
:D :D :D