The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

CSS List center aligned with image bullets aligned right

  • # November 26, 2012 at 4:45 pm

    I’ve tried every way I can find and nothing works. The background image bullet method looks good in all browsers but IE – the image is too tight to the text. This is what I want it to look like (sorry about the ads):

    # November 27, 2012 at 12:07 am

    I’m not sure what your IE requirements are. But if it’s IE8 and up, you can use this method without images/with pseudo-elements: (Didn’t try to make everything exact, but should give you the idea.)

    # November 27, 2012 at 12:16 am

    This reply has been reported for inappropriate content.

    @stefsull You mean with pseudo-elements?

    # November 27, 2012 at 11:30 am

    Exactly… isn’t that what I said above (OK, it was late, so maybe I wasn’t uber clear)? I love pseudo-elements… :)

    # November 27, 2012 at 11:34 am

    However, if he doesn’t want to go that route then just adding a little more padding-right would probably sort out the issue with the bg image.

    If IE is causing problems that can be tweaked in the IE stylesheet…I assume he has one…most of us do! :)

    # November 27, 2012 at 12:37 pm

    I use the CSS exactly the way @stefsull said..

    But that pointer style is applied to a div & it is appended through jquery after() method. since client wants site to run properly in IE 7/8 where :after is not supported.

    After, I’m desperately waiting for & :P

    # November 27, 2012 at 3:25 pm

    IE8 does support :after … So I would probably use the pseudo-elements for IE8 & up (plus modern browsers), then use a polyfill (like jQuery, loaded using Modernizr/yepnope.js) for IE6/7 … to feed the dinosaurs.

    Conversely, you could use an image for IE6/7 and by using IECCs on the HTML or body element, you can prepend .ie6 and .ie7 to a class that loads an image for those browsers only.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed