problems styling <ul> that is 2 levels deep

[TheShade01]

I have 2 issues i am trying to work through:

1.) i am trying to style an unordered list that, at times, gets to be 2 levels deep. It is a "site map" that is laid out in a 3 column table. The default list properties use a HUGE indent for the lists and by the time i get to the 2nd level it will only allow room for 1 word or so before wrapping. It looks hideous. I am using a custom bullet (i don't know if that is throwing anything off or not).

To reduce the verticle space (which is HUGE by default) i used the "margin-bottom" property. Then i adjusted the indent using the "text-indent" property as follows:

ul {
	list-style-image: url(images/bullet_diamond.jpg);
	text-indent: -6px;
	margin-bottom: -.2em;
}

This worked fine for all the lists that are one level deep, however, all the lists that are 2 levels deep use the default indent value. This has really racked my brain and looks awkward. Can anyone tell me how to get the list 2 levels deep to obey the CSS rule? It is very frustrating.

2.) The other issue i am having is with the indent itself when i change it to -6. The indent obeys, but when the text wraps, it uses the default indent value! eek! This has racked my brain. I pretty much resolved it by balancing 2 properties (padding-left and text-indent). However this still leaves the horrible issue of the lists 2 levels deep. Is there a better way to get the "wrapped" text to stay in line with the indent?

any help would be GREATLY appreciated!!!! I have to have this finished by monday morning for a client.

Here is an example of my problem. Notice the list that are 2 levels deep.
http://www.saddlebrook.hhvisualgroup.../site_map.html
Forgive the sloppy code (dreamweaver) i haven't run it through a code validator yet to clean it up.

all-in-all i am this is the way the lists are set up:

<ul>
<li>something here</li> 
<li>something here</li>
<li>something here</li>
<li>something here</li>
    <ul>
         <li>something here</li>
         <li>something here</li>
         <li>something here</li>
         <li>something here</li>
    </ul>
</ul>

thank you so much

[Centauri]

all-in-all i am this is the way the lists are set up:

Looking through the source of the site, I cannot see where this structuire actually occurs - there are not any nested lists....

I do see a lot of unnecessary tables mixed into the lists, and a number of errors - <ul>s can only directly contain <li>s, not other <ul>s.

I think this would be better as a definition list, and a little thought can get rid of a lot of the classes used as well. Relative links would also reduce code size.

[TheShade01]

thanks. well i agree with the "classes" and rediculous tables mixed in with the lists. This particular page was generated by a site map generator to save me the headache of doing it manually. It was the first time i tried using one. I am not sure it saved me a headache. I found alot of "odd" things with the code. One of which was the gazillion styles. I am planning on reducing that dramatically...most likely with a an id. I was just trying to get the indent worked out first.

As far as the relative paths, although i agree (the rest of the site has relative paths), this particular client was given specific instructions by an SEO company to use absolute paths on the site map...so i am on somewhat of a leash.

the <ul> example i posted is definately in there (the idea at least), although hard to see through all the mess. I will try a definition list, although i use <ul>'s in <ul>'s all the time. When using the "disc" syle they turn into circles instead of discs when you do this.

we will see. I am not having a problem getting the list working, it is controlling the indent. I will keep at it. I appreciate your response.

[Maujor]

To push the 2nd level items list to the left and vertically align it with the 1st level add the following to your CSS:
* html ul ul {margin-left:-1px;} /* Serves IE6 only */
Here, in FireFox, the two levels are already lined up.
-------------------------------------------------------------------
In HTML it is legal and is allowed UL elements containing others UL elements.
The right nested UL's mark up have the following fashion:

<ul>
 <li>Item1</li>
 <li>Item2</li>
 <li>Item3
      <ul>
      <li>Item3.1</li>  
      <li>Item3.2</li>
      </ul>
 </li>
 <li>Item4</li>
 <li>Item5
      <ul>
      <li>Item5.1</li>  
      <li>Item5.2
	 <ul>
         <li>Item5.2.1</li>  
         <li>Item5.2.2</li>
         </ul>
      </li>  
       </ul>
 </li>
</ul>

[TheShade01]

omg i feel like an idiot. sheesh. markbrown and maujor, thank you guys so much. I should have run a validator through the code before posting. it would have definately caught that. thanks again.

[TheShade01]

well that was definately a problem...the way i had it nested was just a stupid mistake. I changed the syntax so that they are nested properly, but i am still having the same issue. For now i pulled some unorthodox tricks to get what i wanted, but i would like to know why the "text-indent" property does not seem to affect the nested list.

