IE8 annoying me possible even more than IE6

Got up this morning about 8.15am and it was cloudy outside. It stayed cloudy and rainy all day. After a shower etc. and breakfast I checked my email, hotukdeals, andy rouse's blog and deviantart.

After that I checked my site on IE8 and first thing I noticed was the layout was broken, the adverts box had quite a large margin on its right hand side, and was overlapping with the content text. This was quite easy to fix though, just by setting a left margin for the advert box. However, I thought IE8 was meant to be standards compliant and would work the same as Firefox, Opera and Safari.

Next I noticed that a checkbox on the login form wasn't aligned with the label text correctly in all the IEs, so I fixed that with a negative top margin. So now I have 5 stylesheets - standard, IE6, IE7, IE8, IE-all. The IE-all sheet is not strictly neceasary as I could put the rule in each of the seperate IE stylesheets, but it makes it easier for me to have an IE-all sheet.

Then I discovered a major problem with my site in IE8 - the lightbox function would just make the screen turn black (rather than darkening the screen and displaying an image). After quite a bit of testing to try and find out why the image wasn't appearing I decided to try and fix the solid black background in case the image was being hidden behind the lightbox background. I did some searching on google for opacity in IE8 and found that you need to either put

filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

or

ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

Both worked for me, so I have used the top one. I found that the image still wasn't apprearing. I did lots more testing and found that even if I applied sizing to the image, its offsetWidth was always 0.

I checked whether my code (including code generated via javascript) validated and it didn't. There were 2 problems - the lightbox image needed to be inside a container, rather than just appended to the body, and it needed an alt attribute. So I fixed this, the page validated, but still the same problem in IE8.

After much messing around, deleting and adding code, writing test pages etc. I finally found the problem was due to the lightbox background having 'position: fixed'. But without 'position: fixed' the background didn't appear at all. So I tried changing the javascript code so that the lightbox background was appended to the document hierarchy after the lightbox image container, and this fixed it - I now had both the image and background appearing in IE8. However, the image wasn't being centred in the screen correctly.

So next I did some messing about with the code trying to fix this problem, and it seems the problem is due to IE8 reporting a very small page height.

I tried the following, and all are very small, much less than the actual page height:

alert('window.innerHeight' + window.innerHeight + '\n'
+ 'document.body.clientHeight' + document.body.clientHeight + '\n'
+ 'document.documentElement.clientHeight' + document.documentElement.clientHeight + '\n'
+ 'window.scrollMaxY' + window.scrollMaxY + '\n'
+ 'document.body.scrollHeight' + document.body.scrollHeight + '\n'
+ 'document.documentElement.scrollHeight' + document.documentElement.scrollHeight + '\n'
+ 'document.body.offsetHeight' + document.body.offsetHeight + '\n'
+ 'document.documentElement.offsetHeight' + document.documentElement.offsetHeight);

The VHD of IE8 came with a developers tools program, which can show you the outline of various elements, so I highlighted the body and it is really small. I guess everything else on the page must be overflowing out of it.
I tried setting the body height to 100%, but it was still really small, it reached to nearly the bottom of the window when you were scrolled up to the top of the page. If I tried highlighting the HTML, this seemed to highlight the whole page. So I tried 'document.body.parentNode.offsetHeight', but this still gave a very small figure (possibly the window height). I did some googling but couldn't see anything about how to get the pageHeight in IE8. You can also see in the above image that IE8 messes up the login form if you scroll the page at all.

Trying to get these things working in IE8 took me from about 9.30am until about 5.30pm. I had a look on the MS webpages about IE8, but couldn't see anything about how near to release the beta2 (which I'm testing on) is meant to be, or when a release candidate or final version will be released.

Something weird I noticed when logging onto Blogger was that it said 'connecting to noetic.org'. No idea why it wanted to connect there, I couldn't see any links to them or anything on the landing page.

After dinner I checked my email and hotukdeals again and then watched an episode of Lost. Then I read various threads and the Pentax 50/1.4 review on dpreview.

Food
Breakfast: Coco pops; orange juice.
Lunch: 2x cheese on toasts; white grapes; satsuma; slice of iced lemon madeira layer cake; chocolate digestive biscuit bar; cup o' tea; Roses.
Dinner: Slice of pepperoni pizza; green beans; chips; salt. Pudding was a small cherry bakewell tart with custard. Coffee; Roses.