SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy inline list having varying width items

    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:
    Code:
      display: -moz-inline-stack;
       display: inline-block;
       zoom: 1;
      *display:inline;
    but they didnt work for me.
    Pls help if you can.
    Thanks a lot in advance.
    My code:
    html:
    Code:
        <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>
    css
    Code:
        ul.smllist{
    	list-style-type: none;
    }
        ul.smllist li{
            display:inline;
    	margin: 0 5px 5px 0;
    	list-style-type: none;
            background-image: url("../images/ylwstar1.gif") ;
    	background-repeat: no-repeat;
    	background-position: 0px 3px ;
    	padding: 0 0 0 10px;
    }
    Attached Images Attached Images

  2. #2
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, please tell me if it is possible to create an inline list like this:

    Thanks a lot in advance.

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    It's dead easy unless you need it to work in IE...

    Code CSS:
    li {display:inline;}
    li:before {content: url(/images/yellowstar.png); padding-right:0.25em;}

    That works in Opera, Firefox, Chrome and Safari, but doesn't give anything in IE8, which doesn't support a URL in generated content.

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

    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.

    Code:
    <!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>&nbsp;</b>&nbsp;Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
        <li><b>&nbsp;</b>&nbsp;Eert  Aliquam tincidunt mauris eu risus</li>
        <li><b>&nbsp;</b>&nbsp;Vestibulum auctor dapibus neque</li>
        <li><b>&nbsp;</b>&nbsp;Morbi in sem quis dui placerat ornare pellentesque odio nisi</li>
        <li><b>&nbsp;</b>&nbsp;Ilt Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
        <li><b>&nbsp;</b>&nbsp;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).

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stevie D View Post

    That works in Opera, Firefox, Chrome and Safari, but doesn't give anything in IE8, which doesn't support a URL in generated content.
    That will work fine in IE8 Stevie

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That will work fine in IE8 Stevie
    Well ... I tried it ... and it doesn't

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Well ... I tried it ... and it doesn't
    Well I tried it and it does

  8. #8
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does!!
    Thanks a million, Paul.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cssusr View Post
    It does!!
    Thanks a million, Paul.
    It was Stevie's original idea so thank him

    Remember that it won't work in IE7 though which was your original main concern I believe.

  10. #10
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure.. thanks a lot Stevie, for figuring it out.

    Remember that it won't work in IE7
    But its working in IE7 on my PC !! (on Vista 64)

    But the images doesn't show up when I checked on NetRenderer (IE7)

    So, maybe there is no workaround for this to display correctly on IE7 also?

    Thanks.

  11. #11
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Well ... I tried it ... and it doesn't
    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.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cssusr View Post
    Sure.. thanks a lot Stevie, for figuring it out.

    But its working in IE7 on my PC !! (on Vista 64)
    IE7 doesn't support the :before pseudo class so I don't see how it can work - very strange

    The only fix I can see for IE7 is to make the list inline-block and then the image will stay n place but each list item will wrap as a whole block.

    e.g. Like This.

    Code:
    <!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 10px 0 0px;
        line-height:1.5;
    }
    ul.smllist li {
        background: url(images/starry.gif) no-repeat 1px 1px;
        padding-left:17px;
    }
    *+html ul.smllist li{display:inline;zoom:1.0}
    </style>
    </head>
    <body>
    <ul class="smllist">
        <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>
    </body>
    </html>
    Last edited by Paul O'B; Mar 12, 2011 at 05:34.

  13. #13
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, 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
  •