homepage Welcome to WebmasterWorld Guest from 54.161.246.212
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
spacing IE7 problem with nested ul li ul li
zollerwagner

10+ Year Member



 
Msg#: 3571286 posted 7:54 am on Feb 11, 2008 (gmt 0)

I'm using Textpattern for a CMS. At the top of some pages, I use a plugin to create a table of contents using the headings on the page.

The HTML produces nested unordered lists, like this:

<ul class="toc">
<li><a href="#1">first level: title 1</a></li>
<li><a href="#2">first level: title 2</a></li>
<li><ul>
<li><a href="#3">second level: title 3</a></li>
<li><a href="#4">second level: title 4</a></li>
</ul></li>
<li><a href="#5">first level: title 5</a></li>
<li><ul>
<li><a href="#6">second level: title 6</a></li>
... etc.

In Firefox, it's rendered well.

In IE7 there is a huge vertical space between the first level li and the second level li. (The rest of the spacing is fine.) I've tried several ways in the CSS to reduce the space but haven't gotten any response.

What controls that spacing?

I thought it would be:

  • ul.toc margin-bottom and padding-bottom,
  • the second level ul's margin-top and padding-top, and
  • the first li's margin-top and padding-top.

Even setting padding and margins to 0, the space is still there.

Maybe I'm writing my selectors incorrectly?

#center ul.toc
#center ul.toc ul
#center ul.toc ul li

Is there a CSS solution to this?

 

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 3571286 posted 9:41 am on Feb 11, 2008 (gmt 0)

You could try increasing the specificity [webmasterworld.com] of your CSS rules...

#center ul.toc 
#center ul.toc li ul
#center ul.toc li ul li

Also, do you have any rules governing margins/padding on your anchors?

robsoles

5+ Year Member



 
Msg#: 3571286 posted 10:10 am on Feb 11, 2008 (gmt 0)

Hey Zollerwagner,

in case you haven't strayed across it yet, an excellent place to see before you post a problem like this is [webmasterworld.com...] by SuzyUK, guide to troubleshooting CSS with a preface on posting and I think it's a beauty.

I don't think you should try to put a <ul> inside a <li>, when I tried your HTML snippet alone in a browser with the extra <li>s removed in both MSIE and FF it had no 'silly space'. Here's something you can copy and paste into a text editor, save as whatever.htm and open with your browser:

<html>
<head>
<title>Tester</title>
</head>
<body>
<div align="center">
<ul class="toc">
<li><a href="#1">first level: title 1</a></li>
<li><a href="#2">first level: title 2</a></li>
<ul>
<li><a href="#3">second level: title 3</a></li>
<li><a href="#4">second level: title 4</a></li>
</ul>
<li><a href="#5">first level: title 5</a></li>
<ul>
<li><a href="#6">second level: title 6</a></li>
</ul>
</div>
</body>
</html>

Looked neato to me, natural behaviour of the browser not to pad and margin the <a>nchors anymore than their 'main' container/parent is - as far as I can tell anyway.

Also, 'center' may be a poor choice for an 'id' selector, it might be considered a reserved word because you can assign it as a value to certain properties. I wrapped your HTML in a centering <div> because I figured you must want it centered?

I might add that I'd select the lot so;

ul.toc { /* busyish */ }
ul.toc li { /* busyish */ }
ul.toc ul { /* busyish */ }
ul.toc ul li { /* busyish */ }

mmmh, hope it looked real pretty by the time I was finished being busyish, further:

ul.toc li a:hover
ul.toc ul li a:hover

etc etc and you need only name one wrapping class in a parent element in the document and you can nail all the 'children' it happens to have this way. Though there is probably perfectly good advice somewhere about not trying to reach too deep from parent to child of child of child of child so to speak.

Regards,
robsoles.

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 3571286 posted 10:35 am on Feb 11, 2008 (gmt 0)

I don't think you should try to put a <ul> inside a <li>...

@robsoles... You can't place a <ul> directly inside another <ul> as you have done in your example - as this is not valid HTML! If you are going to have a nested list, then the <ul> must go inside an <li>.

