Grow your CSS skills. Land your dream job.

problems on list-style-image with an inline unordered list

  • # May 5, 2009 at 6:38 pm

    http://wildfiremarketinggroup.com/AREA-52/LAB/sups/

    Maybe someone sees what’s going here…the unordered list up top (ul.topnav) uses an image ( list-style-image:url(images/bbar.gif); ) but it doesn’t show up. Any idea what I’m missing here? The HTML/CSS validates w/ no errors.

    # May 6, 2009 at 12:49 am

    replace ur css code

    Code:
    .nav-wrap{
    margin-bottom:40px;
    border-bottom:1px solid #f0f1f2;
    height:30px;
    }

    .nav-wrap a, .nav-wrap a:hover, .nav-wrap a:visited, .leftside a, .leftside a:hover, .leftside a:visited{
    text-decoration:none;
    }

    ul.topnav{
    float:right;
    font-size:100%;
    font-weight:bold;
    margin-top:5px;
    }

    ul.topnav li{
    display:inline;
    list-style-image:url(images/bbar.gif);
    padding:10px;
    }

    for

    Code:
    .nav-wrap{
    margin-bottom:40px;
    border-bottom:1px solid #f0f1f2;
    height:30px;
    }

    .nav-wrap a, .nav-wrap a:hover, .nav-wrap a:visited, .leftside a, .leftside a:hover, .leftside a:visited
    {
    text-decoration:none;
    }

    ul.topnav{
    float:right;
    font-size:100%;
    font-weight:bold;
    margin-top:-10px;

    }

    ul.topnav li{
    float:left;
    list-style-image:url(images/bbar.gif);
    list-style-position:inside;
    padding:10px 20px;
    }

    Update: This works fine in Mozilla Firefox 3.0.10 but doesn’t in IE 7 …not sure about other browsers …please try out and let me know

    # May 6, 2009 at 3:54 am

    This is breaking it:

    Code:
    display: inline

    What I do for this type of layout is float: right; and put the <li>s in reverse order.

    # May 6, 2009 at 5:47 am
    "AshtonSanders" wrote:
    This is breaking it:

    Code:
    display: inline

    What I do for this type of layout is float: right; and put the <li>s in reverse order.

    Hey Ashton thought that image doesn’t show up in IE 7 check it out

    # May 7, 2009 at 3:06 am
    "cssfreak" wrote:
    Hey Ashton thought that image doesn’t show up in IE 7 check it out

    What?

    The list-style-image doesn’t show up in any browser because it is set to "display:inline"

    Alternatively, you could change:

    Code:
    list-style-image:url(images/bbar.gif);

    to:

    Code:
    background: url(images/bbar.gif) left top no-repeat

    That should add the image to each list item.

    -Ashton Sanders

    # May 7, 2009 at 4:47 am

    Don’t wish to hijack your post but I have the a similar issue and thus didn’t want to start a new topic.

    My bullet image just get spat out of the bottom of my footer?

    Example here; http://www.grantsmithportfolio.com

    As you will see, my bullet images are just spat out of the bottom of my footer.

    Any ideas?

    # May 7, 2009 at 5:00 am
    Quote:
    Any ideas?

    May have something to do with the fact that your bullet image is 842 pixels wide and 595 pixels high.

    # May 7, 2009 at 5:24 am

    Oops!! Just so I know, how did know that? Just would be helpful for future reference.

    # May 7, 2009 at 5:39 am

    I went through the page with firebug.

    # May 7, 2009 at 11:55 pm
    "AshtonSanders" wrote:
    "cssfreak" wrote:
    Hey Ashton thought that image doesn’t show up in IE 7 check it out

    What?

    The list-style-image doesn’t show up in any browser because it is set to "display:inline"

    No Ashton what i am telling is even after the display:inline is removed ..it doesn’t display in IE7 ..i have given the same solution as u …..to remove display:inline…..check ma post before yours……….

    # May 8, 2009 at 2:10 am
    "cssfreak" wrote:
    No Ashton what i am telling is even after the display:inline is removed ..it doesn’t display in IE7

    Oooh, that’s what you were trying to say. Taking a couple seconds for proofing helps others to understand what you’re trying to say.

    Did you create the page in IE7 without display:inline? How did you check this?

    "cssfreak" wrote:
    ..i have given the same solution as u …..to remove display:inline…..check ma post before yours……….

    Actually, you replaced "display:inline" with "float:left" which would change his navigation layout. You also didn’t mention what or why you made those changes. I figured explaining what was going on would help him to learn… (which is ironic since the originator of this 11 post thread hasn’t even come back to see the answer to his simple problem. :D )

    # May 8, 2009 at 3:28 am
    "AshtonSanders" wrote:
    "cssfreak" wrote:
    No Ashton what i am telling is even after the display:inline is removed ..it doesn’t display in IE7

    Did you create the page in IE7 without display:inline? How did you check this?

    sorry regarding not explaining stuff coz i was a little pre-occupied with work
    anyways yes i created the page…..it displays fine in FF3 but IE7 doesn’t display the image

    Quote:
    Actually, you replaced "display:inline" with "float:left" which would change his navigation layout. You also didn’t mention what or why you made those changes. I figured explaining what was going on would help him to learn… (which is ironic since the originator of this 11 post thread hasn’t even come back to see the answer to his simple problem. :D )

    yes i did replace it coz without float:left or probably even right the entire list display as a block ……

    # May 8, 2009 at 4:36 am
    "AshtonSanders" wrote:
    "cssfreak" wrote:
    No Ashton what i am telling is even after the display:inline is removed ..it doesn’t display in IE7

    Actually, you replaced "display:inline" with "float:left" which would change his navigation layout. :D )

    i was just wondering about what u said ……it would change his navigation layout coz in his css he has written

    Code:
    ul.topnav
    {
    float:right; < -----
    font-size:100%;
    font-weight:bold;
    margin-top:-8px;
    }

    that will keep the list to the right hand side

    what i did was

    Code:
    ul.topnav li
    {
    float:left < ---
    }

    that will force the image to the left….not the list :D

    Sorry for not being explanative earlier

# May 8, 2009 at 1:34 pm
Code:
ul.topnav
{
float:right; < -----
font-size:100%;
font-weight:bold;
margin-top:-8px;
}

I’m assuming you’re hoping that that "float: right;" will make the width of the UL as minimized as possible. Have you checked this in IE 6?

I would still recommend a simple background image as it’s the simplest, and I can’t think of any cross-browser problems with it.

# May 10, 2009 at 12:45 am
"AshtonSanders" wrote:
Code:
ul.topnav
{
float:right; < -----
font-size:100%;
font-weight:bold;
margin-top:-8px;
}

I’m assuming you’re hoping that that "float: right;" will make the width of the UL as minimized as possible. Have you checked this in IE 6?

I would still recommend a simple background image as it’s the simplest, and I can’t think of any cross-browser problems with it.

well i haven’t tested it with IE6……coz i have IE7 …is there anyway where i can check it online….i dont have anything live at the moment…..

This is is what i think is happening…since we give float:right in the css of <ul>……….the image hides coz there is no margin on the left side of the <li> so making the <li> float to left reveals it……without changing the layout….only problem is IE…….

Viewing 15 posts - 1 through 15 (of 22 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".