Forums

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

Home › Forums › CSS › Bullet alignment in unordered list (IE7)

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • November 18, 2009 at 3:24 pm #26820
    evilhita666
    Member

    Hello, I’m new to the forums, my real name is Carlos and I’m a 26 year-old back-end programmer (mostly J2EE) from Colombia that is currently getting into the realm of front-end design…

    Now onto the subject… I’m working in a little, yet important, project to get myself used to xhtml and css, and with help of this site I’ve been able to solve a lot of weird behaviors except the one I will describe next.

    I have a side navigation bar with an accordion widget from the jQueryUI library. Each accordion level has a content area with a unordered list of some navigation links as you can see in the screenshot below taken in Firefox 3.5 (sorry for the crappy quality):[attachment=1]ole000.JPG[/attachment]

    As you can see, the bullets align nicely with the middle of the links, it also works smoothly in Safari 4, Opera 10, Chrome 3 and IE8, but when I switch to IE7, the bullets align to the baseline of the "il" element and it looks terrible, not to mention it disorients the user, as you can see in the following screenshot (forgive the squared corners, hehehe):
    [attachment=0]ole001.JPG[/attachment]

    I tried messing around with the vertical-align property but haven’t been able to get the desired result (the one in the first screenshot)… Alingning to "top" places the bullet way too high…

    Here’s some (hopefully) relevant markup:

    XHTML (Strict): Outline of menu

    Code:

    CSS: Style for the menu

    Code:
    #nav {
    float: left;
    width: 256px;
    }

    #accordion{
    font-size: 12px;
    text-align: left;
    padding: 40px 0 0 5px;
    margin: 0 30px 0 0;
    }

    #accordion h3{
    font-size: 12px;
    height: 20px;
    padding: 5px 0 0 22px;
    }

    #accordion ul{
    color: #df0015;
    list-style-type: disc;
    }

    #accordion a:link{
    color: #000000;
    text-decoration: none;
    }

    #accordion a:visited{
    color: #0078a3;
    }

    #accordion a:hover{
    color: #df0015;
    text-decoration: underline;
    }

    I can’t post a live example, but if you need more info please don’t hesitate to ask… I would really appreciate some help, so thanks in advance and good luck!

    November 18, 2009 at 8:40 pm #66785
    Nert
    Member

    I would try to apply list style type to the li instead of the ul and see if that may solve your problems. Worse case scenario I would look into using an image for your li’s with background positioning. This seems to work pretty well cross browser / platform for me.

    November 19, 2009 at 11:57 am #66806
    evilhita666
    Member

    Thanks Moxy, I tried applying the styles to the <il> but it didn’t work either. So I decided to give a chance to the background image workaround which I was trying to avoid because I thought it would be too complicated, but to my surprise it was quite simple and now it works the same in every browser I tested, thanks again!

    Admins can tag this thread as solved if they consider it necessary…

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.