I created a test page. All that was on it was:

<ul>
  <li>example</li>
  <li>example</li>
  <li>example
    <ul>
       <li>example</li>
       <li>example</li>
       <li>example</li>
    </ul>
  </li>
</ul>

i added a simple rule:

ul {
     text-indent: -10px;
}

the rule is working, but only affects the parent and not the children. this has been something i have always wondered about, but have never figured it out nor was i ever faced with a situation that demanded that i really persue it until now. any ideas?

[markbrown4]

Hello,

Your nested list structure is incorrect

<ul>
  <li>something here</li> 
  <li>something here</li>
  <li>something here</li>
  <li>something here
    <ul>
      <li>something here</li>
      <li>something here</li>
      <li>something here</li>
      <li>something here</li>
    </ul>
  </li>
</ul>

You need the ul within it's parent li tag for it's semantic meaning of child / parent. Did you validate? I imagine this would throw errors.

<ul>
  <ul>
    <li>example</li>
    <li>example</li>
  </ul>
</ul>

[markbrown4]

I would recommend using background-image and padding instead of list-style-image and text-indent.

Text indent won't 'compound' values with it's parents values.
Padding on the other hand actually pushes the element over, text-indent just nudges the text within an element.

[TheShade01]

maujor, yeah i did try but it didn't work for me. Myself and a number of my clients are using ie7 too. I altered it a bit with a sample i made, however, with success!! Thank you guys for all your help. It lead me down a fruitful rabit trail that yielded the result i needed. I really appreciate it.

for me, this is what worked:

#nestTest li ul li {
	margin-left:-5px;
}

i just gave the parent the id value and all the children obeyed.

thanks again!

[Centauri]

As previously stated, text-indent isn't what controls this, rather margin or padding (some browsers treat this differently). I when through your existing sitemap and cleaned up the table crap, and nested everything properly, applied some styles, and came up with this html:

