positioning the list-bullet in IE/win

problem – in IE/win:

The list-items above have a width, acting as a 'hasLayout' trigger in IE/win and ruining the vertical positioning of bullets in an unordered list in all versions of that browser. This is just one of the many failures caused by IE/win's hasLayout bug.

potential solution – for IE/win:

Here's 'vertical-align: top' and element-offset used to correct this, and fix the bullet's vertical position so it'll always line up with the first text-line in the list-item.

CSS targeting IE/win only:

@media screen {
/* offsetting the entire ul down */
* html ul.corr { /* IE6 */
position: relative; 
top: .5em;
}
*:first-child+html ul.corr { /* IE7 */
position: relative; 
top: .5em;
}

/* offsetting each li back up*/
* html ul.corr li { /* IE6 */
vertical-align: top; 
position: relative; 
top: -.5em;
}
*:first-child+html ul.corr li { /* IE7 */
vertical-align: top; 
position: relative; 
top: -.5em;
}
}

The @media wrapper is there mainly to keep old IE5/Mac from seeing any of the IE/win corrections. No need to disturb an old, buggy, weak, and obsolete browser on Mac-OS, just because its much younger counterparts on windows are at least as bad.

What happens in IE/win is:

potential failures:

Decorating the list with backgrounds and borders and whatever, may make this offsetting-solution look pretty odd in many ways in IE/win, so I can think of many a case/design where it simply won't work.
Just look at the following, in any version of IE/win …

The above is not causing problems if one only decorates the <li>, but the offsetting makes line-up with any <ul> decorations nearly impossible.

If list-decoration becomes a problem, then one simply has to forget this “positioning the list-bullet” method, delete the 'hasLayout' triggering 'width' on the <li>, and add an extra wrapper-element around the list for controlling the width.