Drop Down Tabs - Help fixing large space break below menu in IE6
1) Script Title: Drop Down Tabs (CSS based menu / Example 3)
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...roptabmenu.htm
3) Describe problem: There is a fairly large break below the menu that only occurs in IE6. It works great in Firefox, IE7, and Chrome. If it helps, the menu is an include file and on this file I commented out the hack code that was in the demo file and that made it work in ie7, but it didn’t’ fix it in ie6 as I’d hoped. This is what I am referring to:
<!--
<br style="clear: left;" />
<br class="IEonlybr" /> -->
I left it commented out because if I uncomment, then I get the same problem in IE7.
I don’t know how to fix this ie6 problem. Any help is appreciated. Here’s the test page: http://www.yourrvconnection.com/newhome.html
Here’s the menu file code:
<div id="slidemenu" class="slidetabsmenu">
<ul>
<li><a href="/campingtrailers/" title="Jayco Camping Trailers" rel="dropmenu1_c"><span>Camping Trailers</span></a></li>
<li><a href="/lightweight/" title="Jayco Lite Weight Trailers" rel="dropmenu2_c"><span>Lite Weight Trailers </span></a></li>
<li><a href="/traveltrailers/" title="Jayco Park & Travel Trailers" rel="dropmenu3_c"><span>Park & Travel Trailers </span></a></li>
<li><a href="/fifthwheels/" title="Jayco Fifth Wheel Trailers" rel="dropmenu4_c"><span>Fifth Wheel Trailers </span></a></li>
<li><a href="/motorhomes/" title="Jayco Motorhomes" rel="dropmenu5_c"><span>Motorhomes </span></a></li>
<li><a href="/toyhaulers/" title="Jayco Toy Haulers" rel="dropmenu6_c"><span>Toy Haulers </span></a></li>
</ul>
</div>
<!--
<br style="clear: left;" />
<br class="IEonlybr" /> -->
<!--1st drop down menu -->
<div id="dropmenu1_c" class="dropmenudiv_c" style="width: 150px">
<a href="/campingtrailers/jay-series.html">Jay Series: MSRP $7,357</a>
<a href="/campingtrailers/baja.html">Baja: MSRP $10,500</a>
<a href="/campingtrailers/select.html">Select: MSRP $16,250</a>
</div>
<!--2nd drop down menu -->
<div id="dropmenu2_c" class="dropmenudiv_c" style="width: 225px">
<a href="/lightweight/jay-feather-sport.html">Jay Feather Sport: MSRP $14,643</a>
<a href="/lightweight/jay-feather-ex-port.html">Jay Feather EX-PORT: MSRP $15,429</a>
<a href="/lightweight/jay-feather-exp.html">Jay Feather EXP: MSRP $19,286</a>
<a href="/traveltrailers/eaglesl.html">Eagle Super Lite: MSRP $26,429</a>
</div>
<!--3rd drop down menu -->
<div id="dropmenu3_c" class="dropmenudiv_c" style="width: 250px">
<a href="/traveltrailers/jayflight.html">Jay Flight: MSRP $14,429</a>
<a href="/traveltrailers/jayflightg2.html">Jay Flight G2: MSRP $17,786</a>
<a href="/traveltrailers/eagle.html">Eagle: MSRP $30,786</a>
<a href="/traveltrailers/jayflight-bungalow.html">Jay Flight Bungalow: MSRP $35,643</a>
</div>
<!--4th drop down menu -->
<div id="dropmenu4_c" class="dropmenudiv_c" style="width: 225px">
<a href="/fifthwheels/eagle-fifth-wheel.html">Eagle: MSRP $38,857</a>
<a href="/fifthwheels/eagle-super-lite.html">Eagle Super Lite: MSRP $29,986</a>
<a href="/fifthwheels/designer.html">Designer: MSRP $54,286</a>
</div>
<!--5th drop down menu -->
<div id="dropmenu5_c" class="dropmenudiv_c" style="width: 225px">
<a href="/motorhomes/greyhawksport.html">Greyhawk Sport: MSRP $71,714</a>
<a href="/motorhomes/greyhawk.html">Greyhawk: MSRP $82,286</a>
<a href="/motorhomes/melbourne.html">Melbourne: MSRP $86,786</a>
<a href="/motorhomes/senecahd.html">Seneca HD: MSRP $144,500</a>
<a href="/motorhomes/senecazx.html">Seneca ZX: MSRP $148,571</a>
<a href="/motorhomes/embark.html">Embark: MSRP $215,714</a>
</div>
<!--6th drop down menu -->
<div id="dropmenu6_c" class="dropmenudiv_c" style="width: 200px">
<a href="/toyhaulers/octanezx.html">Octane ZX: MSRP $27,429</a>
<a href="/toyhaulers/reconzx.html">Recon ZX: MSRP $58,000</a>
<a href="/toyhaulers/senecazx.html">Seneca ZX: MSRP $148,571</a>
</div>
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("slidemenu")
</script>
Here’s the CSS:
/************NAVIAGTION**************/
.slidetabsmenu{
float:left;
width:100%;
font-size: 12px;
line-height:normal;
/*border-bottom: 1px solid gray;
background:#CCCCCC;*/
}
* html .slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 1em;
}
.slidetabsmenu ul{
list-style-type: none;
margin:0;
padding:0;
}
.slidetabsmenu li{
display:inline;
margin:0;
padding:0;
}
.slidetabsmenu a{
float:left;
background:url(../images/slide-left.gif) no-repeat left top;
margin:0;
margin-right: 1px;
padding:0 0 0 9px;
text-decoration:none;
}
.slidetabsmenu a span {
float:left;
display:block;
background:url(../images/slide-right.gif) no-repeat right top;
padding:2px 13px 2px 4px;
font-weight:bold;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.slidetabsmenu a span {float:none;}
/* End IE5-Mac hack */
.slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{
color: black;
}
.slidetabsmenu a:hover, .slidetabsmenu li.selected a{
background-position:0% -125px;
}
.slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{
background-position:100% -125px;
}
html>/**/body .IEonlybr{ /*None IE browsers hack*/
display: none; /*Hide BR tag in non IE browsers, since it's not needed*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv_c{
position:absolute;
top: 0;
border: 1px solid #918d8d; /*THEME CHANGE HERE*/
border-width: 0 1px;
font:normal 10px Verdana;
line-height:18px;
z-index:100;
background-color:#eee;
width: 200px;
visibility: hidden;
}
.dropmenudiv_c a{
width: auto;
display: block;
text-indent: 5px;
border: 0 solid #918d8d; /*THEME CHANGE HERE*/
border-bottom-width: 1px;
padding: 2px 0;
text-decoration: none;
color: black;
}
* html .dropmenudiv_c a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv_c a:hover{ /*THEME CHANGE HERE*/
background-color: #e4e6d1;
}
.zindex
{ z-index:-1;}
CSS Codes
Reply With Quote
Bookmarks