...

View Full Version : HTML CSS - Bullets in Unordered List Not Showing Up



mtnmch
09-01-2010, 04:13 AM
I am trying to show an unordered list within the content of one of my pages using a bullet I created.

I made this list a secondary list b/c my navigation is also an unordered list that displays the nav tabs horizontally along the page. I don't know if the CSS code from that is over-riding my secondary unordered list but all that is showing up on the page is just the text. No bullets or any other changes. I have been GOOGLING this issue for over an hour but no luck.

Can anyone help?
HTML CODE


<ul id="services_list">
<li>List item</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>


CSS Code for the Navigation:


#navcontainer ul {
padding: .2em 0;
margin: 0;
background-color: #658C88;
color: #FFF;
width: 100%;
font: normal 90% arial, helvetica, sans-serif;
text-align: center;
}
li {
display: inline;
font-family: Verdana, Geneva, sans-serif;
text-transform: uppercase;
}
li a {
text-decoration: none;
background-color: #658C88;
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #fff;
}
li a:hover {
background-color: #011526;
color: #D9D3B8;
}


CSS Code for the unordered list w/ custom bullet:


ul#services_list li{
height: 15px;
list-style-image: url(images/check.GIF);
}

Major Payne
09-01-2010, 07:55 AM
Make sure image file name is correct (check.GIF). Could be check.gif. Be sure you are not using a real large image for the bullet. Make sure the path called is correct. You should use a backup list-style:

[code}
ul#services_list li{
height: 15px;
list-style-type: square;
list-style-image: url(images/check.GIF);
}

May have that in wrong order. :P Be sure you have enough width to allow for image bullet. Sometimes margins and paddings mess you up putting the bullets outside where they don't show.

abduraooft
09-01-2010, 08:14 AM
It'd be easy for you to set it as the background-image instead of list-style-image, if you are worried about cross browser(IE ;)) compatibility

cools4u
09-02-2010, 12:51 PM
generally the css code [list-style-type: square;list-style-image: url(images/check.GIF);] does not work properly on all browsers, avoid using it instead try to use <img> tag if you want to display image as a bullet....

Major Payne
09-02-2010, 01:26 PM
generally the css code [list-style-type: square;list-style-image: url(images/check.GIF);] does not work properly on all browsers, avoid using it instead try to use <img> tag if you want to display image as a bullet....I have never had a problem with any of the standard CSS properties of CSS 2.1 in ANY browsers. IT is what you would use and it does NOT have to be a square, but any CSS 2.1 style for the bullet. It is just a BACKUP should the image not load.

mtnmch
09-02-2010, 10:10 PM
Hey guys,

I'm going to take a look at this and try out your suggestions tonight after my meeting. HOpefully I can get it to work in the CSS but if it doesn't i have it showing up using <img src>. I'll post back in a bit. Thanks for the feedback!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum