Can't get rid off bullets in menu list

[Cheng]

Hi.

I have these menu links where a bullet is showing to the left.
These bullets are showing if the links are displayed with CSS and without CSS but I can't get rid of these bullets.
Can someone of you guys tell me how to do that?

Thanks in advance.
Cheng

Here the code:

<div id="menu">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="intro.html">Intro</a></li>
    <li><a href="somdej.html">Somdej</a></li>
    <li><a href="nang_paya.html">Nang Paya</a></li>
    <li><a href="phra_rod.html">Phra Rod</a></li>
    <li><a href="pong_supan.html">Pong Supan</a></li>
    <li><a href="somkor.html">Somkor</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

[ddadmin]

Try the below CSS:

#menu ul{
list-style-type: none;
padding: 0;
margin-left: 0;
}

[Cheng]

Hi ddadmin.

Thank you very much.
That's it.
The bullets are gone.
I realy appreciate your help.
This is a a great place for amateurs like me to get some help.

Thanks again.

[AnnaElton]

Hi! Ok i have the same problem only i have the links in a table:

<table border="0" bordercolor="#F4B7D6" cellspacing="0" cellpadding="4" width="50%" bgcolor="#fcf3f8" height="111">

<tr>
<td><li><a href="#"><font color="#c7377d">Destination 1</font></a></li></td>
<td><li><a href="#"><font color="#c7377d">Destination 2</font></a></li></td>
<td><li><a href="#"><font color="#c7377d">Destination 3</font></a></li></td>
</tr>
<tr>
<td><li><a href="#"><font color="#c7377d">Destination 4</font></a></li></td>
<td><li><a href="#"><font color="#c7377d">Destination 5</font></a></li></td>
<td><li><a href="#"><font color="#c7377d">Destination 6</font></a></li></td>
</tr>
<tr>
<td><li><a href="#"><font color="#c7377d">Destination 7</font></a></li></td>
<td><li><a href="#"><font color="#c7377d">Destination 8</font></a></li></td>
<td><li><a href="#"><font color="#c7377d">Destination 9</font></a></li></td>
</tr>
</table>

And i can't get rid of the bullets.

I actually tried this "<style type="text/css">
#menu ul{
list-style-type: none;
padding: 0;
margin-left: 0;
}
</style>" even though i was pretty sure it wouldn't work in a table...am i doing it wrong? Need Help!!!

[killerchutney]

First of all, the font tag has no place in modern web design. second, the table tag only has a small part in modern web design. Try this:


CSS:

<style type="text/css">
#whatever you wantl{
list-style-type: none;
padding: 0;
margin-left: 0;
}

HTML:

<table  id="whatever you want" border="0" bordercolor="#F4B7D6" cellspacing="0" cellpadding="4" width="50&#37;" bgcolor="#fcf3f8" height="111">

<tr>
<td><li><a href="#"><font color="#c7377d">Destination 1</font></a></li></td>
<td><li><a href="#"><font color="#c7377d">Destination 2</font></a></li></td>
<td><li><a href="#"><font color="#c7377d">Destination 3</font></a></li></td>
</tr>
<tr>
<td><li><a href="#"><font color="#c7377d">Destination 4</font></a></li></td>
<td><li><a href="#"><font color="#c7377d">Destination 5</font></a></li></td>
<td><li><a href="#"><font color="#c7377d">Destination 6</font></a></li></td>
</tr>
<tr>
<td><li><a href="#"><font color="#c7377d">Destination 7</font></a></li></td>
<td><li><a href="#"><font color="#c7377d">Destination 8</font></a></li></td>
<td><li><a href="#"><font color="#c7377d">Destination 9</font></a></li></td>
</tr>
</table>

Someone please correct me if i'm wrong, I haven't used tables i ages

[nwalton]

You could do it without even using a class, just with selectors like this:

td li {
  list-style-type: none;
  padding: 0;
  margin-left: 0;
  }

But there should be no reason to nest <li> elements within table cells. They are meant to show up as a list, together, like the first example. You can control them to display as block elements with a rectangular background or whatever you need without sticking them into a table.

[boogyman]

okay either get rid of the <li> tags or more preferably get rid of the <table>

tables are made to be used for tabular data not for general layout. so restructure your code like so

<ul id="menu">
  <li><a href="link.html">Link </li>
  <li><a href="link.html">Link </li>
  <li><a href="link.html">Link </li>
  <li><a href="link.html">Link </li>
</ul>

<style type="text/css">
<!--

ul#menu {
 background: #fcf3f8;
 color: #c7377d;
 border: none;
}
ul#menu li {
 list-style: none;
 display: inline;
 margin: 0;
 padding: 0;
}
ul#menu li a {
  color: #c7377d;
}
// -->
</style>

however if you do decide to keep with the table layout you can still remove the <li> tags because <td> display inline as default, but again I would HIGHLY suggest you get away from nested tables as your layout schema of choice and you have alot of repetitive <font> tags which are both unnecessary and depreciated (deleted). you can as i pointed out in my css file, you can do it all by css which will save youtime in coding and will save in loading times and also space, not to mention the ease in maintenance when you wish to change something

[AnnaElton]

Thanks!!! you guys are awesome! The tables were a problem, they were so bulky and tiresome. Css is much better. But atleast now i can deal with the bullets. Yay.

[txrockerboy]

this is my code for the top menu bar but when i hover over them i get bullets on the left. Please help! Below is the Div ID and class id css code



/* ######### Matt Black Strip Main Menu Bar CSS ######### */


.mattblackmenu ul{
margin: 0;
padding: 0;
font: bold 10px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background: #95929C;
overflow: hidden;
width: 100%;
color: #FFFFFF;
}

.mattblackmenu li{
display: inline;
margin: 0;
color: red;
}

.mattblackmenu li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #95929C;
}

.mattblackmenu li a:visited{
color: white;
}

.mattblackmenu li a:hover{
background: #95929C; /*background of tabs for hover state */
}

.mattblackmenu a.selected{
background: #95929C; /*background of tab with "selected" class assigned to its LI */
}

----------------------------------------------------------------------------------------------------------------

/* ######### Drop Down ULs CSS ######### */


.ddsubmenustyle, .ddsubmenustyle ul{ /*topmost and sub ULs, respectively*/
font: normal 9px Verdana;
margin: 0;
padding: 0;
position:absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}

.ddsubmenustyle li a{
display: block;
width: 160px; /*width of menu (not including side paddings)*/
color: white;
background-color: #29375B;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}

* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}


.ddsubmenustyle li a:hover{
background-color: #BBD3EC;
color: black;
}

/* ######### Neutral CSS ######### */

.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 2px;
border: 0;
}

.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 1px;
left: 100px;
border: 0;
}

.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}

}

[jscheuer1]

As long as you use no bulleted lists elsewhere, you may add:

ul, li {
list-style-type: none!important;
}

to your stylesheet. Otherwise you will have to single out the particular ul and li elements by class.