CSS and IE bug fixing

This morning I was trying to debug my photo website's homepage slideshow in IE6 and IE7.

The slideshow images were being displayed in the top right hand corner of the page rather than being centred in the page. First I tried to find out how to get the images centred horizontally.

I found this was because I was using text-align: center on the div containing the slideshow images, so the left edge of the image was centred in the page instead of the middle of the image being centred. So removing text-align: center fixed the horizontal alignment.

Next I needed to fix the Vertical alignment. I found that IE was getting a massive figure for the height of the header element, much larger than it should be. Using the IE Developer toolbar I could see the problem was that the empty div I was using the clear the floated navigation in the header. The clearing div was expanding to take up most of the height in the page (this didn't affect layout though, you could only see the height by highlighting it using the IE Developer toolbar).

Giving the clearing div a height of 0 fixed this problem, but the header was still returning a value larger than its actual height. I tried changing the text size to see if the gap between the header and the slideshow images was related to text size or a fixed size. Unfortunately, changing the text size didn't work - I had specified the text size for the navigation and footer in pt, thinking it was only px sized fonts that wouldn't resize, but it seems IE won't resize fonts sized with pt either.

I changed the font sizes to %, which took a bit of trial and error to get the fonts similar sizes to what they were when they were sized in pt. When that was done I tried resizing the font in IE and found that the space at the bottom of the header was a fixed height, and didn't resize with text.

Knowing this, I took a print screen with the navigation (that should be at the bottom of the header) and the element after the header highlighted using the IE Developer toolbar. Then I put the screendump into Photoshop and measured the distance between where the bottom of the header should have been (the bottom of the navigation) and where the bottom of the header actually was (the top of the next element).

I found that the distance was 60px, which was the same amount as the amount of padding-top that the header has. Changing the header's padding-top to 260px, I found that the gap at the bottom of the header (effectively the padding-bottom increased to 260px also.

I did some googling and tried a few things, but didn't get it fixed. Most of the search results for IE double padding seemed to be about padding being doubled in one direction, e.g. you set padding-left to 60px, but get padding-left of 120px, rather than my situation of the padding from one side also being added to the other side of an element.

So I saved a copy of the page in Firefox, then gradually removed code from the saved page and css until I was left with the very basics of the page. I then played around with the CSS a bit more, and found that adding zoom: 1 to the header fixed the double padding problem in IE.

There was still another problem though - In Firefox and Arora there was a bit of padding between the navigation in the header and the slideshow in the content container. Resizing the text again, I found this was a fixed height, so I duplicated the effect in IE by changing the height of the clearing element in the header to 10px.

So far, I had just been fixing up the site in IE7, so I copied the changes across to my IE6 CSS file, and then tested the page in IE6. The slideshow seemed to work okay, but I noticed that the website header graphic was missing. I then checked IE 7, and it was missing there as well. I tried disabling javascript and reverting the CSS changes to the header, but the header graphic was still missing.

The header graphic is absolutely positioned, and it seemed to be this that was causing the problem. Strangely though, if you set the left CSS property of the header graphic in the IE Developer toolbar, the graphic would magically appear, even if you set left to the same value that the graphic already had.

After some more playing with CSS, I found the problem was due to the clearing element in the header being given a height in combination with the header graphic using absolute positioning.

Doing some testing I found that actually I didn't want absolute positioning on the header graphic anyway. I also found the reason for the difference between IE and standards compliant browsers in having a gap between the header the next div. The reason was that the standards compliant browsers were applying some default padding or margin to the header navigation, whereas IE wasn't.

So changing the clearing element's height to 0 in IE, and setting specific padding and margin values for the navigation element made sure the gap between the navigation and the next element was the same cross browser.

After fixing those errors I tested the page in IE6 again, and found that while the header graphic was now showing, it was being cut off on the left hand side (I used a negative left margin on the header graphic).

I did some testing and googling to try and find out what was causing the graphic to be cut off, then it was lunch time.

After lunch I followed the instructions on a page I had found IE6 Negative margin cut off bug, and it worked - I just had to set zoom: 1; position: relative; on the header image.

But then I found that my footer was messed up and was going beyond the bottom of the window rather than sitting just above the bottom of the window. (I'm using Ryan Fait's Sticky Footer Technique). So I spent the rest of the afternoon trying to find out why that was. There were actually 2 reasons - I had an unordered list inside the footer, and this had some default padding/margin on it that was making the footer too tall.

The other problem was that I was setting font-size: 110% on the footer, which was sized in ems. So to fix this I added another div inside the footer, enclosing the footer's contents, and apply the font-size: 110% to this inner div rather than the footer div.

After dinner I finished watching Batman The Movie with L and Moccle, did a bit more website stuff, and watched an episode of Ray Mears with Clare, Brian, and Grandad.

I did a bit more website stuff, but came across an IE CSS problem I couldn't solve, so posted to the web squeeze to try and get some help on it, and then checked the other threads there.

Although I have made quite a few changes to my website today, at the end of the day it still looks pretty much identical to how it did in the morning (bear in mind that it's only presentational issues I've been working on today as well). It's annoying how little you can get done in a full day's work.

The weather today was nice and sunny all day, though windy and cold. Still no frost yet. The time before sunset was quite nice with a golden glow around the sun shining through a veil of thin cloud, but when it actually set it was pretty rubbish with only a very small and faint orange glow.

Food
Breakfast: Orange marmalade toast sandwich; cup o' tea.
Lunch: Peppery sausage, mayonnaise, sliced tomato, crunchy salad, and grated mature cheddar cheese sandwich; clementine; ⅓ piece of home-made flapjack; Slice of Tesco all butter Madeira; Rocky; cup o' tea.
Dinner: Beef pie; gravy; potatoes; brussel sprouts; ground black pepper; parnsips. Pudding was a slice of chocolate swiss roll with tinned mandarins and chocolate custard. Coffee; 3x pieces of Sainsbury's caramel chocolate.