почему это меню CSS перекрывает баннер в IE7

Question

Вот страница, над которой я работаю: http://www.sackling.com/new_arrivals.php

Это выглядит хорошо во всех браузерах, кроме ie7.

Я не могу найти способ заставить его работать должным образом во всех браузерах, это должно быть что-то с тем, как я пытаюсь составлять свои div'ы ..

Это важный CSS:

#menuwrap {
width:940px;
height:84px;
position:relative;
z-index:99999;
}
.top_menu_container {height:60px;}
.menu_holder {width:980px;  z-index:9999;}
.menu_right_bottom {width:220px; }

/*Menu Start */


.navtest{list-style:none;}
.navtest ul li {
  display: block;
  position: relative;
  float: left;
  cursor:pointer;
  z-index:9999;
  position:static; 
}
.navtest ul li a {
  text-transform:uppercase;
  font-size: 11px;
  display: block;
  text-decoration: none;
  color: #3F3F41;
  padding: 5px 21px 5px 20px;
  margin-left: 1px;
  white-space: nowrap;
  z-index:9999;
  font-weight:normal;
  text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.navtest ul li ul { opacity:0.80; width:141px; display:none;  }
.navtest ul li:hover ul{ display: block;  position: absolute;  z-index:9999; }
.navtest ul li:hover li { float: none;  z-index:9999;}
.navtest ul li:hover a {  background: #fff;  z-index:9999; color: #999; } /* main menu rollover color change */
.navtest ul li a:active {text-shadow: 0px 0px 0px rgba(0,0,0,0);} /*main menu click */
.navtest ul li:hover li a:hover { background: #c0c1c0; z-index:9999;} /*hover over background of dropdown */
.navtest ul li:hover ul li a {color:#000;} /* color of drop down on main rollover */
.top_buttons .navtest ul li a { font-size: 10px; } /* top menu row font */
*{margin:0; padding:0;}
body { margin: 0 auto; font-size: 13px; color: #333333;  }
html, body {  color: #000000;  margin:0;  padding:0;  height:100%;  font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans","DejaVu Sans","Bitstream Vera Sans","Liberation Sans",Verdana,"Verdana Ref",sans-serif;  }
.header_space { height: 15px;; clear: both; width:940px; margin:0 auto;}
.wrapper {width:940px; margin-left:20px; margin-right:20px; background:#fff; overflow:hidden; margin:0 auto; }

.container {min-height:100%;  height: auto !important; height:100%;  margin: 0 auto -25px;  width:980px; background:URL(images/bg_sides.jpg) repeat-y #f4f4f4;  }
.contentContainer {width:980px;}
.banner_listings {margin:0; padding:0; height:293px; width:940px;}
.category_product_style {padding:10px 0px 0px 13px;}
#account_content {background: url(/images/account_nav_bg.png) repeat-x left top; margin-top:35px;}

/* =Account nav */
#account_nav {margin-bottom:55px; margin-top:35px; background: url(/images/account_nav_bg.png) repeat-x left top; float: left; width: 180px;}
#account_nav h2, .table_legend h2, #account_credits h2 { font-size:125%;}

/***********header stuff ************************/

.styled-select {padding-top:6px;}

#searchwrapper {
width:246px; /*follow your image's size*/
height:26px;/*follow your image's size*/
background:#ccc;
background-repeat:no-repeat; /*important*/
padding:0px;
margin:0px;
position:relative; /*important*/
}

#searchwrapper form { display:inline ; }

.searchbox {
border:none; /*important*/
background-color:transparent; /*important*/
background-image:url(images/blank_search.gif);
position:absolute; /*important*/
top:7px;
left:9px;
width:225px;
height:14px;
color:#fff;
font-size:14px;
margin:0px;
}

.searchbox_submit {
border:none; /*important*/ /*important*/
background: url(images/searcharrow.jpg) no-repeat;
position:absolute; /*important*/
top:3px;
left:225px;
width:15px;
height:20px;
margin:0px;
}

Answer 1

Я считаю, что ваша проблема связана с элементом ul#nav-test.По какой-то причине у вас есть ul, вложенное в li в ul.Было ли это ошибкой или вы сделали это по какой-то причине?

См. Строку 92:

<ul class="navtest" >
    <li>
        <ul>
            <li><a href="catalog_gallery.php">Fall Catalog</a></li>
            <li><a href="http://www.sackling.com/contact.php">Contact us</a></li>
        </ul>
    </li>
</ul>

Удалите дополнительные ul, и это, вероятно, решит вашу проблему, так как IE7 назначаетСмещение в 16 пикселей от вершины второго ul.

Таким образом, ваш HTML становится:

<ul class="navtest" >
    <li><a href="catalog_gallery.php">Fall Catalog</a></li>
    <li><a href="http://www.sackling.com/contact.php">Contact us</a></li>
</ul>

Answer 2

Попробуйте удалить все пробелы внутри ul в меню - IE7 отображает 2 пробела прямо над первым меню.

РЕДАКТИРОВАТЬ: я думаю, что это избыточный ul / li - попробуйте изменить ul class"navtest" на div class="navtest" и удалить li в левом и правом меню ...