ProblemYou want to use a large custom graphic for a list marker without running into constraints by using list-style-image property. SolutionFirst, remove default list marker through the list-style property (see Figure 5-8): ul { margin-left: 40px; padding-left: 0px; list-style: none; } Figure 5-8. Default list markers are removedApply enough padding on the right side of the list item to allow the new image marker to be placed (see Figure 5-9): ul { margin-left: 40px; padding-left: 0px; list-style: none; } li { padding: .3em 0 1em 40px; font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif; } Figure 5-9. Extra padding is placed on the left side of the listThen insert the new custom marker through the background property (see Figure 5-10): ul { margin-left: 40px; padding-left: 0px; list-style: none; } li { padding: .3em 0 1em 40px; font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif; background: url(search_32.eps) no-repeat; Figure 5-10. A large image used for a marker isn't fully displayed} DiscussionUsing the background property to create enhanced list presentation allows for greater flexibility than using the list-style-image property. With this technique, any size custom list marker can be used as long as there is enough padding set to the left of the list item. See AlsoRecipe 5.7 for a more complex version of this Solution. |