CSS List center aligned with image bullets aligned right

[mkallis]

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/

[stefsull]

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.)

[stefsull]

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

[Paulie_D]

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! :)

[neerukool]

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

[stefsull]

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.

[Author]

Posts