Member Avatar for shockeye

The site is in standards-complient XHTML and CSS, something IE6 has a huge beef with. But I've never seen IE do this before... can't seem to find any meaty info on the net, so I offer it up to Dani Web... how the heck to I fix this? Here are some screenshots. First Firefox, because it looks how it is supposed to:

... and IE6,

If it comes to a fix that only works in IE, but breaks FF or other browsers, it's fine, I have an IE specific stylesheet.

I blurred out the logo because the site isn't launched yet and I'm not sure if the client would permit it.

Here is the HTML code that defines that entire left column

<div class='secondary'>
  <div class='navigation'>
    <ul>
      <li class='first'><span class="current">Search for Homes</span></li>

      <li><a href="/properties">All Properties</a></li>
      <li><a href="/properties/open_houses">Open Houses</a></li>
      <li>
        <a href="/properties/global_property_search">Luxury Properties</a>
      </li>
    </ul>
  </div>

  <ul class='subnav'>
    <li>
      <span>Map Search</span>
      <ul>
        <li>
          <a href="/properties/google_map_search">Google Map Search</a>
        </li>
      </ul>

    </li>
  </ul>
  <ul id='blocks'>
    <li>
      <div class='block' id='block-open-house'>
        <h4>
          <a href='#'>
            <span>Open House</span>

          </a>
        </h4>
      </div>
    </li>
    <li>
      <div class='block' id='block-sold-listings'>
        <h4>
          <a href='/properties?status=sold'>
            <span>Sold Listings</span>

          </a>
        </h4>
      </div>
    </li>
    <li>
      <div class='block' id='block-email-updates'>
        <h4>
          <a href='#'>
            <span>Email Updates</span>

          </a>
        </h4>
      </div>
    </li>
  </ul>
</div>

here's the CSS, according to Firebug (yes, I know the selectors are unusually long, the stylesheet output is compiled from SASS)

body #wrapper #document #content .secondary {
border-top:1px solid #A6A6A6;
float:left;
padding:0px;
width:245px;
}

body #wrapper #document #content .navigation {
clear:both;
position:static;
}

body #wrapper #document #content .navigation ul li.first {
border:0pt none;
}

body #wrapper #document #content .navigation ul li {
border-top:1px solid #F5DFA5;
padding-bottom:7px;
padding-top:7px;
position:relative;
}

That's all there is to it. I must be missing something here... any light-shedding would be worshiped at this point. :'(

  • 2 Contributors
  • 3 Replies
  • 76 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by shockeye

Dani AI

Generated

Good catch by — isolating the problem to a position: relative quirk in IE6 is exactly the right starting point. IE6 behaves differently with positioned elements: stacking contexts and the infamous "hasLayout" interaction often make elements jump or reflow only in that browser. Since you already have an IE-specific stylesheet, keep fixes there and document them so future maintainers know why the rules exist.

Practical checklist to resolve this class of bugs:

  • Reproduce with a minimal test case: strip back styles until the shift disappears, then reintroduce rules one at a time. That pinpoints which positioned element is triggering the misplacement.
  • If removing position:relative fixes it, try moving the relative positioning to a single stable ancestor instead of many list items.
  • For many IE6 layout glitches the simplest fix is to give the problematic element "layout." A safe, minimal trigger is:
    /* put inside your IE6-only stylesheet */
.selector { zoom:1; }

    This usually stabilizes positioning and z-order in IE6/7 without affecting modern browsers (modern browsers ignore zoom).

Also check z-index on positioned elements, and ensure your IE overrides come after the compiled SASS output or are more specific. Keep IE6 hacks scoped with conditional comments and limit them to what’s necessary; document the reason so they can be removed when IE6 support is dropped.

Recommended Answers

All 3 Replies

Member Avatar for katarey

Hay you have placed both image same?

Member Avatar for shockeye

I just noticed that myself, I edited the original post with the correct images.

Member Avatar for shockeye

We figured it out, it was a position: relative; bug.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.