<div class="sitemap">
  <h3>Main Navigation</h3>
  <ul>
    <li><a href="http://www.saddlebrook.com/" >Home</a></li>
    <li><a href="http://www.saddlebrook.com/our_resort.html" >Our Resort</a>
      <ul>
        <li><a href="http://www.saddlebrook.com/services_and_amenities.html" >Services and Amenities</a></li>
	  <li><a href="http://www.saddlebrook.com/skids_club.html" >S'Kids Club</a></li>
	  <li><a href="http://www.emarketing360.com/Saddlebrook/eBROCHURE.html" target="_blank">Virtual Tours</a></li>
	  <li><a href="http://www.saddlebrook.com/sbflashshow/index.html" >Slide Show</a></li>
	  <li><a href="http://www.saddlebrook.com/media_resources.html">Media Resources</a>
	    <ul>
	      <li><a href="http://www.saddlebrook.com/downloads/mdine.html" >Dining and Entertainment</a></li>
	    <li><a href="http://www.saddlebrook.com/downloads/mfit.html" >Fitness  Center and Etcheberry Sports</a></li>
	    <li><a href="http://www.saddlebrook.com/downloads/mgolf.html" >Golf</a></li>
	    <li><a href="http://www.saddlebrook.com/downloads/mgroup.html" >Group  Activities and Team Building</a></li>
	    <li><a href="http://www.saddlebrook.com/downloads/mpress.html" >Logo  and Press Releases</a></li>
	    <li><a href="http://www.saddlebrook.com/downloads/mmeet.html" >Meetings  and Functions</a></li>
	    <li><a href="http://www.saddlebrook.com/downloads/mresort.html" >Resort  and SuperPool</a></li>
	    <li><a href="http://www.saddlebrook.com/downloads/skids.html" >S'kids  Club</a></li>
	    <li><a href="http://www.saddlebrook.com/downloads/mspa.html" >Spa</a></li>
	    <li><a href="http://www.saddlebrook.com/downloads/mtennis.html" >Tennis</a></li>
	  </ul></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_map_large_image.jpg" target="_blank">Resort Map</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_center_map_large_image.jpg" target="_blank">Resort Center Map</a></li>
    </ul></li>
    <li><a href="http://www.saddlebrook.com/accommodations.html" >Accommodations</a>
      <ul>
        <li><a href="http://www.saddlebrook.com/deluxe_guest_room.html" >Deluxe Guest Room</a></li>
	  <li><a href="http://www.saddlebrook.com/one_bedroom_suite.html" >One-Bedroom Suite</a></li>
	  <li><a href="http://www.saddlebrook.com/two_bedroom_suite.html" >Two-Bedroom Suite</a></li>
	  <li><a href="http://www.saddlebrook.com/presidential_suite.html" >Presidential Suite</a></li>
    </ul></li>
    <li><a href="http://www.saddlebrook.com/dining_and_entertainment.html" >Dining and Entertainment</a>
      <ul>
        <li><a href="http://www.saddlebrook.com/cypress_restaurant.html" >Cypress Restaurant</a></li>
	  <li><a href="http://www.saddlebrook.com/dempseys_steak_house.html" >Dempsey's Steak House</a></li>
	  <li><a href="http://www.saddlebrook.com/tds_sports_bar.html" >T.D.'s Sports Bar</a></li>
	  <li><a href="http://www.saddlebrook.com/polo_lounge.html" >Polo Lounge</a></li>
	  <li><a href="http://www.saddlebrook.com/poolside_cafe.html" >Poolside Cafe</a></li>
	  <li><a href="http://www.saddlebrook.com/coffee_bar.html" >Coffee Bar</a></li>
	  <li><a href="http://www.saddlebrook.com/entertainment.html" >Entertainment</a></li>
    </ul></li>
    <li><a href="http://www.saddlebrook.com/meetings_and_conferences.html" >Meetings and Conferences</a>
      <ul>
        <li><a href="http://www.saddlebrook.com/rfp_meetings.html" target="_blank">Request for Proposal</a></li>
	  <li><a href="http://www.saddlebrook.com/meeting_facilities.htm" target="_blank">Meeting Room & Floor Plan Capacity Charts</a></li>
	  <li><a href="http://www.saddlebrook.com/function_room_description.html" >Function Room Description</a></li>
	  <li><a href="http://www.saddlebrook.com/executive_meetings.html" >Executive Meetings (Under 20 Rooms)</a></li>
	  <li><a href="http://www.emarketing360.com/Saddlebrook/eBROCHURE.html" target="_blank">Virtual Tours</a></li>
	  <li><a href="http://www.saddlebrook.com/meet_the_staff.html" >Meet the Staff</a></li>
	  <li><a href="http://www.saddlebrook.com/testimonials.html" >Testimonials</a></li>
	  <li><a href="http://www.saddlebrook.com/team_building.html" >Team Building</a></li>
	  <li><a href="http://www.saddlebrook.com/beyond_meetings.html">Beyond Meetings</a>
	    <ul>
	      <li><a href="http://www.saddlebrook.com/nick_hall.html" >Meet  Dr. Nick Hall</a></li>
	    <li><a href="http://www.saddlebrook.com/team_building.html" >Team Building</a></li>
	    <li><a href="http://www.saddlebrook.com/lighthearted_team_building.html" >Lighthearted  Team Building</a></li>
	    <li><a href="http://www.saddlebrook.com/team_building_faq.html" >Team  Building FAQ</a></li>
	    <li><a href="http://www.saddlebrook.com/team_building_testimonials.html" >Testimonials</a></li>
	    <li><a href="mailto:nhall@saddlebrookresort.com" >Contact Dr. Hall</a></li>
	  </ul></li>
	  <li><a href="http://saddlebrook.com/pdf/SaddlebrookCatering.pdf" target="_blank">Catering Brochure</a></li>
	  <li><a href="http://saddlebrook.com/pdf/SaddlebrookCatering.pdf" target="_blank">Group Activities Brochure</a></li>
    </ul></li>
    </ul>
