When using LI in IE6, if the LI has hasLayout activated, then the corresponding bullet will be aligned to the bottom of the item instead of the top. Why the devs writing IE6 thought that this would be useful I don’t know. Or perhaps, it’s a bug? The shock of it all.

The solution is to target the LI and to disable hasLayout. The method I used today was this:

li {zoom:0;}

This directly countermands the zoom:1; I had added to other elements to get the page to hang together in IE6.

Now though there appears to be a new and even simpler cure. The problem occurs when you have two floats, and comments between them. The solution I used previously was to remove the comments, but now it appears that another fix is simply to add display:inline to the css rule for the floats. I pretty much do that automatically now, to avoid IE doubling the margin around floats, so it fits right in, and means I can forget about removing comments from my code.

For some reason, I know not why, after making a small change to an html page, IE7 stopped picking up some percentage widths (for floated elements). After a lot of swearing, I found out that sometimes, to even pick up a width, IE7 needs both a min-width and width. As I was using percentages that was not a hassle – so for example the rule

float:left; width: 25.5%;

was having no effect: the width of the element was shrinking down to the width of its content, while on IE6, Opera, Safari and Firefox everything was fine. Adding a min-width thus

float:left; width:25.5%; min-width:25.5%;

Sorted everything out. So now everything’s hunky dory. I’m sure most of you will have known about this and I’m quite surprised I haven’t come across it before. That’s part of the joy of the job, I suppose: after the frustration comes the satisfaction of learning something new and solving a problem.

Sometimes it’s frustrating to be developing a large stylesheet, only to find that part way through for some unknown reason your styles are not being picked up by a particular element. Usually, this is because it is inheriting its style from somewhere else, and it can be a quite a job to go back through the style rules and unpick what is happening.

I’ve just come across a nice little article that explains selector specificity very well, and it’s easy to remember. If you can’t, there’s even a poster you can print out to help you.

Technorati: css web-development

Here are my selections:

• “It’s not going to look exactly the same everywhere…”
• “Longer lead times are inevitable”
• “Working around rendering bugs is like playing Whack-a-Mole”

I think that once clients appreciate particularly the above statements, there will be a new and lasting peace in the website building world.

Technorati: css, standards

Well, if you need a little primer on the why of standards and accessibility, you could do a lot worse than reading some of the articles mentioned in The ALA Primer: A Guide for New Readers.

As a secondary little piece of entertainment, if you don’t need to read the background articles, then have a look at A Standardista’s Alphabet. Might amuse if you’re in-the-know. If you’re not, then read the articles mentioned in the previous link.