Hi all, (Image attached showing what I am trying to do… kindly take a look, thanks.)
I am trying to create an inline list with items having background images (bullets) and varying widths.
But IE7 doesn’t show the (bullet) images on all items… some are missing.
I googled and used some hacks that came up - like using:
but they didnt work for me.
Pls help if you can.
Thanks a lot in advance.
My code:
html:
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li>Eert Aliquam tincidunt mauris eu risus</li>
<li>Vestibulum auctor dapibus neque</li>
<li>Morbi in sem quis dui placerat ornare pellentesque odio nisi</li>
<li>Ilt Lorem ipsum dolor sit amet, consectetuer adipiscing elit </li>
<li>Eert Aliquam tincidunt</li>
</ul>
The placement of background images on inline elements is actually undefined in the specs although most browsers have a pretty good stab at it.
You could set the list to display:inline-block (display:inline;zoom:1.0) and then the image will be placed correctly but the problem is that the line will wrap as a whole and not as half a line as in the inline version.
The only sure way for IE7 and IE6 to behave is to add an element to apply the background image to.
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<style type="text/css">
ul.smllist {
list-style-type: none;
margin:0;
padding:0;
}
ul.smllist li {
display:inline;
margin: 0 5px 0;
line-height:1.5;
}
ul.smllist b {
background:url(images/star.gif) no-repeat 0 50%;
padding:0 0 0 10px;
}
</style>
</head>
<body>
<ul class="smllist">
<li><b> </b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li><b> </b> Eert Aliquam tincidunt mauris eu risus</li>
<li><b> </b> Vestibulum auctor dapibus neque</li>
<li><b> </b> Morbi in sem quis dui placerat ornare pellentesque odio nisi</li>
<li><b> </b> Ilt Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
<li><b> </b> Eert Aliquam tincidunt</li>
</ul>
</body>
</html>
It’s a bit of a hack but should work everywhere assuming your image fits in the line-height. You could set the b element to display:inline-block if you have larger images but the problem will be that the bullet may become orphaned when some lines wrap unlike the example above/
(Use a span if you don’t like my use of the be element).
Strange - that works absolutely fine (on my work PC, upgraded from IE6 to IE8 yesterday, hurrah ). When I tried at home last night, it wasn’t. Maybe it was the conflation of a local file and an http image that was giving it trouble.
). When I tried at home last night, it wasn’t. Maybe it was the conflation of a local file and an http image that was giving it trouble.