CODEWITHSUNDEEP
csshtmlbackground-imageinternet-explorer-6
troty_master
troty_master

Reputation: 315

How to position background image on a longer <a> link on IE6

I have a problem with an link's background. For my exam this must work on all browsers down to IE 6. Problem is I am using a background image that should be positioned on the left of the links, but if the link is longer than one line IE 6 gets confused and positions the background image centered left, not top left...

I am using a 2colors .gif image and the anchor tag is located as follows

<style>
#right-menu {
    float:left; width: 260px; border: 1px solid #e7e7e7; margin-left: 20px;
    padding: 15px 20px;
    background-color: #f6f6f6; min-height: 715px;
}

#right-menu .title {
    font-size: 1.5em; color: #4a493f; font-weight: bold;
}

#right-menu a {
    color: #4b4a41; font-size: 1em; padding-left: 15px;
    background: url(../assets/bullet2.gif) left no-repeat;
    display: inline;     
}
</style>

<div id = "right-menu">
    <h3 class = "title">
        recent comments
    </h3>
    <ul>
        <li>
            <a href = '#' title = 'title'>
                Etiam placerataaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...
            </a>
        </li>
        ...
    </ul>
</div>

The problem

If it cannot be done I will still appreciate someone stopping me from trying again and again.

Thank you for your time!

Upvotes: 0

Views: 68

Answers (1)

jfriend00
jfriend00

Reputation: 707308

According to this article, several versions of IE just don't do the right things when rendering background images on multiline inline elements. There are several possible work-around mentioned in the article. The simplest looks to be using inline-block as the display style, but you can see the other work-arounds in the article.

There is also plenty written on the web about this issue so with the right Google search ("inline element background image"), you can find many other articles.

You also may want to make sure a background image is top/left by specifying both top and left:

You have this:

background: url(../assets/bullet2.gif) left no-repeat;

Might as well use this:

background: url(../assets/bullet2.gif) left top no-repeat;

It looks like top/left is supposed to be the default, but it doesn't hurt to specify what you want.

Upvotes: 1

Related Questions