There are possibly some superfluous <li>'s that could be removed, but this is to include the <ul> within the previous <li>. But if this is generated from the CMS it may not be configurable?

<ul class="toc"> 
<li><a href="#1">first level: title 1</a></li>
<li><a href="#2">first level: title 2</a>
<ul>
<li><a href="#3">second level: title 3</a></li>
<li><a href="#4">second level: title 4</a></li>
</ul></li>
<li><a href="#5">first level: title 5</a>
<ul>
<li><a href="#6">second level: title 6</a></li>
...etc.

robsoles

5+ Year Member



 
Msg#: 3571286 posted 10:45 am on Feb 11, 2008 (gmt 0)

fair enough penders, entirely my bad for just enjoying results and not validating it. I won't check now and so just take your word for it - couldn't be bothered! DOCTYPEing it for such a short exercise and didn't check DOM in Firefox before going off all half cocked like a bit of a faulty gun.

I'm glad to have it thrust back at me, I see your correct usage of the bullet point I Ko'd by becoming illegitimate.

Thanks,
robsoles.
Ps. I don't check because it entirely makes sense that you shouldn't have items in an <ul> unless they are contained as a <li> and I spot the anchor after the <li> that contains the <ul> and feel like slapping my forehead and saying 'oh duh' with red cheeks...

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 3571286 posted 11:12 am on Feb 11, 2008 (gmt 0)

I'm glad to have it thrust back at me, I see your correct usage of the bullet point I Ko'd by becoming illegitimate.

No worries ;) But you are probably on the right lines - that extra bullet point (li) could well be the cause of the problem.

Without the sub heading text, you could well be seeing a blank line?

<ul class="toc"> 
<li><a href="#1">first level: title 1</a></li>
<li><a href="#2">first level: title 2</a></li>
<li>Sub heading1<ul>
<li><a href="#3">second level: title 3</a></li>
<li><a href="#4">second level: title 4</a></li>
</ul></li>
<li><a href="#5">first level: title 5</a></li>
<li>Sub heading2<ul>
<li><a href="#6">second level: title 6</a></li>
... etc.

robsoles

5+ Year Member



 
Msg#: 3571286 posted 11:52 am on Feb 11, 2008 (gmt 0)

Thanks penders, and yes, zollerwagner was seeing a blank line with a dot on it, from what his original snippet did for me.

I didn't close the leading un-ordered list before closing it's parent in my snippet either, just to beat anyone else that might be paying attention. Thanks for leaving me something penders, I'm betting you spotted that too!

I should probably ask you zollerwagner if any of this has helped yet? I followed penders' link and it is some pretty good stuff about nailing down the element or specific groups of elements.

I'll just step out of forum topic for a sec, so to speak:

just on mention of CMS; I've only dug to (near) the bottom of Joomla, I haven't tried Textpattern - has anyone watching tried both I wonder?

Joomla's terribly extensible with lots of free support and if you can cope with PHP you can do some pretty hoopy stuff with it, even if you can just manage a little HTML and CSS you can make a very personalised site.

Regards,
robsoles.

SuzyUK

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



 
Msg#: 3571286 posted 11:07 pm on Feb 11, 2008 (gmt 0)

robsoles, your reasoning is absolutely correct IMVHO and thanks for the reference to that T/Shooting post, it still holds true yet. There is a point in there that says to get any menus/effects working in a separate page before incorporating them in the design and zollerwagners posted code shows that no matter the application (textpattern/wordpress/my-home-page) that this is still true. It will be no surprise that it is IE as per usual.. this "bug" is actually an IE5 bug revived by IE7 :o

It's not actually a new bug, even though it's back in IE7, it is the infamous "whitespace in lists" problem and while penders is correct that the problem would not occur if there was actually some text in the parent <li> technically speaking it should not matter.

