Getting rid of bullets in a bitmap-based list

[Mickmeister]

I’m making a horizontal upper screen menu, using an unordered list. It’s got the default bullets, which I need to get rid of. In an earlier iteration I was using text for the menu items, and adding “list-style-type: none” removed the bullets, but now I’ve switched to using a PNG image for each bullet item and that no longer works. Is there any way to get rid of the bullets?

MY HTML:

  <ul class="topnav">
  <li><a href="#"><img src="images/mp_logo.png" width="220" height="22" alt=""/></a></li>
  <li><a href="#"><img src="images/misc.png" onmouseover="this.src='images/misc_over.png'" onmouseout="this.src='images/misc.png'"></a></li>
  <li><a href="#"><img src="images/animation.png" onmouseover="this.src='images/animation_over.png'" onmouseout="this.src='images/animation.png'"></a></li>
  <li><a href="#"><img src="images/modeling.png" onmouseover="this.src='images/modeling_over.png'" onmouseout="this.src='images/modeling.png'"></a></li>
  <li><a href="#"><img src="images/trade_shows.png" onmouseover="this.src='images/trade_shows_over.png'" onmouseout="this.src='images/trade_shows.png'"></a></li>
  <li><a href="#"><img src="images/illustration.png" onmouseover="this.src='images/illustration_over.png'" onmouseout="this.src='images/illustration.png'"></a></li>
  <li><a href="#"><img src="images/contact.png" onmouseover="this.src='images/contact_over.png'" onmouseout="this.src='images/contact.png'"></a></li>
</ul> 

MY CSS:

 ul.topnav li {float: right;}   
 
   ul.topnav li a {
  display: block;
  text-align: center;
  padding: 20px 20px; 
  list-style-type: none;
} 

[PaulOB]

Have you tried:

ul.topnav {list-style:none;}

The anchor element is not a list item and has no bullet anyway.

[Mickmeister]

@PaulOB

ul.topnav {list-style:none;}

Ahh…that does the job. But it also eliminates the spaces I had between the items…it seems like the 20 px padding doesn’t work anymore.

[PaulOB]

It shouldn’t have made a difference to the padding as far as I can see but if you post the full html and css for all those elements I’ll take a look in the morning

Maybe you just need a margin left on the list element instead.

[Mickmeister]

I couldn’t get the margins back but I got it working by adding some pixels to either side of the menu item bitmaps.

[PaulOB]

@Mickmeister

I got it working by adding some pixels to either side of the menu item bitmaps.

That’s a bit extreme to edit the images just to get space!

As I said above the code I offered would have done nothing except to remove the bullet marker. It would have had no effect on the spacing so you must have changed something or perhaps not shown all relevant code.

As an aside the 20px padding on each side of the anchor was the only reason you saw the bullets anyway as they would otherwise have all been hidden under the floated list items (apart from the first one).

Adding a margin to either the list item the anchor or the image would have resulted in more space rather than editing the image directly

I know you’ve solved it now but I didn’t want you to go around editing images all the time when you don’t need to

[Mickmeister]

I’ve uploaded the file here:

http://www.mickposch.com/margin_test.html

I tried setting both Margin and Padding values (commented out in this file) - but they don’t have any effect.

[PaulOB]

Works for me

ul.topnav li {margin-left:100px} (as a silly example :))

Also remember not to forget the alt attribute on the image or your menu will be mostly invisible to search engines and the site may not get indexed properly. More importantly though screen readers will have no way to navigate the site and will fail accessibility criteria.

[Mickmeister]

Thanks…I see what’s going on…bad syntax on my part. I’m leaving it with my sillyass “extra pixel method” for now, since I’m now busy with fun problems on another page, but I’ve noted this for the future.

[PaulOB]

@Mickmeister

bad syntax on my part.

No worries Happens to us all at some time