Menu incorrect in IE6

Question

Hello,

I've several problems with IE6

There are 2 unordered lists which do not look fine in IE6.

This is a snapshot from Firefox 3.5: http://img524.imageshack.us/img524/2772/ff35.gif

IE6: http://img403.imageshack.us/img403/7321/40553149.gif

The code:

CSS

#nav-black {
height: 37px;
background:#000;
}




#nav-black ul.left {
float:left;
}
#nav-black ul.right {
float:right;
margin-top:5px;
margin-right:10px;
}

.about a{
float:right;
background: url(library/media/images/about.gif) no-repeat ;
height:29px;
width:87px;
}
.about a:hover {
background: url(library/media/images/about_hover.gif) no-repeat ;
}

.right li {
float:right;
display:block;
}




.term  a {
float:right;
background: url(library/media/images/term.gif) no-repeat ;
height:29px;
width:107px;

}
.term a:hover {
background: url(library/media/images/term_hover.gif) no-repeat ;
}

.left li {
float:left;
display:block;
margin-right:12px;
}
.contact a {
float:left;
background: url(library/media/images/contact.gif) no-repeat ;
height:32px;
width:39px;
}
.contact a:hover {
background: url(library/media/images/contact_hover.gif) no-repeat ;
}

.twitter a {
float:left;
background: url(library/media/images/twitter.gif) no-repeat ;
height:32px;
width:34px;
}
.twitter a:hover {
background: url(library/media/images/twitter_hover.gif) no-repeat ;
}

.rssicon a {
float:left;
background: url(library/media/images/rssicon.gif) no-repeat ;
height:32px;
width:32px;
}
.rssicon a:hover {
background: url(library/media/images/rssicon_hover.gif) no-repeat ;
}





#navbig {
height:57px;
width:100%;
margin:-21px 21px;
}

#navbig li a {
float:right;
display:inline;
margin:0 0 0 40px;

}
.webdev a {

background: url(library/media/images/webdev.gif) no-repeat ;
height:56px;
width:190px;
}
.webdev a:hover {
background: url(library/media/images/webdev_hover.gif) no-repeat ;
}

.design a {

background: url(library/media/images/design.gif) no-repeat ;
height:56px;
width:190px;
}
.design a:hover {
background: url(library/media/images/design_hover.gif) no-repeat ;
}

.interview a {

background: url(library/media/images/interview.gif) no-repeat ;
height:56px;
width:190px;
}
.interview a:hover {
background: url(library/media/images/interview_hover.gif) no-repeat ;
}

.downloads a {

background: url(library/media/images/downloads.gif) no-repeat ;
height:56px;
width:190px;
}
.downloads a:hover {
background: url(library/media/images/downloads_hover.gif) no-repeat ;
}

XHTML

 <!--BEGIN .container-->
 <div class="container">

  <!--BEGIN .header-->
  <div class="header">
  <div id="nav-black">

 <ul class="left">
  <li class="contact">< a href="#"></li>
  <li class="twitter">< a href="#"></li>
  <li class="rssicon">< a href="#"></li>

 </ul>


 <ul class="right">
  <li class="about">< a href="#"></a></li>
  <li class="term" >< a href="#"></a></li>
 </ul>

  </div>
  <div id="header-bg">< a href="<?php bloginfo('url'); ?>"><div id="logo_i" ></div></a></div>
  <div id="navbig">

 <ul class="right">
  <li class="webdev">< a href="#"></a></li>
  <li class="design" >< a href="#"></a></li>
  <li class="interview" >< a href="#"></a></li>
  <li class="downloads" >< a href="#"></a></li>
 </ul>
  </div>
  <!--END .header-->
  </div>



  <!--BEGIN #content-->
  <div id="content">

Waiting your answers.

Answer 1

Maybe?

http://www.positioniseverything.net/explorer/doubled-margin.html

Answer 2

<!-- Place this in the document's head, after your regular stylesheets -->
<!--[if lte ie7]>

<link rel="stylesheet" type="text/css" href="path/to/ie-stylesheet.css">

<![endif]-->

in ie-stylesheet.css:

#problematic ul li
{margin-top: 5px; /* half, or less, of the value used in the regular stylesheet */
margin-right: 5px; /* half, or less, of the value used in the regular stylesheet */
}

/* any other rules required to correct the aberrance that is Internet Explorer */

I would've used the correct values (or what I would've thought correct values), but I've got no idea which menus, or menu lis are the problem since there's no text between the <a></a> tags to reflect the text that's in your linked image.

Though kudos on posting some code, some people still don't do even that much.

Let me know if this is any use, or if there's anything it doesn't do and I'll try and offer more help. Though if that's the case, I'd ask you to link to a live site that holds the code whether jsbin (as noted in the comments to your question) or your own site.

Cheers =)

Answer 3

the first thing before create a menu, do not use margin instead use li span(block with width and height after that the a with its sizes) use a fix width for the navigation not 100% for the container of the menu use z index for the container element so the IE6 can read it correctly