Problem overriding default bullet image for a list

randomhouse · 02-08-2009, 03:15 AM

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!

Excavator · 02-08-2009, 05:17 AM

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>

randomhouse · 02-08-2009, 08:32 AM

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

Excavator · 02-08-2009, 09:01 AM

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.

jlhaslip · 02-09-2009, 02:58 AM

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.