SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    No bullets for outer list, bullets for inner list

    I have an outer list with no bullets, but for the inner list I would like bullets. I can see the style is being applied via the correct selector when viewing CSS in Chrome, however no bullet is displayed.

    Any ideas what I am doing wrong? Also how could I get it working with a graphic as again the list-style-image property also does not work.

    Code is below, many thanks in advance.

    http://jsfiddle.net/7wCsa/

    Code:
    <style type="text/css">
    
    *{
    	margin:0;
    	padding:0;
    }
    
    ul.products {
    padding: 0;
    margin: 0;
    }
    
    
    ul.products li {
    width: 238px;
    display: inline-block;
    margin-bottom: 30px;
    float: left;
    position: relative;
    }
    
    ul.products li:nth-child(odd) {
    margin-right: 30px;
    }
    
    ul.products li ul {
    border: none;
    margin: 0;
    padding: 0;
    float: none;
    margin-bottom: 30px;
    
    }
    
    ul.products li ul li {
    border: none;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: square;
    float: none;
    line-height: 10px;
    }
    
    
    </style>
    </head>
    
    <body>
    
    <ul class="products">
    	<li>
    		<h1>Title 1</h1>
    		<ul>
    			<li>feature a</li>
    			<li>feature b</li>
    			<li>feature c</li>
    		</ul>
    	</li>
    	<li>
    		<h1>Title 2</h1>
    		<ul>
    			<li>feature a</li>
    			<li>feature b</li>
    			<li>feature c</li>
    		</ul>
    	</li>
    
    </ul>

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Two things about the bullets:

    (1) The universal selector is NOT your best friend. The list items must have padding-left in which to display the markers or images. It's better to target the selectors that need margins and padding zeroed. So, delete the asterisk and styles at the top of the page.
    Code:
    * {
        margin:0;
        padding:0;
    }
    (2) display:inline-block expects to be part of an inline menu and therefore disable markers. You can stop the inheritance of inline-block by applying the first child selector.
    Code:
    ul.products > li {
    (3) Back on the subject of padding, delete
    Code:
    ul.products li ul {padding:0;}
    See if that helps


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •