Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3

Thread: List styles

  1. #1
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    I would like to have a custom list styles on my business site, but I noticed that the positioning of the "bullet" is different in the common browsers. Changing the margin and padding to make it look good in one browser will mess it up in other browsers. What can I do so they are uniform in all browsers?

    Thanks in advance.

  2.  

  3. #2
    Junior Member
    Join Date
    Apr 2005
    Location
    california
    Posts
    6
    Member #
    9559
    HTML Code:
    <ul>
      <li>List Item 1</li>
      <li>List Item 2</li>
    </ul>
    Consider the HTML above

    We will first start by removing default margins, paddings and list style. In your stylesheet you can do this by styleing your ul tag

    HTML Code:
    ul {
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    }
    Now you can add your custom bullet image and padding to the li tag

    HTML Code:
    ul li {
    	background: url(bullet.gif) no-repeat left center;
    	padding: 0px 0px 0px 8px;
    }

  4. #3
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    Thanks! That works perfectly.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:36 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com