[wp-trac] [WordPress Trac] #18256: Close the current-cat li before the children

[WordPress Trac]

#18256: Close the current-cat li before the children
--------------------------+----------------------
 Reporter:  betsyk        |       Owner:
     Type:  defect (bug)  |      Status:  closed
 Priority:  normal        |   Milestone:
Component:  General       |     Version:  3.2.1
 Severity:  normal        |  Resolution:  invalid
 Keywords:                |
--------------------------+----------------------
Changes (by dd32):

 * status:  new => closed
 * resolution:   => invalid
 * milestone:  Awaiting Review =>


Old description:

> In a hierarchical category list, children adopt the current-cat class
> from parents.  This is due to the Walker_Category structure which nests
> <ul class='children'> inside the <li> of the parent list. The parent list
> should be closed before the child <ul> begins.
>
> Let's say I have a list of categories:
>
> <ul><?php wp_list_categories('style=list&hierarchical=1&depth=0');
> ?></ul>
>
> And I want to style the current category:
>
> .current-cat {
> background-color: #cccccc;
> }
>
> The HTML output is this:
>
> <ul><li class="cat-item cat-item-21 current-cat"><a
> href="http://mysite/category/food/cookies">cookies</a>
> <ul class='children'><li class="cat-item cat-item-107"><a
> href="http://mysite/category/food/cookies/oatmeal">oatmeal</a></li></ul></li></ul>
>
> It should be this:
>
> <ul><li class="cat-item cat-item-21 current-cat"><a
> href="http://mysite/category/food/cookies">cookies</a></li><ul
> class='children'><li class="cat-item cat-item-107"><a
> href="http://mysite/category/food/cookies/oatmeal">oatmeal</a></li></ul></ul>
>
> Didn't see anything related in the open tickets - hopefully this isn't a
> duplicate bug report.

New description:

 In a hierarchical category list, children adopt the current-cat class from
 parents.  This is due to the Walker_Category structure which nests <ul
 class='children'> inside the <li> of the parent list. The parent list
 should be closed before the child <ul> begins.

 Let's say I have a list of categories:

 <ul><?php wp_list_categories('style=list&hierarchical=1&depth=0'); ?></ul>

 And I want to style the current category:

 `.current-cat {
 background-color: #cccccc;
 }`

 The HTML output is this:

 <ul><li class="cat-item cat-item-21 current-cat"><a
 href="http://mysite/category/food/cookies">cookies</a>
 <ul class='children'><li class="cat-item cat-item-107"><a
 href="http://mysite/category/food/cookies/oatmeal">oatmeal</a></li></ul></li></ul>

 It should be this:

 <ul><li class="cat-item cat-item-21 current-cat"><a
 href="http://mysite/category/food/cookies">cookies</a></li><ul
 class='children'><li class="cat-item cat-item-107"><a
 href="http://mysite/category/food/cookies/oatmeal">oatmeal</a></li></ul></ul>

 Didn't see anything related in the open tickets - hopefully this isn't a
 duplicate bug report.

--

Comment:

 {{{
 <ul>
   <li>
    has-children
   </li>
   <ul>
    <li> children..
 }}}
 like you suggest is invalid nested HTML.

 The current form is the correct method for nested lists:
 {{{
 <ul>
  <li>
    has-children
    <ul>
      <li> children..
 }}}

 You can probably achieve what you want by having the child ul 100% width,
 and setting a padding on it instead of a margin, as a result, the
 background colour of the parent would be hidden behind the background
 colour of the child ul.

 Closing as invalid due to the premise being the HTML is incorrect.

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/18256#comment:1>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software