IE6 was absolutely atrocious, standards-wise. There are (as I’ve already said once today) entire sites out there devoted to telling coders how to fix its mistakes. I haven’t used IE7 very much, mostly because I haven’t needed to see how things look in different browsers for a while, but I do know that they had the opportunity to fix a lot of the CSS problems in IE6 but instead left them in and just removed the fix for them. Thanks guys, much obliged.

My specific complain this time stems from the lack of pseudoclass recognition. For accessibility reasons, menus on sites should be unordered lists that you style to look nice: it’s how it’s done both on the main CIRRIE site and on the other conference site I’ve coded (though the latter is more obviously a list). Using display:inline you can also have a navbar at the top, like on my Baby Names project.

The problem is that adding brackets around each item looks nice but disrupts the natural flow of the words. It’s become my standard method but only because
the real way — #menu ul li:before {content:”["} #menu ul li:after {content:"]“} — doesn’t work in either modern version of Internet Explorer.

This was a rant, though not a particularly eloquent or timely one. It’s just damn frustrating when the developers of the most used browser seem insistent on ignoring the rules. (As an aside, the earlier blog post I linked to was also complaining about pseudoclasses; heh)

I also realized that I could learn WordPress by messing with his site, then use what I knew for my own. The problem with my web efforts is that historically I want to do things but have nothing to put up. Dave is always the visionary in our team, while I take on the practical matters of getting it done, so it was a good match.

As I explained CSS to him, I came to a point where I needed to use the * html hack for Internet Explorer (I’d like to link to an explanation of exactly what this is, but just try searching Google for “* html” and see what kind of results you get). I used a diagram of the Box model and finally got to that mythical box outside of the html tag. What follows is our conversation:

Dan: But Internet Explorer, it has this box outside the html box. It doesn’t have a name… it’s just something.
Dave: …What?
Dan: IE believes in this higher power, outside what we know. It doesn’t have a name, we can’t see it, but IE has faith it’s there.
(pause)
Dan: Internet Explorer believes in God.

Then today we were looking at a problem where the sidebar had white above it in IE but not in Firefox. I noticed I had put a margin-top on everything, then used :first-child {margin-top:0} to take it away on the first list. It turns out I didn’t need a top margin (it actually gave too much whitespace), but I realized the problem lay in IE6′s refusal to recognize pseudoclasses that aren’t a:hover. As I explained to him:

Dan: I took out the top margin in the first child, but IE doesn’t recognize the first-child pseudoclass.
Dave: I see. So it knows there’s a God, but it doesn’t recognize its children.