Continuing the development of my home pages, this time to make the main page into a family ‘message board’ I came across yet another Microsoft IE feature. I think it is safe to call this one a bug!
The main page is a standard 3 column with header over. The header is a div with no positioning. The left and right sides are divs, with absolute position, one located at top:120, left:0 and the other at top:120, right:0, both 200px wide.
The centre column (content) is position relative, but with no position specified, so it effectively fixes itself after the header. In order to not overwrite the sidebars, it has left and right margins set to 210px.
Within the content I have various lines set as divs, again as position relative so that they flow down the page. In an attempt to get buttons to edit and add messages to the message board, I attempted to use divs within these lines, with position absolute, top:0 and right:0.
In FireFox this behaves exactly as you would expect, the button sits at the top right of the line, within the margins of the main content. In IE, it sits at the top of the line, but sits at the right of the main page, ignoring the margins of the bounding box. Any attempt to put margins on the lines div, or to position the button at right:210 messes up the FireFox formatting, while fixing the IE formatting.
To get the page working I removed the positioning, which puts it immediately after the rest of the line, ugly but consistent. I’ll work on a solution.