Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS problems on list-style-image with an inline unordered list

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #24800
    jlknauff
    Member

    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.

    #57184
    cssfreak
    Member

    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

    #57189
    AshtonSanders
    Participant

    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.

    #57195
    cssfreak
    Member
    "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

    #57265
    AshtonSanders
    Participant
    "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

    #57267
    grant.smith
    Member

    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?

    #57269
    apostrophe
    Participant
    Quote:
    Any ideas?

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

    #57270
    grant.smith
    Member

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

    #57271
    apostrophe
    Participant

    I went through the page with firebug.

    #57300
    cssfreak
    Member
    "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……….

    #57301
    AshtonSanders
    Participant
    "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 )

    #57304
    cssfreak
    Member
    "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 ……

    #57305
    cssfreak
    Member
    "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

    #57316
    AshtonSanders
    Participant
    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.

    #57362
    cssfreak
    Member
    "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)
  • The forum ‘CSS’ is closed to new topics and replies.