Well, it appears to be getting better (?), but it seems that Microsoft are still playing by their rules when it comes to web standards. Working on a recent project, I found a curious bug that doesn't seem to be documented, so I thought I'd write about it in case it helps anyone else.
In this particular project, the user is presented with a mock-lightbox effect form which contains a number of options - login/password textboxes, some database-generated text and links to registration pages. The 'mock' lightbox effect was created mainly with CSS, only using JavaScript to play with the opacity. A full height and width div is created, in which sits the main form details. All of this is hidden and overlays the page content on the user's first visit to the page, and if they click a Register/Login link in the navigation.
The background image of the overlay was created with the textbox background on it already - this is because the designer had styled this to not look like a regular input box, so my usual technique is to create a transparent textbox using - background: none; border: 0; and position the elements absolutely within the div so they line up with the background image. The issue came when viewing this in IE8 - certain areas of a textbox were clickable, but others seemed to interact with content that the overlay should cover. This is a major problem if the content is a link - a user tries to click on the username input box, and instead gets redirected to another page!
Having played around with this, the problem lies with the CSS declaration background: none; - I worked around this by removing the textbox parts of the underlying background image in Photoshop, cutting out the input backgrounds separately and setting the background property to reference this new image background: url("../images/imagehere.jpg") no-repeat; - this also seemed to work by setting the background to a solid color - background: #ffffff;
Hope this helps someone - it confused me for a little while, but thanks for the fun, IE8!
