The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

IE6 background-position issue

  • ags
    # April 23, 2009 at 1:58 pm

    I’ve created an expandable button (will expand dynamically based on content), only
    problem in that in IE6 background-position doest work.
    I know I could just re-write the css+html and create this button in a diff way but really rather use this way.



    ul.white-btn-menu li

    background-image:url(/images/btn-white-left.png) no-repeat left;
    padding:0 0 0 8px;


    ul.white-btn-menu li a
    background:url(/images/btn-white-right.png) no-repeat right;
    font:bold 16px Arial;
    padding:15px 15px 0 7px;

    Any suggestions?


    # April 23, 2009 at 2:17 pm

    Try adding this into your <head>

    <!–[if lt IE 7]>
    <script src="; type="text/javascript"></script>

    # April 23, 2009 at 3:05 pm

    if your image is a 32bit PNG that is transparent, and you are using a transparency fix, most fixes wont fix the positioning of the background png.

    Make sure your png fix, if you have one, has that feature. Unfortunately the one TheDoc has added, although good, does not have this feature for positioning fixing built in…

    Do you have a live example – it would be easier to see… :)

    # April 23, 2009 at 4:18 pm


    Found this code fix which improved the situation
    but still not perfect.

    ass u can see it strches the 2 images insted of having them together + the two "li"’s are sopposed to be floating side by side
    like so:

    still can’t make it live.
    thanks very much for you help.
    any more suggestions?

    # April 23, 2009 at 4:36 pm

    This is my favourite, and it supports background position Hit the Test Area for the latest version.

    # April 23, 2009 at 6:06 pm

    sadly it didn’t fix my problem.

    still looking for solution before I change my html+ css

    # April 25, 2009 at 7:20 pm

    The problem is that When you float a <li> in IE6, sometimes* it doesn’t shrink the width of the <li> to be as thin as possible (allowing the other buttons to align next to it); it remains at 100%. When this happens the only real fix I have been able to find is to manually program the width of each button =/

    Do me a favor, and try "float: right" and let me know how that goes.
    Also try adding "display:block" to the "li" (repetitive I know).

    *I have run into the problem before (with’s menu) and had to manually edit the widths of each menu item. But I just did my personal website’s menu that way and didn’t seem to have any problems… I can’t see any major difference in the codes, besides the two I mentioned above and the position absolute for the UL. Here’s my code:

    ul#navbar {
    position: absolute;
    padding:0 2px 0 0;
    background: url(‘../images/layout/nav-divider.jpg’) bottom right no-repeat;

    ul#navbar li {
    background: url(‘../images/layout/nav-divider.jpg’) bottom left no-repeat;

    ul#navbar li a {
    padding:23px 23px;
    font-size: 20px;
    color: #024558;
    background: url(‘../images/layout/nav-hover.jpg’) repeat-x;
    background-position: 0 -80px;

    I hope that helps…
    Ashton Sanders

    # April 26, 2009 at 6:13 am


    Sadly what I did was add conditional css for IE6, added a width to every li

    /* FOR IE6 */
    ul.white-btn-menu li.link1

    Thanks to all :)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed