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.
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.
@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.
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.