Drop Down Tabs - Help fixing large space break below menu in IE6 [Archive]

dd75

01-01-2009, 12:47 AM

1) Script Title: Drop Down Tabs (CSS based menu / Example 3)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/droptabmenu.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:

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>



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


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


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


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


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


<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;}

jscheuer1

01-02-2009, 04:33 PM

Move all of this including the script call (scroll the code block to see it):


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


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


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


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


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


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

to the last thing, right before the closing </body> tag.