</div>
<div class="sitemap toppad">
  <ul>
    <li><a href="http://www.saddlebrook.com/banquets_and_catering.html" >Banquets and Catering</a>
      <ul>
        <li><a href="http://www.saddlebrook.com/weddings.html" >Weddings</a>
          <ul>
            <li><a href="http://www.saddlebrook.com/rfi_weddings.html" >Request for Information</a></li>
	  </ul></li>
	  <li><a href="http://www.saddlebrook.com/meeting_facilities.htm" target="_blank">Capacity Charts</a></li>
	  <li><a href="http://www.saddlebrook.com/meet_the_staff_banquets.html" >Meet the Staff</a></li>
	  <li><a href="http://www.saddlebrook.com/pdf/SaddlebrookCatering.pdf" target="_blank">Catering Brochure</a></li>
	  <li><a href="http://www.saddlebrook.com/rfp_banquets.html" >Event Planner RFP</a></li>
    </ul></li>
    <li><a href="http://www.saddlebrook.com/golf.html" >Golf</a>
      <ul>
        <li><a href="http://www.saddlebrook.com/golf_winter_spring_fall.html" >Winter, Spring, Fall Golf Packages</a></li>
	  <li><a href="http://www.saddlebrook.com/golf_summer.html" >Summer Golf Package</a></li>
	  <li><a href="http://www.saddlebrook.com/golf_new_player_academy.html" >New Player Academy</a></li>
	  <li><a href="http://www.saddlebrook.com/golf_play_with_a_pro.html" >Play with a Pro</a></li>
	  <li><a href="http://www.saddlebrook.com/golf_player_development.html" >Player Development Program</a></li>
	  <li><a href="http://www.saddlebrook.com/golf_junior.html" >Junior Golf Program</a></li>
	  <li><a href="http://www.saddlebrook.com/local_golf_play.html" >Local Golf Play</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_golf/pdf/Group%20Golf%20Getaway%20brochure%2007.pdf" target="_blank">Group Golf Gateway</a></li>
	  <li><a href="http://www.saddlebrook.com/palmercourse.html" target="_blank">Tour the Palmer Golf Course</a></li>
	  <li><a href="http://www.saddlebrook.com/golfcourse.html" target="_blank">Tour the Saddlebrook Golf Course</a></li>
	  <li><a href="http://www.saddlebrook.com/prepmain.html" target="_blank">Saddlebrook Prep</a></li>
    </ul></li>
    <li><a href="http://www.saddlebrook.com/tennis.html" >Tennis</a>
      <ul>
        <li><a href="http://www.saddlebrook.com/adult_programs.html" >Adult Programs</a></li>
	  <li><a href="http://www.saddlebrook.com/junior_programs.html" >Junior Programs</a></li>
	  <li><a href="http://www.saddlebrook.com/touring_pros.html" >Touring Pros and Academy Players</a></li>
	  <li><a href="http://www.saddlebrook.com/prepmain.html" target="_blank">Saddlebrook Prep</a></li>
	  <li><a href="http://www.saddlebrook.com/sbtennis/" >Saddlebrook Tennis</a></li>
    </ul></li>
    <li><a href="http://www.saddlebrook.com/spa_and_fitness.html" >Spa & Fitness</a></li>
    <li><a href="http://www.saddlebrook.com/family_reunions.html" >Family Reunions</a></li>
    <li><a href="http://www.saddlebrook.com/area_attractions.html" >Area Attractions</a></li>
    <li><a href="http://www.saddlebrook.com/maps_and_directions.html" >Maps and Directions</a></li>
    <li><a href="http://www.saddlebrook.com/eshoppe.html" >eShoppe</a></li>
    </ul>
</div>
<div class="sitemap">
  <h3>Actionable Navigation</h3>
  <ul>
    <li><a href="http://www.saddlebrook.com/room_reservations.html" >Room Reservations</a></li>
    <li><a href="http://www.saddlebrook.com/specials_and_packages.html" >Specials and Packages</a>
      <ul>
        <li><a href="http://www.saddlebrook.com/winter_spring_fall_golf_packages.html" >Winter, Spring, Fall Golf Packages</a></li>
	  <li><a href="http://www.saddlebrook.com/summer_golf_package.html" >Summer Golf Package</a></li>
	  <li><a href="http://www.saddlebrook.com/new_player_academy.html" >New Player Academy</a></li>
	  <li><a href="http://www.saddlebrook.com/play_with_a_pro.html" >Play with a Pro</a></li>
	  <li><a href="http://www.saddlebrook.com/player_development_program.html" >Player Development Program</a></li>
	  <li><a href="http://www.saddlebrook.com/junior_golf_program.html" >Junior Golf Program</a></li>
	  <li><a href="http://www.saddlebrook.com/adult_tennis_program.html" >Adult Tennis Program</a></li>
	  <li><a href="http://www.saddlebrook.com/junior_tennis_program.html" >Junior Tennis Program</a></li>
	  <li><a href="http://www.saddlebrook.com/oasis_of_serenity.html" >Oasis of Serenity</a></li>
	  <li><a href="http://www.saddlebrook.com/me_and_mom.html" >Me and Mom</a></li>
	  <li><a href="http://www.saddlebrook.com/romantic_rendezvous.html" >Romantic Rendezvous</a></li>
	  <li><a href="http://www.saddlebrook.com/thanksgiving_harvest.html" >Thanksgiving Harvest</a></li>
	  <li><a href="http://www.saddlebrook.com/christmas_and_new_years_holiday.html" >Christmas and New Years Holiday</a></li>
	  <li><a href="http://www.saddlebrook.com/easter_package.html" >Easter Package</a></li>
    </ul></li>
    <li><a href="http://www.saddlebrook.com/plan_a_group.html" >Plan A Group</a></li>
    <li><a href="http://www.saddlebrook.com/golf_reservations.html" >Golf Reservations</a></li>
    <li><a href="http://www.saddlebrook.com/email_offers_signup.html" >Email Offers Sign-up</a></li>
    <li><a href="http://www.saddlebrook.com/contact_us.html" >Contact Us</a>
      <ul>
        <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/accounting_directory.html" >Accounting</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/apga_directory.html" >Arnold Palmer Golf Academy</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/conferences_directory.html" >Conference Services & Catering</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/front_office_directory.html" >Front Office / Guest Services</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/human_directory.html" >Human   Resources / Employment Opportunities</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/marketing_directory.html" >Marketing, Advertising & Public   Relations</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/purchasing_directory.html" >Purchasing</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/reservation_directory.html" >Reservations</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/administration_directory.html" >Resort Administration</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/holdings_directory.html" >Saddlebrook Holdings</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/saddlebrook_prep_directory.html" >Saddlebrook Preparatory</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/tennis_directory.html" >Saddlebrook Tennis</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/sales_directory.html" >Sales Group Availability</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/team_building_directory.html" >Team Building</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/golf_shop_directory.html" >The Golf Shop</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/spa_directory.html" >The Spa at Saddlebrook Resort</a></li>
	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/weddings_directory.html" >Weddings</a></li>
    </ul></li>
    </ul>
