SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Minnesota/America
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image for <LI> - Any success?

    I have a <UL> of 5 items, each with a separate background. Specifying a background image doesn't work for Safari or IE6. Has anyone had success with this scenario?

    My CSS:


    #auto {
    background-image: url(/images/li-auto.gif);
    height: 170px;
    width: 140px;
    list-style-type: none;
    background-repeat: no-repeat;
    }
    Paul Larson
    Creative Arc, Inc. - Minneapolis Web Design
    http://www.creativearc.com
    ArcLog: Resource for running a web business prime beef

  2. #2
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I undersatnd correctly, this is what I would do, you are trying to put 5 different backgrounds in a <li>

    CSS:
    Code:
    ul li {
     	margin: 0;
     	padding: 0;
     }
     li {
     	height: 30px;
     	width: 140px;
     	list-style: none;
     }
     ul li .cls1 {
     	background: #CCCCCC url(tab1.gif) no-repeat right;
     }
     ul li .cls2 {
     	background: #CCCCCC url(tab2.gif) no-repeat right;
     }
     ul li .cls3 {
     	background: #CCCCCC url(tab3.gif) no-repeat right;
     }
     ul li .cls4 {
     	background: #CCCCCC url(tab4.gif) no-repeat right;
     }
     ul li .cls5 {
     	background: #CCCCCC url(tab5.gif) no-repeat right;
     }
    and then the code:

    Code:
    <ul>
     	<li class="cls1">text 1 here
     	<li class="cls2">text 2 here
     	<li class="cls3">text 3 here
     	<li class="cls4">text 4 here
     	<li class="cls5">text 5 here
     </ul>
    This works for me in IE, however I can see it in safari cause I dont have safari.

    Let me know if that helps at all
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

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

    Can you run that by me again

    I don't see a problem with applying a background image to an ul or to list items! Or did you mean something else.

    Paul

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Minnesota/America
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by -Ox
    If I undersatnd correctly, this is what I would do, you are trying to put 5 different backgrounds in a <li>
    Hmm, that code doesn't work for me in Safari nor IE.

    Can you give me an URL?
    Paul Larson
    Creative Arc, Inc. - Minneapolis Web Design
    http://www.creativearc.com
    ArcLog: Resource for running a web business prime beef

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Minnesota/America
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Can you run that by me again

    I don't see a problem with applying a background image to an ul or to list items! Or did you mean something else.

    Paul
    Paul:

    No, you're right on. I'm trying to do this:

    <ul>
    <li id="one">This is image one.</li>
    <li id="two">This is image two.</li>
    <li id="three">This is image three.</li>
    </ul>

    It just doesn't work. I suppose it could be a bad URL to the image, because the CSS is too simple to be wrong. =)
    Paul Larson
    Creative Arc, Inc. - Minneapolis Web Design
    http://www.creativearc.com
    ArcLog: Resource for running a web business prime beef

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Minnesota/America
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hah...problem solved.

    URL issue. DOH! Because the image reference was in a CSS, it was basing its path on /styles, while I was thinking of Site Root.

    Thanks for your help, just the same!
    Paul Larson
    Creative Arc, Inc. - Minneapolis Web Design
    http://www.creativearc.com
    ArcLog: Resource for running a web business prime beef

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    URL issue
    Glad you solved it - it had to be something simple lol

  8. #8
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    glad you got it solved
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net


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
  •