I'm doing a project for IE6 and I'm having trouble with my bullet alignment. The ul bullets sit too high against the text, as though they were super-scripted. I've tried this, that, and the other thing but my CSS skillz are not up to whatever the heck is going on here.
Here's an example:
IE6 is on the left; all other browsers on the right. How do I kick these darn bullets down a bit and make them line up properly?
ul li { display: list-item; list-style-type:disc; vertical-align:text-top; }
Danke.
that is annoying but i'm not sure of the fix. i normally just live with it.
have you tried setting/adjusting your line height?
line-height:
line-height adjusts the height of the entire bullet + text, so it doesn't actually help. :(
Not sure about this 100% but try something like
ul li { display: list-item; list-style-type:disc; vertical-align:text-top; }
<!--[if IE 6]>
ul { position: relative; top:-.5em}
li { vertical-align: top; position: relative; top: .5em} <![endif]-->
I'll give it a shot, Sir.
This is my bible for any list related CSS issues. It should help you out.
I've never before had that problem with lists in IE. I've also never used "vertical-align:text-top;"
Coincidence?
I created a bullet specifically for IE with some whitespace above the bullet... <!--[if IE 6]>
li { list-style-image: url(/joomla15/templates/jackyblakeway/images/pinkbulletie.gif); }
ul { margin: 0px 0px 15px; padding: 0px; list-style-image: url(/joomla15/templates/jackyblakeway/images/pinkbulletie.gif); } <![endif]-->
I use fleen's method too.
Edit - oops, didnt realise the thread was so old.
Thankfully, I've never had to develop for IE 6 since.