Wherever I have bulleted lists on my site, IE7 places the bullets too high, approximately an em’s worth. I want them to be in the middle of the first line of text for that bullet, which is where Firefox, Safari, Chrome, IE8 and even IE6 put them.
In the main style sheet, Dreamweaver reports that the following rules apply to the list item in question:
vertical-align: top !important;
line-height: 1 !important;
The bullets get a little closer to where they belong but not quite.
Worse, the Explore links near the bottom of the page which have superscripts within the list item get cut off at the bottom, which doesn’t happen with a non-overridden main style sheet list-height of 1.5.
I don’t even see your reason for needing to give IE7 special attention with the UL. I mean other than the standard resets on the margin/padding but those are always dealt with in the main CSS and fed to all browsers.
I suspect you have something else in your IE7 CSS that is the cause of your problems. Just strip that IE7 stylesheet out of your page and see what you get.
Here is a bare bones example that shows no problems with the vertical bullet placement in IE7 and all other browsers. IE7 will allow you to adjust the bullet with v-align on the LI if you want it in the middle of the first line of text. But it is not dropping down to the bottom like it is on your page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UL Bullet Test</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: 100%/1.5 arial,helvetica,sans-serif;
}
p {
margin:0;
}
ul {
width:50%;
margin:0;
padding:0 0 0 2em;
}
li {
/*vertical-align:middle; optional for IE7*/
}
</style>
</head>
<body>
<ul>
<li>
<p>Lorem ipsum dolor sit amet consectetuer a accumsan et Donec eu. Donec laoreet
vel hendrerit ligula vitae non accumsan orci sapien nec. Dolor eu neque sem vitae
Nunc Phasellus diam netus Suspendisse.</p>
<ul>
<li>Sub list Item</li>
<li>Sub list Item</li>
<li>Sub list Item</li>
</ul>
</li>
<li>
<p>Lorem ipsum dolor sit amet consectetuer a accumsan et Donec eu. Donec laoreet
vel hendrerit ligula vitae non accumsan orci sapien nec. Dolor eu neque sem vitae
Nunc Phasellus diam netus Suspendisse.</p>
</li>
</ul>
</body>
</html>
It does not like max-width: on the UL or LI and that is what causes the bullet to drop to the bottom when text wraps.
I tore your code down to a bare bones test case (html/css) until I found the culprit. Cutting the rules out one by one I was able to confirm that max-width was the trigger.
You can nest the UL in a div and set your max-width there.
I have never seen this bug before so it will be good to remember this one.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Clipper UL Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 100%;
background-color: #fff;
}
#bodytext {
vertical-align: top;
width: 75%;
padding-left: 1em;
}
ul {
margin: 0;
padding: 0;
}
#bodytext p,
[B]#bodytext ul,
#bodytext li,[/B]
#bodytext h2 {
margin: 1em 1em 1em 0;
[COLOR=Red] /*max-width: 40em;*/[/COLOR]
line-height: 1.5;
}
[B]#bodytext ul li[/B] {
margin-left: 3em;
margin-right: 1em;
[COLOR=Red] /*max-width: 750px;*/[/COLOR]
}
[COLOR=Blue]div {max-width: 40em;}[/COLOR]
</style>
</head>
<body>
<table>
<tr>
<td id="bodytext">
<h2>It’s time to Switch!</h2>
<p>The way to pay a fare on Muni is changing.</p>
<p>The monthly paper passes are transitioning to the Clipper (formerly TransLink®) card and after 30 years
new faregates have replaced the old turnstiles in all Muni Metro stations. New Muni Ticket Vending Machines
have also been installed in Muni Metro stations.</p>
<h2>How do these changes affect fare payment?</h2>
<p>1. Customers will need to get a Clipper card to load their monthly Muni pass. Starting with the <strong>November</strong> pass:</p>
[B][COLOR=Blue]<div>[/COLOR][/B]
<ul>
<li><strong><a href="#">The Muni/BART "A" Fast Pass must be loaded to a Clipper card.</a></strong> Get a Clipper card loaded with the Fast Pass at any of the following locations:
<ul>
<li>Ticket Vending Machine in Muni Metro Stations</li>
<li>Clipper retailer (go to clippercard.com for retailers near you) or</li>
<li>Call 877.878.8883</li>
</ul>
</li>
<li><strong><a href="#">Region Transit Connection (RTC) customers</a></strong><a href="#"> must load their discount pass to their RTC Discount Photo ID card.</a></li>
</ul>
[B][COLOR=Blue]</div>[/COLOR][/B]
</td>
</tr>
</table>
</body>
</html>
