Forum Moderators: not2easy
In all versions of IE, this problem occurs:
A (sub-level) list item has a marker, "a.". This item is a definition list with a title which should sit on the same line as the marker. IE pushes the title down by a line, ie
b.
Housing
Also, the first item, Local Plan, has no marker, and is also shifted down.
Here is the test code, sorry it's lengthy but it is complete for copying.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Test</title>
<style type="text/css">
* {
border: 0;
margin: 0;
padding: 0;
}
body {
text-align: center;
font: 80% Verdana, Arial, Helvetica, sans-serif;
}
#minutesWrapper {
width: 428px;
margin: 0 auto;
margin-bottom: 12px;
padding: 6px;
text-align: left;
background: #F0F8FF;
color: inherit;
}
#minutes {
padding: 20px 6px 6px 6px;
background: #FFFDFF;
color: inherit;
}
ol {
margin-left: 18px;
padding-left: 12px;
padding-right: 16px;
line-height: 1.5;
}
ol li {
font-size: 14px;
font-weight: bold;
padding-bottom: 6px;
}
ol ol {
margin: 0;
padding: 0;
padding-top: 0;
list-style-type: lower-alpha;
}
ol ol li {
padding-top: 0;
padding-bottom: 6px;
font-size: 12px;
font-weight: normal;
}
.matters {
padding-top: 5px;
padding-bottom: 6px;
font-size: 13px;
font-weight: bold;
list-style-type: none;
}
ol ol ol li {
padding-top: 0;
padding-bottom: 0;
font-weight: bold;
}
ol ol ol dl {
padding-top: 0;
padding-bottom: 0;
font-weight: normal;
}
ol ol ol dt {
margin: 0;
padding: 2px 0;
font-weight: bold;
}
ol ol ol dd {
margin: 0;
padding-top: 0;
padding-bottom: 6px;
}
</style>
</head>
<body>
<div id="mainWrapper">
<div id="minutesWrapper">
<div id="minutes">
<ol>
<li>Minutes
<ol>
<li class="matters">Matters
<ol>
<li>
<dl>
<dt>Local Plan</dt>
<dd>The Community Council members</dd>
<dd>A letter of acknowledgement</dd>
</dl>
</li>
<li>
<dl>
<dt>Housing</dt>
<dd>contents</dd>
</dl>
</li>
</ol>
</li>
</ol>
</li>
<li>Correspondence</li>
<li>AOB</li>
</ol>
</div>
</div>
</div>
</body>
</html>
The fact that the same behaviour is in IR7, as well as the lower browsers, may be encouraging for a solution.
anyway full CSS is below as I tweaked some margins and padding to simplify things and fix some other alignment issues. I've commented the main ingredients needed to tame IE and keep your look.
1. trigger hasLayout=true on the nested dls
this brings back the top bullet, and stops IE moving down a line space - but it also misaligns all the bullets to the bottom
2. add vertical-align: top; to the li's to get the bullets to go back up to the top again
- this brings the bullet too far up IE right to the top of the <li>
3. don't use line-height on the li's - space them using margins (not padding)
4. get the benefit from the line-height apply it directly to the dd element.
* {
border: 0;
margin: 0;
padding: 0;
}
body {
text-align: center;
font: 80% Verdana, Arial, Helvetica, sans-serif;
}
#minutesWrapper {
width: 428px;
margin: 0 auto;
text-align: left;
margin-bottom: 12px;
padding: 6px;
background: #F0F8FF;
}#minutes {
padding: 20px 6px 6px 6px;
background: #FFFDFF;
}ol {
padding: 0 16px 0 30px;
font-size: 14px;
font-weight: bold;
}ol ol {
padding: 10px 0 0 0;
font-size: 12px;
list-style-type: lower-alpha;
}ol ol ol {
padding: 0;
}ol li {
margin: 0 0 10px 0;
vertical-align: top; /* force bullet to top for IE */
}li.matters {
background: #dad; /* temp color added for visual */
font-size: 13px;
list-style-type: none;
}ol ol ol li {
background: #cfc; /* temp color added for visual */
margin: 6px 0; /* don't use padding or bullet misaligns */
}
ol dl {
width: 100%; /* trigger hasLayout for IE up to 7 */
font-weight: normal;
}
ol dt {
font-weight: bold;
}
ol dd {
line-height: 1.5; /* move line height to here from the li elemnts to use it but help bullet alignment to dt */
}
-Suzy
[edited by: SuzyUK at 2:52 pm (utc) on April 18, 2008]
I knew the page wouldn't be easy but I got a good layout in Firefox. Then I tested in IE . . . :(
Moby_Dim, clink a glass to SuzyUK!
I knew the page wouldn't be easy but I got a good layout in Firefox. Then I tested in IE . . . :(
Moby_Dim, clink a glass to SuzyUK!
