Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Problem overriding default bullet image for a list

    Hello,

    I'm relatively new to CSS, and would appreciate if you could help me out!

    I have a CSS rule to render all bullets in my page with a different icon, including on the sidebars.
    But there's a single list (a secondary navigation block) where I do not want any bullets. I am trying to override it, but am unable to. I'd be glad if you could review my CSS and tell me where I'm going wrong.

    Thanks a Ton!

    Code:
    /* ////////////// SIDEBAR STYLES ///////////// */
    .sidebar li { 
      border-top:dashed #cccccc 1px; 		
    }
    
    .sidebar ul li { 						
      padding:0 0 0 1.5em; 					
      list-style-type: none;				
      list-style-image: none;				
      background-image: url(img/menu-leaf.gif); /* Problems! */	
      background-repeat:no-repeat;			
      background-position: 0.3em 0.6em;		
    }
    
    /* ////////////// NAVIGATION BLOCK ///////////// */
    
    #navigation-secondary a {
      display:block;
      color:#ffffff;  
    }
    #navigation-secondary a:hover {
      background-color:#369; /* to change color when hovered over */
    }
    
    /* ////////////// try to override the bullets ///////////// */
    
    #navigation-secondary , #navigation-secondary ul, 
    #navigation-secondary ul li, #navigation-secondary a {
      list-style-type:none;
      list-style:none;
    }
    ul.secondary-links li, ul.secondary-links ul li {
      background-image:none; 
      border-top: none; /* this works though */
    }
    My html code snippet (rendered via php) is here
    Code:
    <div class="sidebar" id="sidebar-left">
      <div id="navigation-secondary">
        <ul class="links secondary-links">
          <li class="menu-138 first"><a title="Link1 site" href="/link1">Link1</a></li>
          <li class="menu-139"><a title="Link2 site" href="/link1">Link2</a></li>
          <li class="menu-140 last"><a title="Link3 page" href="/link1">Link3</a></li>
        </ul>
      <div style="clear: both;"/>
    </div>
    Please help me out. Thanks!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    Hello randomhouse,
    This works -
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 12px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    ul.secondary-links {
    	list-style:none;
    }
    </style>
    </head>
    <body>
        <div id="wrap">
            <div class="sidebar" id="sidebar-left">
                <div id="navigation-secondary">
                        <ul class="links secondary-links">
                            <li class="menu-138 first"><a title="Link1 site" href="/link1">Link1</a></li>
                            <li class="menu-139"><a title="Link2 site" href="/link1">Link2</a></li>
                            <li class="menu-140 last"><a title="Link3 page" href="/link1">Link3</a></li>
                        </ul>
                    <div style="clear: both;"/>
                <!--end navigation-secondary--></div>
            <!--end sidebar/sidebar-left--></div>
    <!--end wrap--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Excavator,

    Thanks for the suggestion - I tried that, but still my sidebar properties are overriding the list-style:none defined in secondary links.

    I copied your properties into my equivalent classes, so your wrap is my navigation-secondary div. But still, I'm unable to get this to override the sidebar class.

    Code:
    .block ul { 
      padding: 0;
    }
    
    .sidebar ul, .sidebar ul li {
      margin: 0;
      padding: 0;
    }
    
    .sidebar li { 
      border-top:dashed #cccccc 1px;
    }
    
    .sidebar ul li {
      padding:0 0 0 1.5em;
      list-style-type: none;
      list-style-image: none;
      background-image: url(img/menu-leaf.gif);
      background-repeat:no-repeat;
      background-position: 0.3em 0.6em;
    }
    
    .sidebar ul li.expanded {
      background-image: url(img/menu-expanded.gif);
    }
    
    .sidebar ul li.collapsed {
      background-image: url(img/menu-collapsed.gif);
    }
    
    .sidebar ul li ul li {
      margin-left:-1.7em;
      padding:0 0 0 3em;
      background-position: 1.8em 0.6em;
    }
    
    .sidebar ul li ul li ul li {
      margin-left:-3.2em;
      padding:0 0 0 4.5em;
      background-position: 3.3em 0.6em;
    }
    
    .sidebar ul li ul li ul li ul li {
      margin-left:-4.7em;
      padding:0 0 0 6em;
      background-position: 4.8em 0.6em;
    }
    
    .sidebar ul li a, .sidebar ul li.expanded a, .sidebar ul li.collapsed a {
      line-height: 2em;
    }
    
    .sidebar a.active {
      font-weight:bold;
      color:#666666 !important;
    }
    
    dl {
      margin: 0.5em 0 1em 1.5em;
    }
    
    dl dt {
    }
    
    dl dd {
      margin: 0 0 .5em 1.5em;
    }
    
    img, a img {
      border: none;
    }
    Regards,
    Random

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    Could you supply the code (markup and CSS) to a couple other ul lists that should have the menu-leaf.gif?
    This is an exercise in specificity and it would help to see what else the changes affect so as to make sure I don't break something while re-arranging it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    It looks to me like the secondary Nav ul/li might be wrapped inside #navigation-secondary .

    If so, add #navigation-secondary to the selector rule as follows:
    Code:
    #navigation-secondary .sidebar ul li {
      padding:0 0 0 1.5em;
      list-style-type: none;
      list-style-image: none;
      background-image: url(img/menu-leaf.gif);
      background-repeat:no-repeat;
      background-position: 0.3em 0.6em;
    }
    Specificity of the rule should then over-ride.


  •  

    Tags for this Thread

    Posting Permissions

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