Welcome to WebmasterWorld Guest from 54.242.94.72

Forum Moderators: not2easy

Message Too Old, No Replies

IE bullets alignment, and text shift down in nested lists

     

martal

11:07 am on Apr 17, 2008 (gmt 0)

5+ Year Member



I am marking up a set of Community Council minutes. The HTML requires nested lists, with numeric, alpha and bullet markers. It's been difficult to get the spacing right without multiple classes but I have it looking good in Firefox.

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>

Moby_Dim

8:36 pm on Apr 17, 2008 (gmt 0)

10+ Year Member



Hmm... I've tried to play with this puzzle and have some progress with the 1-st element only (became visible). I've enclosed DLs in own divs (a bit less semantic may be but have a result) and made dl width : auto;

martal

2:35 pm on Apr 18, 2008 (gmt 0)

5+ Year Member



Moby_Dim, thanks for playing with my puzzle! If I have to set up divs for each dl, I will go down that route, but there will be many, so I am searching for an alternative.

The fact that the same behaviour is in IR7, as well as the lower browsers, may be encouraging for a solution.

SuzyUK

2:50 pm on Apr 18, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



your lists have a hasLayout problem :( but if you add Layout to the ol elements themselves it makes it worse as that causes the bullets to disappear entirely, and if applied to the li elements hasLayout will cause the numbering/lettering to not sequence.

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]

martal

3:37 pm on Apr 19, 2008 (gmt 0)

5+ Year Member



SuzyUK, that is awesome. I copied directly into my css for the test and it works perfectly in all browsers. I still have to apply it to the real page and there may be some padding stuff which I will overcome, but I now see an end to this.

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!

martal

3:46 pm on Apr 19, 2008 (gmt 0)

5+ Year Member



SuzyUK, that is awesome. I copied directly into my css for the test and it works perfectly in all browsers. I still have to apply it to the real page and there may be some padding stuff which I will overcome, but I now see an end to this. Thanks for your effort.

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!

 

Featured Threads

Hot Threads This Week

Hot Threads This Month