No replies
lleemon
lleemon's picture
Offline
Regular
Last seen: 8 years 15 weeks ago
Timezone: GMT-6
Joined: 2007-06-12
Posts: 13
Points: 6

I have a horizontal top navigation that certain links drop down a list of links. In Firefox and Internet Explorer 7 (IE 7) everything appears fine. When I view in IE 6 the dropdown box is longer then the two links inside.

If you look at the code it's dealing with the section

.

I can actually make the height of pos5 longer but not shorter.

Any thoughts are appreciated.

<style type="text/css">
@charset "utf-8";
/* CSS Document */
/*#products li.product-background {
	background: url(../images/product-tab.png);
}
 
#products li.product-background:hover  {
	background: url(../images/product-tab-rollover.png);
}*/
 
#newnav { padding-left: 197px;background: url(../images/top-bar-new.png) 23px top; line-height: 23px;}
#products {padding:0; margin:0px 0 0px 0px; list-style:none; position:relative; height:23px; float:left; background:url(../images/line.gif) no-repeat 100% 4px; width:100%; z-index:500; background: url(../images/top-bar-new.png) 23px top; line-height: 23px;} 
#products li {display:inline; float:left; height:23px; background:url(../images/bar-separation.png) no-repeat 0 0;}
 
#products li a.tl {display:block; width:115px;  text-decoration:none; height:23px; line-height:19px; font-family:Arial;	font-size: .70em; font-weight:bold; text-indent:10px;  color:#000; text-transform: uppercase; }
 
#products li a.nav-products {display:block; width:115px; height:23px; text-decoration:none; line-height:19px; font-family:Arial;	font-size: .70em; font-weight:bold; text-indent:10px;  color:#000; }
#products li.product-background {background: url(../images/top-bar-new2.png) 2px 0px;}
#products li.product-background a:hover span, #products li.product-background a.active span{
	background:url(../images/allProductArrows.gif) right -14px no-repeat;
}
#products li a.nav-products span{
	background:url(../images/allProductArrows.gif) right top no-repeat;
	padding-right:15px;
}
 
#products li a.nav-special {display:block; width:90px; height:23px; text-decoration:none; line-height:19px; font-family:Arial;	font-size: .70em; font-weight:bold; text-indent:10px;  color:#000; text-transform: uppercase; }
 
#products div {display:none;}
 
#products li a:hover {text-decoration:none; white-space:normal; background-position:130px 15px; background-color: #ff6633; background: url(../images/top-bar-new2.png) 2px 0px; border-left: 1px solid #000;}
#products li:hover > a {text-decoration:none; white-space:normal; background-position:130px 15px; background: url(../images/top-bar-new2.png) 1px 0px; border-left: 1px solid #000;}
 
#products :hover div /* pos1 */
{display:block; width:595px; background:#999999; position:absolute; left:0; top:23px; border:1px solid #000; padding-bottom:10px;}
 
 
#products :hover div.pos2 {background:#f0f5ee;}
#products .single:hover {position:relative;}
 
#products .single:hover div.pos2 {padding-bottom: 0px;  margin-bottom: 0px;}
#products .single:hover div.pos3 {padding-bottom: 0px;  margin-bottom: 0px;}
#products .single:hover div.pos4 {padding-bottom: 0px;  margin-bottom: 0px;}
#products .single:hover div.pos2 {background:#999999; width:370px;}
#products .single:hover div.pos3 {background:#999999; width:149px;}
#products .single:hover div.pos4 {background:#999999; width:230px;}
#products .single:hover div.pos5 {background:#999999; width:165px; left: -30px; }
 
 
/*#products :hover div dl {display:inline; padding:0; margin:0 10px 10px 10px; float:left; width:170px;}*/
#products :hover div dl {display:inline; padding:0; margin:0 0px 10px 0px; float:left; width:170px;}
#products :hover div dl dt {width:170px; text-indent:10px; margin:5px 0 0px 0; text-decoration:none; height:20px; line-height:20px; }
 
#products .two:hover div {left:-150px;}
#products .two:hover div dl {width:129px;}
#products .two:hover div dl dt {width:129px;}
 
#products .single:hover div dl dt {width:149px;}
#products .single:hover div.pos2 dl {width:370px; margin: 0px;}
#products .single:hover div.pos3 dl {width:149px; margin: 0px;}
#products .single:hover div.pos4 dl {width:230px; margin: 0px;}
#products .single:hover div.pos5 dl {width:165px; margin: 0px; padding: 0px; height: 28px; }
 
#products :hover div dl dd {padding:0; margin:0; }
 
#products :hover div dt a {text-decoration:none; cursor:default; font-weight: bold; color:#000; font-family: Arial; font-size: 1.2em; background: none; border-left: none;}
html>body #products :hover div dt a {text-decoration:none; cursor:default; font-weight: bold; color:#000; font-family: Arial; font-size: .8em; background: none; border-left: none;}
 
#products :hover div dd a {display:block; text-decoration:none; font-weight:normal; font-family: Arial; font-size: 1em; color:#000; text-indent:22px; line-height:18px; background: none;border-left: none; text-transform: capitalize;}
html>body #products :hover div dd a {display:block; text-decoration:none; font-weight:normal; font-family: Arial; font-size: .75em; color:#000; text-indent:22px; line-height:18px; background: none;border-left: none; text-transform: capitalize;}
 
#products .single:hover div dd a {display:block; text-decoration:none; font-weight:normal; font-family: Arial; font-size: 1em; color:#000; text-indent:0px; padding-left: 5px; line-height:18px; border-bottom: 1px solid #000000;}
 
html>body #products .single:hover div dd a {display:block; text-decoration:none; font-weight:normal; font-family: Arial; font-size: .7em; color:#000; text-indent:0px; padding-left: 5px; line-height:18px; border-bottom: 1px solid #000000;}
 
#products .single:hover div.pos2 dd a {font-weight: bold;}
#products .single:hover div.pos3 dd a {font-weight: bold;}
#products .single:hover div.pos4 dd a {font-weight: bold;}
#products .single:hover div.pos5 dd a {font-weight: bold; text-transform: uppercase;}
 
#products :hover div dd a:hover {text-decoration:underline; color: #000; background-color: #FF6633;}
#products .single:hover div.pos2 dd a:hover { background-color:#F0682C; text-decoration: none; text-transform:capitalize; color: #000000; font-weight: bold;}
#products .single:hover div.pos3 dd a:hover { background-color:#F0682C; text-decoration: none; text-transform:capitalize; color: #000000; font-weight: bold;}
#products .single:hover div.pos4 dd a:hover { background-color:#F0682C; text-decoration: none; text-transform:capitalize; color: #000000; font-weight: bold;}
#products .single:hover div.pos5 dd a:hover { background-color:#F0682C; text-decoration: none; text-transform:uppercase; color: #000000; font-weight: bold;}
 
#products .clear {clear:both;}
</style>

<div id="newnav"><ul id="products">
                <li class="product-background"><a href="#page" class="nav-products"><span>PRODUCTS</span><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                <div class="pos1">
                <dl><dt><a href="#">ARTIFICIAL TREES</a></dt>
 
<dd><a href="/large-artificial-trees_c_1.aspx">large artificial trees</a></dd>
<dd><a href="/small-artificial-trees_c_2.aspx">small artificial trees</a></dd>
<dd><a href="/custom-artificial-trees_c_9.aspx">custom artificial trees</a></dd>
<dd><a href="/outdoor-artificial-trees_c_3.aspx">outdoor artificial trees</a></dd>
</dl><dl><dt><a href="#">ARTIFICIAL PLANTS</a></dt>
<dd><a href="/artificial-bushes_c_4.aspx">artificial bushes</a></dd>
<dd><a href="/artificial-topiaries_c_21.aspx">artificial topiaries</a></dd>
<dd><a href="/artificial-flowering-plants_c_11.aspx">artificial flowering plants</a></dd>
<dd><a href="/artificial-vines-grasses_c_10.aspx">artificial vines & grasses</a></dd>
 
<dd><a href="/custom-artificial-plants_c_13.aspx">custom artificial plants</a></dd>
<dd><a href="/outdoor-artificial-plants_c_23.aspx">outdoor artificial plants</a></dd>
</dl><dl><dt><a href="#">ARTIFICIAL FOLIAGE</a></dt>
<dd><a href="/fire-retardant-foliage_c_7.aspx">fire retardant foliage</a></dd>
<dd><a href="/fire-retardant-bushes_c_15.aspx">fire retardant bushes</a></dd>
<dd><a href="/fire-retardant-grass_c_16.aspx">fire retardant grass</a></dd>
<dd><a href="/fire-retardant-vines_c_26.aspx">fire retardant vines</a></dd>
<dd><a href="/outdoor-artificial-foliages_c_22.aspx">outdoor artificial foliages</a></dd>
</dl><br class="clear" /><dl><dt><a href="#">FABRICATED PRODUCTS</a></dt>
 
<dd><a href="/artificial-bark_c_5.aspx">artificial bark</a></dd>
<dd><a href="/artificial-logs-stumps_c_27.aspx">artificial logs & stumps</a></dd>
</dl>
 
                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class="single"><a href="/fire-retardant-foliage.aspx" class="tl single">Fire Retardant<!--[if IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
 
                <div class="pos2">
                <dl>
                <dd><a href="/fire-retardant-foliage-overview.aspx">FIRE RETARDANT GENERAL OVERVIEW</a></dd>
                <dd><a href="/fire-retardant-foliage-comparison.aspx">IFR&trade; FOLIAGE VS. TOPICALLY TREATED FIRE RETARDANT FOLIAGE</a></dd>
                <dd><a href="/fire-retardant-foliage-state-codes.aspx">DO I NEED TO USE FIRE RETARDANT FOLIAGE?</a></dd>
                <dd><a href="/fire-retardant-foliage-tests.aspx">FIELD FLAME TEST</a></dd>
 
                <dd><a href="/fire-retardant-foliage-hotel-fire.aspx">HOTEL FIRE STARTS IN ARTIFICIAL PLANTS</a></dd>
                <dd><a href="/fire-retardant-foliage-specification-guide.aspx">FIRE RETARDANT FOLIAGE SPECIFICATION GUIDE</a></dd>
                </dl>
                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]--></a></li>
                <li class="single"><a href="/services.aspx" class="nav-special single">Services<!--[if IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
 
                <div class="pos3">
                <dl>
                <dd><a href="/artificial-landscape-design.aspx">DESIGN</a></dd>
                <dd><a href="/artificial-plant-manufacturer.aspx">MANUFACTURING</a></dd>
                <dd><a href="/services-landscape-plant-installation.aspx">INSTALLATION</a></dd>
                <dd><a href="/services-wholesale-artificial-plants.aspx">WHOLESALE PLANTS</a></dd>
                </dl>
 
                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]--></a></li>
                <li class="single"><a href="/case-study-landing.aspx" class="tl single">Case Studies<!--[if IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <div class="pos4">
                <dl>
                <dd><a href="/artificial-plant-case-studies_malls_3.aspx">MALLS</a></dd>
                <dd><a href="/artificial-plant-case-studies_hotels_1.aspx">HOTELS</a></dd>
 
                <dd><a href="/artificial-plant-case-studies_casinos_2.aspx">CASINOS</a></dd>
                <dd><a href="/artificial-plant-case-studies_water-parks_8.aspx">WATER PARKS</a></dd>
                <dd><a href="/artificial-plant-case-studies_hospitality-retail-entertainment_7.aspx">HOSPITALITY / RETAIL / ENTERTAINMENT</a></dd>
                <dd><a href="/artificial-plant-case-studies_buildings-corporate-government_4.aspx">BUILDINGS / CORPORATE / GOVERNMENT</a></dd>
                <dd><a href="/artificial-plant-case-studies_healthcare-senior-living_9.aspx">HEALTHCARE / SENIOR LIVING</a></dd>
                <dd><a href="/artificial-plant-case-studies_outdoor-artificial-landscape_12.aspx">OUTDOOR ARTIFICIAL LANDSCAPE</a></dd>
 
                <dd><a href="/artificial-plant-case-studies_all-case-studies_0.aspx">ALL CASE STUDIES</a></dd>
                </dl>
                </div>             
                <!--[if lte IE 6]></td></tr></table></a><![endif]--></a></li>
                <li><a href="/about-us.aspx" class="nav-special">About Us</a></li>
                <li><a href="/contact-us.aspx" class="nav-special">Contact Us</a></li>
                <li class="single"><a href="/catalog-request.aspx" class="tl single">Catalog Request<!--[if IE 7]><!--></a><!--<![endif]-->
 
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <div class="pos5">
                <dl>
                <dd><a href="/catalog-request.aspx">Artificial Plant Catalog</a></dd>
                <dd><a href="/gsa-advantage.aspx">GSA Advantage</a></dd>
                </dl>
                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]--></a></li>
 
            </ul>
          </div>