Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › IE6 background-position issue

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 23, 2009 at 1:58 pm #24673
    ags
    Participant

    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

    Code:

    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 #56690
    TheDoc
    Member

    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]–>

    April 23, 2009 at 3:05 pm #56692
    Rob MacKay
    Participant

    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 #56696
    ags
    Participant

    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 #56697
    apostrophe
    Participant

    This is my favourite, and it supports background position http://www.twinhelix.com/css/iepngfix/. Hit the Test Area for the latest version.

    April 23, 2009 at 6:06 pm #56700
    ags
    Participant

    sadly it didn’t fix my problem.

    still looking for solution before I change my html+ css

    April 25, 2009 at 7:20 pm #56736
    AshtonSanders
    Participant

    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

    April 26, 2009 at 6:13 am #56746
    ags
    Participant

    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 :)

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.