CSS : CROSSBROWSER SOLUTION

Crossbrowser Solution

The following example displays the image-marker equally in all browsers:

Example

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 
}

Example explained:

• For ul:
• Set the list-style-type to none to remove the list item marker
• Set both padding and margin to 0px (for cross-browser compatibility)
• For all li in ul:
• Set the URL of the image, and show it only once (no-repeat)
• Position the image where you want it (left 0px and down 5px)
• Position the text in the list with padding-left

 
 
 
 

• Other Topics
  CSS : Table borders,CSS : List properties,CSS : List-Shortand Property,CSS : Crossbrowser solution,CSS : Image as the list item marker,CSS : Text indentation,CSS : Text transformation,CSS : Text Decoration,CSS : Text alignment,CSS : Text color,CSS : Table width and height,CSS : Collapse borders,CSS : List,CSS : Background color,CSS : Styling links,CSS : Padding properties,CSS : Padding-shorthand property,CSS : The lang pseudo class,CSS : MEDIA,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,