A <ul> is allowed to be nested in an <li>, that's a given, and if that <li> has no inline content box, even an anonymous inline box, there should be no height to it which means that zollerwagners code should display properly (as per FF etc..). BUT this is where IE has always gone wrong with lists and what causes the "Whitespace in Lists" problem in the first place, IE will give default line-height to an "anonymous" inline box even when it's empty (and make it into a anonymous block box at the same time, so anything following starts a new line with space above it!) e.g. whitespace or HTML whitespace both of which are wrong as an inline element should not get height at the best of times! and what is creating the anonymous box's line-height?

In all fairness & regards the OP I would say it's a nesting error, albeit an informed one, (most close the <li> without opening a new one) - but zollerwagner you have no need to open a new <li> simply to nest a child <ul> if you do you are making it an orphan) - You should just not close the parent item until after the child is entered.. (would post a sample but my right click menu just did something weird)

- sorry for long winded post but everyone is right here, 'cept IE! but if IE had originally supported li:hover then perhaps this particular HTML rule would have been clarified sooner?

[edited by: SuzyUK at 11:11 pm (utc) on Feb. 11, 2008]

robsoles

5+ Year Member



 
Msg#: 3571286 posted 11:48 pm on Feb 11, 2008 (gmt 0)

Thanks Suzy, people who reject extra information are like people who reject the idea that they could have erred - not likely to learn.

I insist on learning. Please, long wind away...

Rob.

zollerwagner

10+ Year Member



 
Msg#: 3571286 posted 2:59 am on Feb 12, 2008 (gmt 0)

Very interesting! Thanks for all of the very thoughtful replies.

I have set the CSS to remove bullets, so I didn't see that it was actually a blank line. No wonder my margin and padding solutions did nothing.

I tried setting the height to 0 for the li elements and then reset it on the a (link) elements, but that really destroyed things.

Is there no CSS solution to this?

If not, maybe I'll have to look into rewriting the plug in so it handles nesting differently.

robsoles

5+ Year Member



 
Msg#: 3571286 posted 3:37 am on Feb 12, 2008 (gmt 0)

Hey zollerwagner,

bound to be a CSS fix for it but it probably relies on being able to 'select' the <ul>s that are nested in <li>s with no 'sub headings' as penders was pointing out.

Probably better to tackle the component/plug in if you've access.

Regards,
robsoles.

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 3571286 posted 12:21 pm on Feb 12, 2008 (gmt 0)

No wonder my margin and padding solutions did nothing.

You could try applying a negative margin-top to pull the sublist up and close the gap?! But use a conditional comment to apply it to IE only.

ul.toc ul { 
margin-top:-1.2em; /* whatever the line-height is */
}

(Assumes ALL sublists are in the form of the OP)

robsoles

5+ Year Member



 
Msg#: 3571286 posted 12:57 pm on Feb 12, 2008 (gmt 0)

I spose 'class'ing and '{ display: none; }'ing the <li> element acting as the <ul>'s parent would make the whole nested <ul> not display, so not giving the <li> element a class and instead applying penders' solution looks like the winner to me - I wanted to muck about with the component/plug in to give the parenting <li>'s a class to play with!

Hey penders, without having tested it myself; will

ul.toc ul { /* bizzo */ }

apply to the nested <ul> element reliably or would I be better off with

ul.toc li ul { /* bizzo */ }

if my markup is valid? I suppose that if it's conditionally applied in MSIE then Microsoft 'happiness' will take care of us?

Regards,
robsoles.

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 3571286 posted 2:27 pm on Feb 12, 2008 (gmt 0)

ul.toc ul { /* bizzo */ }

This works OK in the simple example given and follows the same style rule as in the OP.

ul.toc li ul { /* bizzo */ }

However, I probably would tend to be more specific as in your 2nd example. And this may be important in the bigger picture? It will take precedence over the 1st rule. Is it necessary in this project?

zollerwagner

10+ Year Member



 
Msg#: 3571286 posted 6:37 am on Feb 17, 2008 (gmt 0)

The person who created the Textpattern plug-in has changed the coding so that the second level ul is not inside a li. That's has fixed the problem.

Thanks so much for figuring out what was wrong!

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