CSS (Sucks)
Thursday 24th April, 2008 13:34 Comments: 3
I've finally got my site to look the same in Firefox 2, Internet Explorer 7 and Internet Explorer 8 Beta 1 (and it works fine in IE5/Quirks mode; although the text is bigger). Some of the quirks I've noticed:
Horizontal rules were a bit weird, I ended up removing them and adding a border to the top of the div tag that was beneath it.
The border-bottom in one place didn't show up in IE8, I think it has something to do with the box model (maybe hasLayout/margin problems?), but I didn't work out a way to fix it properly for all browsers. In the end I removed it, which wasn't what I wanted to do, but it'll have to do for now.
The form for entering comments in IE7/IE8 had too much whitespace above and below, especially compared to Firefox. It turns out, thanks to the Developer Tools, that for some reason IE adds a default margin to the top and bottom (but not the left and right) of the form element. Simply set the form's CSS to say something like "margin: 0;" and all is well again (or at least more consistent between browsers).
I also turned off the border in the same way on the textarea element, which IIRC had a default of 1px, which sorted out my scrolling problem in IE if I set the textarea's width to 100%. Now it should look the same as Firefox (no more 99% :D).
EDIT: It appears to work fine in Opera 9.50 too.
Horizontal rules were a bit weird, I ended up removing them and adding a border to the top of the div tag that was beneath it.
The border-bottom in one place didn't show up in IE8, I think it has something to do with the box model (maybe hasLayout/margin problems?), but I didn't work out a way to fix it properly for all browsers. In the end I removed it, which wasn't what I wanted to do, but it'll have to do for now.
The form for entering comments in IE7/IE8 had too much whitespace above and below, especially compared to Firefox. It turns out, thanks to the Developer Tools, that for some reason IE adds a default margin to the top and bottom (but not the left and right) of the form element. Simply set the form's CSS to say something like "margin: 0;" and all is well again (or at least more consistent between browsers).
I also turned off the border in the same way on the textarea element, which IIRC had a default of 1px, which sorted out my scrolling problem in IE if I set the textarea's width to 100%. Now it should look the same as Firefox (no more 99% :D).
EDIT: It appears to work fine in Opera 9.50 too.
Sadie - Thursday 24th April, 2008 15:01 I've noticed a few areas where IE8 beta seems to ignore perfectly normal things I tell it to, particularly in relation to vertical-align: middle. At this point I'm waiting for a subsequent beta before I judge, because there's no point tweaking things if there's a chance it'll be fixed (if it isn't fixed, I'll be very disappointed, because it's clearly wrong).
IE8 doesn't like an element to have both a background colour and a background image. Splitting these up into separate elements solved the problem. So for example, a blue box with rounded corners was achieved with four nested divs:
...
.div1 { background: blue url(...) top left; }
.div2 { background: url(...) top right; }
.div3 { background: url(...) bottom left; }
.div4 { background: url(...) bottom right; padding: 6px; }
This has now become:
.div0 { background: blue; }
.div1 { background: url(...) top left; }
.div2 { background: url(...) top right; }
.div3 { background: url(...) bottom left; }
.div4 { background: url(...) bottom right; padding: 6px; }
Similarly, splitting the padding into yet another .div5 can help overcome other problems. This approach I've found helpful in quite a few cases.
Having no border on this input area feels very strange.
IE8 doesn't like an element to have both a background colour and a background image. Splitting these up into separate elements solved the problem. So for example, a blue box with rounded corners was achieved with four nested divs:
...
.div1 { background: blue url(...) top left; }
.div2 { background: url(...) top right; }
.div3 { background: url(...) bottom left; }
.div4 { background: url(...) bottom right; padding: 6px; }
This has now become:
.div0 { background: blue; }
.div1 { background: url(...) top left; }
.div2 { background: url(...) top right; }
.div3 { background: url(...) bottom left; }
.div4 { background: url(...) bottom right; padding: 6px; }
Similarly, splitting the padding into yet another .div5 can help overcome other problems. This approach I've found helpful in quite a few cases.
Having no border on this input area feels very strange.
As you say, there's no reason why the first version shouldn't work properly. I've noticed Microsoft's (admittedly legacy) documentation seems to contradict a lot of the IE8 things that are going on, which isn't much help for developers that are hitting these sort of quirks. Do we just try things until they work? Or wait until a better beta comes out, along with some relevant documentation? Also, even with IE8 set to emulate IE7, Google Maps still doesn't work properly, for no good reason.
Even stranger is how the text is right up against the edge of the text area, I might see about switching the font to Verdana (to match what you'll see when the comment has been posted) and if I can add some padding. I'd turn the border on, but then you get the additional pixels in IE (which is only fine if you don't use IE :P).
Even stranger is how the text is right up against the edge of the text area, I might see about switching the font to Verdana (to match what you'll see when the comment has been posted) and if I can add some padding. I'd turn the border on, but then you get the additional pixels in IE (which is only fine if you don't use IE :P).
I've managed to fudge it a little, by surrounding the textarea with a div tag. It's not a perfect solution, but it works. Basically, the textarea is the wrong width in IE if the border is set to anything except 0 (or none). I could perhaps add a thicker border to the surrounding div tag at some point and remove the padding, so it looks like the border's on the textarea, and no one will know it's really on the div.
EDIT: Eventually I might rewrite the form so that it supports AJAX, so you don't have to reload the page to see your comment (a bit like the Wall on Facebook). One day I'll even write a script to sort out the dates of older content and ditch some of the old designs (I think, once the new date fields are generated, I could present everything from January 2005 onwards in a single XHTML 1.1 design).
EDIT: Eventually I might rewrite the form so that it supports AJAX, so you don't have to reload the page to see your comment (a bit like the Wall on Facebook). One day I'll even write a script to sort out the dates of older content and ditch some of the old designs (I think, once the new date fields are generated, I could present everything from January 2005 onwards in a single XHTML 1.1 design).