CSS Menu cannot remove bullets

By drozzy on 3 Apr 2007 at 01:17 UTC

Hello everyone!
I am new to Drupal and this is my first theme.

I copied "abac" theme and erased most of the stuff. I have gotten the layout I wanted.
You can view the site here:
http://www.drozdyuk.com/denysDrupal/

What I am trying to do now is to remove the bullets on the menu.
However my attempts to accomplish it like so, fail:

/* MENU */
ul.menu{
	margin: 0px;
	padding: 0px;
}
.content ul.menu li.leaf{
	list-style-position:inside;
	list-style-type: none;
}
.content ul.menu li.expanded{
  list-style-type: none;
  list-style-position:inside;
}
/* lets try without .content */
ul.menu li.collapsed{
	list-style-type: none;
	list-style-position:inside;
}

As you can see from the View source my xhtml is like this:

<div class="content">
  <ul class="menu">
       <li class="leaf"><a href="/denysDrupal/node/4" title="My Bio">Bio</a></li>
       <li class="collapsed"><a href="/denysDrupal/node">Content</a></li>

<li class="leaf"><a href="/denysDrupal/user/1">My account</a></li>
<li class="expanded"><a href="/denysDrupal/admin">Administer</a>
<ul class="menu">
<li class="collapsed"><a href="/denysDrupal/admin/content" title="Manage your site&#039;s content.">Content management</a></li>
<li class="expanded"><a href="/denysDrupal/admin/build" title="Control how your site looks and feels.">Site building</a>
<ul class="menu">
<li class="leaf"><a href="/denysDrupal/admin/build/block" title="Configure what block content appears in your site&#039;s sidebars and other regions.">Blocks</a></li>
<li class="leaf"><a href="/denysDrupal/admin/build/menu" title="Control your site&#039;s navigation menu, primary links and secondary links. as well as rename and reorganize menu items.">Menus</a></li>
<li class="leaf"><a href="/denysDrupal/admin/build/modules" title="Enable or disable add-on modules for your site.">Modules</a></li>
<li class="leaf"><a href="/denysDrupal/admin/build/themes" title="Change which theme your site uses or allows users to set." class="active">Themes</a></li>

</ul>
</li>
<li class="collapsed"><a href="/denysDrupal/admin/settings" title="Adjust basic site configuration options.">Site configuration</a></li>
<li class="collapsed"><a href="/denysDrupal/admin/user" title="Manage your site&#039;s users, groups and access to site features.">User management</a></li>
<li class="collapsed"><a href="/denysDrupal/admin/logs" title="View system logs and other status information.">Logs</a></li>

</ul>
</li>
<li class="leaf"><a href="/denysDrupal/logout">Log out</a></li>

</ul>
</div>

Also, it seems the the CSS list-style-type: none; works for Internet Explorer 6 but does not work for Firefox 2.

Any help would be appreciated. Thank you!

I include my page.tpl.php here for reference:

<!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" xml:lang="<?php print $language ?>" lang="<?php print $language ?>">
<head>
	<title><?php print $head_title ?></title>
		<?php print $head ?>
		<?php print $styles ?>
		<?php print $scripts ?>
		<style type="text/css" media="print">@import "<?php print base_path() . path_to_theme() ?>/print.css";</style>
</head>
<body<?php print phptemplate_body_class($sidebar_left, $sidebar_right); ?>>

<div id="container">
	<div id="header">
		<div class="logo"><?php			
			if ($logo) {
				print '<a href="'. check_url($base_path) .'" title="'. $site_title .'">';
				if ($logo) {
				print '<img src="'. check_url($logo) .'" alt="'. $site_title .'" id="logo" />';
				}
				print $site_html .'</a>'; } ?>				
		</div>
	</div>

	<div id="sidebar">
			<?php print $sidebar_left ?>			
	</div>
	<div id="contentArea">
			<?php if ($mission): print '<div class="mission">'. $mission .'</div>'; endif; ?>
			<?php if ($breadcrumb): print $breadcrumb; endif; ?>
			<?php print $header; ?>			
			<?php if ($title): print '<h1'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h1>'; endif; ?>				
			<?php if ($tabs): print $tabs; endif; ?>
			<?php if (isset($tabs2)): print $tabs2; endif; ?>
			<?php if ($help): print $help; endif; ?>
			<?php if ($messages): print $messages; endif; ?>
			<?php print $content ?>
	</div>
</div><!--container-->
<?php print $closure ?>
</body>
</html>

Comments

The bullet actually isn't a

xrintrahx commented 3 April 2007 at 01:29

The bullet actually isn't a list style or a 'bullet' but an image of a bullet. The code for the bullet is found in system/system.css and is:

li.leaf {
  list-style-type: square;
  list-style-image: url(../../misc/menu-leaf.png);
  padding: 0.2em 0.5em 0 0;
  margin: 0;
}

You could delete the image, change the system.css file, or over ride that css file with by adding list-style-image: none; in your template css to the li.leaf selector. The latter being the best solution that doesn't modify core files. I'd also recomment adding a padding: 0; to the same selector to remove the space that was there for the image of the bullet. Hope this helps.

Solved, thank you!

drozzy commented 4 April 2007 at 01:01

Thank you for pointing that out. Simpler then i thought.
I managed to get the styling I wanted with the following:

/* MENU */
.menu .expanded, .menu .collapsed, .menu .leaf{	
	padding: 0px;
	margin: 0px;
	list-style-type: none;
	/* List actually uses images so we apply list-style-image property */	
	list-style-image:none;
} 
 
ul.menu{
 padding: 0px;
}

thank you so much!

I guess a CSS problem or my lack of knowledge of it: For some reason it will not work if I replace ul.menu with just .menu - which is sad, because that would have been really neat.