homepage Welcome to WebmasterWorld Guest from 54.167.10.244
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE bullets alignment, and text shift down in nested lists
martal




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

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




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

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




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

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




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

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




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

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




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

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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved