0

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:

http://www.amadon.us/hotlinks/search_menu_small_firefox.png

... and IE6,

http://www.amadon.us/hotlinks/search_menu_small_IE6.png

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
4
Views
10 Years
Discussion Span
Last Post by shockeye
0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.