Max Headroom wrote:I'm afraid they're not lined up in either of my regular-sized screens (LCD flatscreen and laptop.)
This sort of positioning is quite tough to do and pretty unpredictable, given the countless screens and resolution settings out there. Best you format your pages using tables that you set at % width. That way, the table will always try to adjust accordingly, albeit not always predictably.
That said, nowadays I reckon the better known companies don't go for the one-size-fits-all website, but prefer to have one regular website and one mobile phone version.
Max, I hope you don't take offence, but please please
DO NOT use tables for layout. There are many many reasons why not - just google "tables for layout" to see. But they bulk up your markup unecessarily, making it more expensive for you to serve, and more expensive for people to use (especially mobile users on 3g), they make it difficult to make future updates, difficult to copy and paste text for users, impossible for search engines to decipher what your content is actually about so will reduce your search optimisation...the list goes on.
Going to take a look at your CSS now and see if there are any easy wins. Often though, things need a bit of an overhaul to get detail like this working correctly. And as a side note, it's probably better to use a completely separate style sheet for ipad. Clicking small areas is easy for a mouse, but tricky with a finger. A lot of websites have simplified versions for mobile use which you may want to consider doing.
Edit: Actually, your code is excellent. Very succinct and tidy mark up and clear CSS. IE has your misalignment issue as well as IOS and Android. Cross browser compat isn't my speciality so don't think I can suggest any fixes on this one. However someone on a tech forum should be able to help you on this without you having to hire someone. Look around for CSS forums and it should be easy for them as your code is so tidy.