SitePoint Sponsor

User Tag List

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

    List items with transparent GIF

    URL: http://creativearc.mysite4now.com/00insurance/

    Please see my attached GIF to get an idea of what my goal is.

    I have a <DIV> with a background image; contained within are <LI> with background images that happen to be transparent.

    <DIV> <!-- with background -->
    <UL>
    <LI> <!-- with background -->
    Foo
    </LI>
    </UL>
    </DIV>

    In Internet Explorer, it actually renders the transparency 'properly.' Safaria/Firefox don't get it quite right.

    Obviously the curvature effect is what I'm looking for...if anyone knows how to do it w/o transparency I'm eager to hear your suggestion.

    CSS:
    [CODE]
    ul#buttons li {
    display: block;
    float: left;
    list-style-type: none;
    }

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

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

    I'm not sure if this has anything to do with what you are talking about but your background isn't covering the lists because you need to clear the floats. You have a clear but its in the wrong place for the background.

    heres a better clear class.
    Code:
    .clear {
    clear: both;
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    }
    And it should be here:
    Code:
    <li id="events"><a href="/home">Home</a> Lorem impsum Lorem impsum Lorem 
    impsum Lorem impsum Lorem impsum Lorem impsum Lorem impsum Lorem impsum 
    Lorem impsum</li>
    <li id="business"><a href="/home">Home</a> Lorem impsum Lorem impsum Lorem 
    impsum Lorem impsum Lorem impsum Lorem impsum Lorem impsum Lorem impsum 
    Lorem impsum</li>
    </ul>
    <br class="clear" />
    </div>
    <!-- end content -->
    <br class="clear" />
    </div>
    <!-- end wrapper -->
    </body>
    </html>
    Hope that helps.

    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
  •