Over the last few days I’ve had the pleasure of having to skin some hosted payment pages, I normally like to do payment processing remotely but this time I was under pressure to deliver this work ASAP.
What should have taken a few hours turned into a day long ordeal of getting browsers to render these pages correctly (I use Browserstack for design testing) and since I had no control of the markup of the actual form elements I had to work with what I had using just CSS.
The good news is I got it looking nice, this company that do the payment processing, Adyen… have used tables to layout their form fields, I hate table layouts and always used CSS frameworks so it took a while to understand how to align tables correctly again using CSS.
The reason for this post? This link: http://theodorakis.net/tablecentertest.html
A detailed post about all the nasty UI issues poor markup with tables can throw at you and how to overcome them using CSS