Bullet images on <a> tags don't work in IE5

What is an alternative method to achieve this effect?

[premasagar]

Hi there.

I am trying to get the effect of a small bullet image appearing to the left of a hyperlink. The styles I have used work in Internet Explorer 5.5 & 6, as well as Opera 5 & 7, Safari and Mozilla. But they don't work in IE 5!

Here is the code:

a {
padding-left:14px;
}
a:link, a:visited, a:active{
background: transparent url(/images/template/bullet_off.gif) center left no-repeat;
}
a:hover{
background: transparent url(/images/template/bullet_on.gif) center left no-repeat;
}

The padding-left gives enough space for the bullet to appear. But in IE5, it doesn't matter how big the padding is, the hyperlink appears without padding and the bullet overlaps the left of the link.

Changing "padding" to "margin" makes no difference.

I notice that if I add "display:block" to the <a> tag style, the padding magically starts working and the link itself appears as desired. But, of course, it then appears on its own line, with the text the follows and precedes it on separate lines. This is not what I want to happen!

Any ideas on an alternative approach?

Thanks in advance,
Prem.

[encyclo]

Have you tried adding float:left; as well as display:block; to the links? That might help you along the way...

I'm not sure I fully understand your example though - are you using a list, or are you placing the raw anchors in a div block?

[premasagar]

The <a> tags could be anywhere, not necessarily within lists. They could be within a <p>, a <div>, anywhere. And I want a little bullet image to automatically appear just to the left of the link.

If I had the hyperlinks on their own within a list, then I could indeed use the display:block method.

If I apply float:left, then the entire link would then be taken out of its surrounding text in the container (a <p> or a <div>) and would float to the left of that container. I don't want that to happen.

Any thoughts?

Thanks,
Prem.

[isitreal]

There's another problem with what you're trying to do, by the way. The background images won't be cached in the browser, so users on dialup modems will get very slow switching of images, if it even works at all.

Which IE 5 are you seeing this problem in, 5.0 or 5.5.

IE 4 didn't support padding on <a> tags if I remember right, can't remember if 5.0 did or not.

If you want reliable image swapping that works cross browser and cross platform think of using light javascripting to do that, it will give much more consistent results, none of the CSS methods I've seen actually work in real world apps.

[Bonusbana]

a {padding-left:14px;}

works fine in mac IE5. I wouldnt know about any IE5/win bugs in this area.

[premasagar]

Hi there. Thanks for the replies so far.

The buggy browser I was referring to is IE 5.0 on Windows(2000 Pro).

There would a slight lag for users on dial-up, but as the bullet images are very small, the lag would not be great. I could always preload the images with JavaScript.

Prem.

[isitreal]

Unfortunately, no, you can't preload background images with javascript, that's the problem with using background image switching, I found that out about a year ago when I was trying it. There is CSS method that involves simply changing the position of the background image, which contains the on/off images, but that method has fairly massive display failures on MSIE running on slower pc's, not something you'd want to subject your users to if you care about a quality user experience or how your page displays.

Only MSIE >= 6 really supports these methods, and then only on faster pc's (of course most other browsers support many advanced CSS things better, but that doesn't help when 80-90+% of your users run IE 6), that's why I would recommend just using javascript for the whole thing if you want reliable results (if you're willing to use a little javascript to make it work, you might as well use a little more to make it work pretty much perfectly for all your users, it's not a page critical feature after all.)

there are other options that will work very well and create the illusion of image switching, like having the hover event change the color of an item contained in a span tag in the a link, that's quite effective, although it limits you to characters.

eg:
a span {background-color:yellow;color:yellow;}
a:hover span {color:green;}

then <a href=...><span><<</span>link text</a>

[DrDoc]

But in IE5, it doesn't matter how big the padding is, the hyperlink appears without padding and the bullet overlaps the left of the link.

That's the famous box model bug in IE. The problem is that IE applies padding on the inside of the content, not the outside like it's supposed to.

There's no workaround for this other than to wrap each anchor in another element (a span for example) and apply bullet background to it instead, and a left margin to the anchor.

[premasagar]

Thanks for the ideas. I'll try these out.

Prem.