Can’t Quite Seem to Get Arrow Centered

[Gulfcoast]

The following page: http://dev.charlottes-saddlery.com/Riding-Helmets.htm 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:

Code:

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(http://dev.charlottes-saddlery.com/mm5/Images/Images/sub-nav-arrow.gif) 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

[Gulfcoast]

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…

[Gulfcoast]

It’s fixed. Thank you.

[Author]

Posts