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

Home Forums CSS Can’t Quite Seem to Get Arrow Centered

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #28703

    The following page: has me struggling to get the navigation arrows in the left hand sidebar centered. IE (everyones favorite browser) looks to be the culprit as usual. IE wants to place the arrows at the top and not centered. I’m sure the solution is simple but I’m not seeing it. There are two arrows, one for the main category and one for sub categories, and I’m basically trying the following: <div style="float:right; margin: 20px 0 0 0; padding: 0px; border: 0px;"><img src="Images/Images/sub-nav-arrow.gif"></div> Any suggestion or help with a fix would sure be appreciated. Thank you.

    Rob MacKay

    nope that’s definitely you and not IE lol

    Ok so – firstly you have your LI’s in that sidebar set as inline – is there anyreason for that? I would remove that first of all.

    Then there are many ways you could do this better… but the way I did it quickly was:

    ul.sidebar-list li {
    position:relative /*So you can position the arrow inside the li*/

    /*add this class to the div with the arrow in and remove the */
    div.arrowbox {
    background: url( no-repeat;
    height: 12px;
    width: 10px;
    position: absolute;
    right: 10px;
    top: 10px;

    this way you are not using floats, margin, padding or anything that will fail horribly while being interpreted differently


    Thanks for all your trouble and help with this Rob. I’m guess I’m still not getting it. You can see it now. Actually, the arrow is now completely gone so I don’t know what I did…


    It’s fixed. Thank you.

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