treehouse : what would you like to learn today?
Web Design Web Development iOS Development

IE6 problem with 100% width and absolute positioning

  • Hi!

    We've added a horizontal background to the menu of the site at http://wholesalebagstore.com/

    It works OK on IE7, FF, etc, but NOT on IE6, as 100% is somewhat not understood. Can you help me on this? :? I'm getting crazy...

    Thank you!
  • I don't really do table layouts and I don't have access to Windows right now but if I had built the site I think I would have probably put that bar on the body background.
  • Thank you for the reply. That's a feasible option. We thought about it, but then Zencart sometimes puts some warnings on the header that would move the menu down.... The table for the menu is wrapped in a DIV too. Did you see that?
  • As it is absolutely positioned it's not going to move anyhow.

    I'm struggling to see what you are trying to do with it. Why the 172px left padding? All that is doing is giving me a horizontal scrollbar on my 24" monitor! You don't need negative margins with absolute positioning. Try it like this:
    #menuWrapper {
    background-image:url(/template_images/navbg.jpg);
    height:40px;
    position:absolute;
    left:0;
    top:156px;
    width:100%;
    z-index:-1;
    }
  • "apostrophe" said:
    Try it like this:


    I don't understand, that would just move the bar upward and not aligned with the menu :roll: Please, kindly explain further your approach. Do I have to change any other layer?
  • All I have done there is dump the pointless left padding and positioned it properly instead of using an unnecessary negative margin. In FF it lines up perfectly.