Grow your CSS skills. Land your dream job.

IE6 background-position issue

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

    Hi,
    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.

    HTML

    CSS

    Code:
    ul.white-btn-menu
    {
    list-style-type:none;
    }
    ul.white-btn-menu li
    {

    background-image:url(/images/btn-white-left.png) no-repeat left;
    height:57px;
    float: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;
    text-decoration:none;
    display:block;
    height:42px;/*57*/
    color:Black;
    padding:15px 15px 0 7px;
    }

    Any suggestions?
    THANKS

    [attachment=1]good-btn.gif[/attachment]
    [attachment=0]ie6-btn.gif[/attachment]

    # April 23, 2009 at 2:17 pm

    Try adding this into your <head>

    <!–[if lt IE 7]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js&quot; type="text/javascript"></script>
    <![endif]–>

    Rob
    # 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… :)

    ags
    # April 23, 2009 at 4:18 pm

    thanks.

    Found this code fix http://www.dillerdesign.com/experiment/DD_belatedPNG/ which improved the situation
    but still not perfect.
    [attachment=1]improved-ie6.gif[/attachment]

    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:
    [attachment=0]good-img.gif[/attachment]

    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 http://www.twinhelix.com/css/iepngfix/. Hit the Test Area for the latest version.

    ags
    # 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 teakwarehouse.com’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:

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

    ul#navbar li {
    display:block;
    float:right;
    padding-left:2px;
    background: url(‘../images/layout/nav-divider.jpg’) bottom left no-repeat;
    }

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

    I hope that helps…
    Ashton Sanders

    ags
    # April 26, 2009 at 6:13 am

    thanks.

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

    Code:
    /* FOR IE6 */
    ul.white-btn-menu li.link1
    {
    _width:97px;
    }

    Thanks to all :)

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".