HTML issues

I thought I was almost done with an alpha version of my website - I thought I had all the tricky javascript bits done, and just had to do the mundane html stuff. Not so.

The most annoying thing is how Firefox and IE do things differently, The second most frustrating thing is that vertical settings seem to affect the horizontal view!

Firefox vs IE: in Firefox, you need to add some padding to the iframe height when you resize it, otherwise (for some unknown reason - this is another example of the horizontal-vertical interaction) you get horizontal scrollbars showing up in your iframe. In Firefox, this padding goes after the very bottom line of pixels (eg. at the bottom of the 'p' in the word 'padding'), and takes on the background colour of the page, or, if it isn't specified, the background colour of the parent page. In IE, padding gets added automatically, but forms part of the height of the iframe, so that if you have an image you get 4 pixels added to the bottom, but if you have text the 4 pixels form the bottom 4 lines of pixels - so if you subtract it, you don't get the bottom 4 pixels of the 'p' in the word 'padding'. And these 4 pixels take on the background color of the page, but if it isn't specified, the background is white instead of the background color of the parent page. And don't even ask me how it might work in other browsers .... !

Vertical vs Horizontal: this one's really weird, and seems to be IE only, since it worked fine in Firefox. Say you have a table, with size 90% of the page, with 3 columns. The size of the first two are fixed, in pixels, while the third isn't. So this 3rd column takes up the rest of the table width (assuming there's something in it: otherwise, it takes up the rest of the table width if the table has a border; if the border is set to 0, the last column just doesn't appear at all and the other columns are sized equally across the width of the table). This works fine. But, try setting the vertical alignment of the cells to "bottom" - suddenly, all three columns are sized equally across the width of the table,as if the width parameter is totally ignored! This is just totally bizarre.

So all in all, it doesn't bode well for my vision of a page that will look something like a tab-control, since I can't get the bottom of the tab images to sit flush with the top of the table.
The more I try to do anything other than totally basic HTML, the more I hate it. There are odd, unpredictable interactions, and the way different browsers interpret the html is totally non-standard. And as soon as you try to do anything vaguely dynamic in IE, you get security warnings (yes, I know you can configure the security options - but how many people browsing the web have, and how many will, or should, click on "allow the blocked content" just for your website?). And the editors all suck - they're really just a gui that inserts the html for you, rather than being designers that let you specify the look and behaviour for your page and then figure out for you how to achieve what you want. You still need to know too much about html and javascript, and the differences between browsers.