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.

I come across this problem all the time, as you can probably imaging, and my solution is to have a base css file that I then modify and extend for every project. Doing that largely eliminates inconsistencies, or at least makes inconsistencies consistent project after project.

Eric Meyer’s ‘CSS reset’ stylesheet has been knocking around for some time, and is a useful resource to use or just to look at and understand why he’s done what he’s done. Anyway, he’s now given it a permanent home on his site, so there’s somewhere to check back for updates.

http://meyerweb.com/eric/tools/css/reset/

Here it is in full…

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

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.