Uk and Travel Paintings and Blog

Background icons for anchor text a bit tricky in ie

flash icon exampleFor links to flash movies and pdf documents it’s a really nice effect to add icons in front of the link using style sheet declarations, by setting padding-left and background image the same way as for making list more attractive. Unfortunately, in Internet Explorer it seems a little more difficult than this.

The problem arises when the anchor text wraps around to a second line. The icon then mysteriously disappears. For some strange reason a misplacement of the non-repeating background image is occurring when the in-line anchor text wraps around to another line and I think this is due to a misinterpretation of the left position. I could see more clearly what was happening when I set the background image to repeat. All the repeated icons were aligned ten or so pixels out. The answer was to set display to “inline-block”, which then (in ie) forces all of the anchor text to stay together, running around to the next line, with the icon in the desired position.

Trackback this Post | Feed on comments to this Post

Leave your Comment