Using background image with list item

[wkenny]

I am using a background image for list items which are href links. When the link text wraps to a second line, the background still shows in IE (which is what I want) but not in FF.

Can anybody tell me what the problem is?



The HTML is
<div id="leftnav">
<ul id="navigation">
<li><a href='mysite.com'>Very long link text wraps</a></li>

and the CSS is

#leftnav
{
float: left;
width: 14%;
margin: 0;
padding-top: 1em;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 0;
}

#navigation {
position: relative;
float: left;
display: block;
padding: 0;
margin: 0;
font-weight: bold;
width: 100%;
}

#navigation li {
position: relative;
float: left;
width: 100%;
display: inline;
list-style: none;
padding: 0;
margin: 0;
text-align: left;
background-image: url('bg.jpg');
background-repeat: repeat-x;
border-top: 1px solid gray;
background-color: #FEFCFF;

}

#navigation li a {
padding-top: 0;
padding-bottom: 0;
padding-right: 0.5em;
padding-left: 0;
text-decoration: none;
width: 97%;
border-left: 1em solid #AAB;

}

[wkenny]

The problem seems to be more complex than I thought.

On my home page http://www.estateagentsespana.com/ in IE the menu on the left has an entry Costa Calida/ Murcia which wraps and the background image shows behind the wrapped part.

But on page

http://www.estateagentsespana.com/costadorada/tarragona_estate_agents_01.htm

in IE the wrapped part e.g. La Amettla de Mar does not show the background image.

Both use the same stylesheet and class and I cannot figure out what is happening.

[Veronica]

You can do 1 of 2 things to fix it. The first is to change your css line:

background-repeat: repeat-x;

to

background-repeat: repeat;

This will make your image keep repeating vertically, as well as horizontally, as many lines as the link takes. With repeat-x it will only repeat horizontally.

The second thing would be to change the image itself, and make the image height bigger so that it will fill both lines if it needs to. When the links are only one line, you'd just see the top part of the image. But if they drop to a second line, you'd see the whole image

[wkenny]

Thanks, Veronica - the repeat works fine.

Is there any way to get the grey border to display on the wrapped part?

[Veronica]

The left grey border displays on both lines in IE, but not FF.

Try adding this to your css:



#navigation li a {
padding-top: 0;
padding-bottom: 0;
padding-right: 0.5em;
padding-left: 0;
text-decoration: none;
width: 97%;
border-left: 1em solid #AAB;
display:block; /*indents the second line*/

}

[wkenny]

Thanks, Veronica.

I tried that before but in IE it adds a second line to all list items and only shows the grey if there is content on the second line.

[Veronica]

That's weird. I'm not getting that when I tried it with just an abreviated version of the list & css - even in IE, the short ones were one line, only the long ones were 2, and they indented to show the gray part.

I guess the other thing would be to lose the 1em gray border, put the gray in the actual image and add padding to the left of the text? That's probaly not the effect you're going for though...

[wkenny]

No, its not what I want but I like the lateral thinking re the image.
Thanks again.