Background image on anchor element won't display in IE 5, 5.5 and 6

[gwh]

Hi everyone

I've got problems with Internet Explorer 5, 5.5 and 6 when trying to create a dotted border effect on anchor elements in two navigation lists I have on a page. In all other browsers I'm using a dotted border rule but because these mentioned IE browsers don't support the dotted style, I've had to substitute a repeated background image. I've used conditional comments to target a separate stylesheet for these browsers (see contents of win_ie.css at end of this post). The problem is that it's not recognising the background image when I target:

#navtop li a

and

#columnLeft li a

You may notice that I have floated all three elements: ul, li and a in the top navigation list. This is because I wanted to center them horizontally within #navtop and this was the only way I could get this happening. I did try giving ul an explicit width and left and right auto margins - this did work but I found that because I didn't know the overall width of the combined li elements, I was having to guess at the width of the ul in order to get it perfectly centered in different browsers. I only mention this because I'm not sure if all these floats have anything to do with the IE browsers refusing to recognise the background image.

The problem page is at the following url together with the two stylesheets:

http://www.officelinkonline.com.au/test/
http://www.officelinkonline.com.au/test/css/main.css
http://www.officelinkonline.com.au/test/css/win_ie.css


Appreciate any help offered.

h1 {
background-image: url(../images/dotborderpurple.gif);
background-repeat: repeat-x;
background-position: left bottom;
border-bottom: none;
}

#navtop li a {
background-image: url(../images/ydot.gif);
background-repeat: repeat-y;
background-position: right top;
border-right: none;
}

#navtop li a#home {
background-image: none;
}

#columnLeft li a {
background-image: url(../images/dotborderwhite.gif);
background-repeat: repeat-x;
background-position: left bottom;
border-bottom: none;
width: 100%;
}

#columnMain {
width: 410px; /* total width, only for IE5.x/Win */
w\idth: 390px; /* content width for other IE */
}

div#tip p {
width: 150px;
w\idth: 140px;
}

[jcdevelopment]

take off the width 100%, and see if that helps. I noticed that sometimes IE or other browsers will only take 100% of the image size, which im not sure if thats what you were wanting. Just try it and see if that allows the image to repeat with the right amount of width!!

Also, not sure, but its best to use % when html is set to 100%, if im wrong anyoone please correct me!!

[gwh]

Thanks for the reply,

I just removed the 100% but unfortunately it didn't make a difference.

The navigation at the top is actually working now, so "#navtop li a" is okay - it's only "#columnLeft li a" that's still not recognising the background image.

I can't work it out - do you have any other ideas?

[jcdevelopment]

see if this works, im not sure, so just try it real quick


#columnLeft li a {
background-image: url(../images/dotborderwhite.gif);
background-repeat: repeat-y;
background-position: left bottom;
border-bottom: none;
width: 100%;
}

[gwh]

That didn't work either.

Anyone-else have any ideas?

[Apostropartheid]

This is a shot in the dark, but try display: inline-block;