</div>

and this css:

.sitemap {
	width: 250px;
	float: left;
	margin-right: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #008080;
}
.sitemap h3 {
	text-align: center;
	font-size: 14px;
	background-color: #8B7D72;
	color: #FFFFFF;
	display: block;
	line-height: 1.5em;
}
.sitemap ul {
	margin: 0;
	padding: 0;
}
.sitemap li {
	margin: 5px 0 0;
	list-style: none;
}
.sitemap ul ul li {
	list-style-type: disc;
	list-style-position: inside;
	margin: 0;
}
.sitemap ul ul ul li {
	list-style-type: circle;
	padding-left: 10px;
}
.sitemap a {
	color: #645A51;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
}
.sitemap ul ul a {
	text-decoration: none;
	color: #008080;
	font-size: 13px;
	font-weight: normal;
}
.sitemap ul ul ul a {
	font-size: 12px;
}
.sitemap a:hover {
	text-decoration: underline;
}
.toppad {
	padding-top: 4em;
}

See if that works better.

[TheShade01]

holy crap dude...THANKS! you just saved me a lot of time and taught me some nifty new methods. I was going to clean up all the garbage tonight. I used SiteXpert to generate the sitemap which threw in all the tables and whacky styles. This is absolutely beautiful.

i actually don't know what to say... other than... thank you. sheesh.

[TheShade01]

okay this may seem rather bold after all the help i have gotten from everyone, but i have one remaining minor issue that i would like to learn to control.

Centauri, i can't thank you enough for your help. I have learned a valuable lesson in using css strategically. Although i would have cleaned the code, i would not have gotten rid of the tables altogether because of my ignorance. I now see the light! I never quite understood how to use CSS instead of tables until you took the time to alter the code for me. Now i have learned how to avoid tables whenever possible....thank God.

There is, however, one remaining issue that i am trying to figure out. It is regarding how the text wraps in the list. Right now, the text wraps to the bullet instead of the text next to the bullet. I have been playing with the margins and padding and can't seem to get it. Like i said, i know it is a bit "balls-ee" to ask after getting so much help, but that would kick this thing once and for all giving me all the control i have wanted.

i really appreciate all the helpful replies...it has really taught me some valuable lessons!

[Centauri]

That's where styling lists can sometimes be tricky. The fix here is to move the list style position from inside to outside (the <li> element), which means we then have to apply a left margin to bring the <li> and bullet back into line. The padding on the second level can then be removed as the <li> margin will also apply here as well.

Modified css :

.sitemap ul ul li {
	list-style-type: disc;
	list-style-position: outside;
	margin: 0 0 0 15px;
}
.sitemap ul ul ul li {
	list-style-type: circle;
}

Cheers
Graeme

[TheShade01]

man, you have been very gracious. That was spot on. I have gained much confidence in an area i was sorely struggling in. I can now "man-handle" lists with CSS. Like i said, i can't thank you enough.

thanks a million,

shae