List image wont position inside - inline-block?

hello.

i’m having trouble displaying my menu correctly.

when i use display: inline-block; it pushes the arrow which is a list image up.

if someone could help it would be great

below is an image of the menu i’m having trouble with. you can see that the arrow for “home” has been pushed up.

all i want is a background color to appear behind the arrow and list text when current & hover.

any ideas ??? thanks


#left3col #leftNav ul{
position: relative;
right: 40px;
top:0;
}
 
#left3col #leftNav li{
color: #999;
line-height: 24px;
padding-left: 5px;
list-style: disc inside url("../image/wrapper/redarrow.jpg");
border-bottom: 1px dotted #d1d0c7;
width: 183px;
}
 
 
#left3col #leftNav li a {
	color: #999;
 text-decoration: none;
 
}
 
 
#left3col #leftNav li .current {
background-color: #faf9f9;
width: 184px;
height: 23px;
display: inline-block;
color: #333;
text-decoration: none;
}
 
#left3col #leftNav li a:hover {
    color: #333;
background-color: #faf9f9;
display: inline-block;
}

thanks
rick

MERRY CHRISTMAS

What’s happening on :hover?

Hi,

When you set the list-style to inside the marker becomes an inline element and takes up space on the line. That means that you can’t set the anchor to the full width as there is no room. You would need to set a width of about 165px (approx) for it all to fit on one line.

However, I never use the list-image because it is unreliably placed cross browsers and you have absolutely n control of its position.

Instead I would use a background image instead which can be placed exactly where you want and will work cross browser.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#leftNav ul {
    margin:0;
    padding:0;
    list-style:none;
}
#leftNav li {
    color: #999;
    line-height: 24px;
    border-bottom: 1px dotted #d1d0c7;
    width: 188px;
}
#leftNav li a {
    color: #999;
    text-decoration: none;
    display:block;
    width:168px;
    padding-left:20px;
      background: url(../image/wrapper/redarrow.jpg) no-repeat 3px 50%;

}
#leftNav li .current {
    background-color: #faf9f9;
    height: 24px;
    color: #333;
    text-decoration: none;
}
#leftNav li a:hover {
    color: #333;
    background-color: #faf9f9;
}
</style>
</head>
<body>
<div id="leftNav">
    <ul>
        <li><a class="current" href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
    </ul>
</div>
</body>
</html>


THANKS FOR YOUR REPLIES :slight_smile:

donboe = when i hover the bg color only cover the text and doesn’t go right across

Paul O’B = thanks for that info. ill give it a go now :slight_smile:

PERFECT :slight_smile:

THANKS GUYS :slight_smile: