IE moved my menu!

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 423,511 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,646 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 688 | Replies: 3 | Solved

•

Join Date: May 2007

Posts: 9

Reputation: shockeye is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

shockeye

Offline

Newbie Poster

IE moved my menu!

Jun 11th, 2007

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...ll_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

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<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>
<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)

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
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;
}
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;
}