SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    bullets and pseudo elements or images and padding??

    Hi, I have been able to create image roll overs with inline and block list items, using the image background route, but I was wondering why I have not been succesful using the following route:

    .navListVertical li {
    list-style-type:none;
    }
    .navListVertical li a {
    text-decoration: none;
    }
    .navListVertical li a:link {
    list-style-image:url(../images/design/subNavArrow1Green.png);
    }
    .navListVertical li a:visited {
    list-style-image:url(../images/design/subNavArrow1Green.png);
    }
    .navListVertical li a:hover {
    list-style-image:url(../images/design/subNavArrowGreen.png);
    }

    The reason I started attempting the above method was due to the wrapping of the unordered list items and the resulting unpleasant appearance of an indent as the wrapped line displays without the padding-left space created for the bullet imageas. It makes it appear as though the list items are styled to be 'inside'.

    So I guess I have to find out why the above styles don't work for assigning bullet images to list items or figure out how to indent the wrapping line.
    Any suggestions??

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The above doesn't work because you are applying list-style-image to anchors which are not list elements.

    The list-style-image only applies to lists (li) (funnilly enough )

    Inline elements can be awkward with padding and its usual better to float them rather than display inline etc.

    If you have an example of what you are trying to avoid then it might be easier to work out what you are trying to do and offer some code (if possible of course .

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I really have to try to wrap my head around this css stuff a bit better... I thought a contextual tag would work but that is because I don't quite understand this stuff yet!! Oh well... an example of what is happening can be seen on any of the left or right columns on this site I am building but there are lots of links on the Wordpress blog page... http://66.183.118.242:9090/GCCBFM/news/blog/
    If you resize the window you will see that the list elements appear to be indented on the first line due to the image BG bullet...
    Thanks yet again!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The link above is not working so I can't see exactly what you mean. I'll wait until you fix it before replying again

    Paul


Bookmarks

Posting Permissions

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