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

Site breaks in IE 6, how to work around?

  • I know that most people just ignore the whole IE 6 issue. In most cases I do also, or make a design that doesn't break. But, in this case, I am stuck trying to make it work.

    The site is: Salida Glass

    When I test in Adobe browserlab, in IE 6, the last image, associated with the location/contact button drops to another line, and everything looks terrible. I am sure it is the well known IE 6 margin bug, but I cannot find any margin to reset or change to make this work.

    Any suggestions for a fix or workaround would sure be appreciated.

    mark
  • Hello Mark,

    Your #wrapper width is 880px, setting your page width.
    Your div#container has 7px padding.
    That padding allows you to have only a 866 width to fit your #navlist li into.
    Currently you must shrink your #navlist li to a width of 144px.

    That is the only section I checked, so you might want to over the math on the site.

    Brett Santore
  • Is it maybe related to the padding on the 'a' element, it shows in firebug as extending out of the container - might upset ie6? I'm not sure...
    *EDIT* - Brett's simultaneous post might be closer to the right answer, but I'll leave mine here in-case.
  • Thanks both of you for the advice. Both solutions solved the primary problem. After fussing for awhile, I changed the padding on the a element as my solution. That looked better as a workaround.

    This is a great resource, thanks again.