Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    HTML CSS - Bullets in Unordered List Not Showing Up

    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
    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:
    Code:
    #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:
    Code:
    ul#services_list li{
    	height: 15px;
    	list-style-image: url(images/check.GIF);
    }

  • #2
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    837
    Thanks
    10
    Thanked 79 Times in 77 Posts
    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.
    Last edited by Major Payne; 09-01-2010 at 08:00 AM.
    ☠ ☠RON☠ ☠

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Jul 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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....

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    837
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Quote Originally Posted by cools4u View Post
    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.
    ☠ ☠RON☠ ☠

  • #6
    New Coder
    Join Date
    Sep 2010
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •