Grow your CSS skills. Land your dream job.

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): http://postimage.org/image/gh0rh25wp/

    # 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: http://jsfiddle.net/stefsull/wDEyc/ (Didn’t try to make everything exact, but should give you the idea.)

    # November 27, 2012 at 12:16 am

    @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 ie6countdown.com, I’m desperately waiting for ie7countdown.com & ie8countdown.com :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.

*May or may not contain any actual "CSS" or "Tricks".