www.webdeveloper.com
Results 1 to 10 of 10

Thread: problem with list-bullets and inline display

  1. #1
    Join Date
    Dec 2003
    Location
    Netherlands
    Posts
    642

    problem with list-bullets and inline display

    Hallo,
    i ' m busy with a horizontal bar for navigation. I'm using CSS and unordered list. My bar looks fine but the selected list images will not show. My style:
    PHP Code:
    <style type="text/css">
    <!--
    #nav1{
        
    positionabsolute;
        
    left25px;
        
    top120px;
    }
    #nav1 ul {
    text-aligncenter;
    margin-left0;
    padding-left0;
    }
    #nav1 li {
        
    padding3px 10px;
        
    displayinline;
        
    font-familyArialHelveticasans-serif;
        
    font-size12px;
        
    font-weightbold;
        list-
    style-imageurl(images/red_bullet.gif);
        list-
    style-positioninside;
        list-
    style-typenone;
    }
    -->
    </
    style
    The link is ok, i checked this while disabling "display: inline".
    Please help me, what wrong?

  2. #2
    Join Date
    Aug 2003
    Posts
    1,576
    setting li's to display:inline negate's ul list-style's. try setting them to float:left instead

  3. #3
    Join Date
    Dec 2003
    Location
    Netherlands
    Posts
    642
    Thanks for your answer. But it works not in IE. Is there way to handle this in IE?

    This works (only) in mozilla:

    #nav1 ul li:before {
    content: "\0020 \0020 \0020 \00BB \0020";
    color: #CC0000;
    }

  4. #4
    Join Date
    Apr 2004
    Location
    Baarn, Holland
    Posts
    25

    Fake it

    You could emulate the effect by using the image as background image (no-repeat, position left center) on the list items and move the content away with some left padding.
    MaxDesign's Listurorial shows in detail how to go about this.
    Regards,
    Ronald.

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    As suggested by ronaldb66:

    #nav1 li {
    padding: 3px 10px;
    display: inline;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    background:url(images/red_bullet.gif) left no-repeat;
    }

    :before is not supported by IE

  6. #6
    Join Date
    Dec 2003
    Location
    Netherlands
    Posts
    642
    bedankt,

    this works really goed.

    Is there a way to use characters in case of images?
    (a way that will show au in IE)

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Not with css, use entities in a span:
    <span style="color:red;">& nbsp;& nbsp;& nbsp;& raquo;& nbsp;</span> (remove spaces)
    The first three spaces can be achieved by altering the padding-left of the li

  8. #8
    Join Date
    Dec 2003
    Location
    Netherlands
    Posts
    642
    Ok,

    but i have to place this entities before each item, or not?

  9. #9
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Just do this:

    <li>
    &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;raquo;&amp;nbsp;<a href="blah.html">Blah</a>
    </li>

    Then colour the text in your li's whatever you want and the same for the text in your links.

    Edit: Fang, just type &amp;amp;nbsp; in if you want to show &amp;nbsp;
    Last edited by David Harrison; 05-03-2004 at 09:44 AM.
    Every fight is a food fight when you’re a cannibal.

  10. #10
    Join Date
    Dec 2003
    Location
    Netherlands
    Posts
    642
    Hmmmm...

    I like Fang's solution (dankje wel).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles