Sun, 2011-02-06 05:13
Hi,
I have been working on this menu for several days. Building the menu was fine, but when it came to testing it in IE7 I was stumped...
Basically what I have is a dropdown menu under the "Selling" menu item. It appears fine in every other browser.. In IE7 it positions incorrectly and moves over to the right.
I have spent 3 days searching, fiddling, and trying new things out. Can anyone help me with this?
A live preview is available:
http://dustingrof.com/WSI-LucTrahan-...rce/index.html
Thanks in advance for the help!
HTML
<div class="nav"> <div class="table"> <ul class="selectsmall"><li><a href="#"><b></b></a></li></ul> <ul class="selectlarge"><li><a href="#"><b>About Luc</b></a></li></ul> <ul class="selectmedium"><li><a href="#"><b>Listings</b></a></li></ul> <ul class="selectmedium"><li><a href="#"><b>Buyers</b></a></li></ul> <ul class="currentmediumsub"><li><a href="#"><b>Sellers</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="#">21 Step Marketing Plan</a></li> <li><a href="#">Selling Tips</a></li> <li><a href="#">Home Staging</a></li> <li><a href="#">Selling Values</a></li> </ul> </div> </li> </ul> <ul class="selectlarge"><li><a href="#"><b>Barrie & Area</b></a></li></ul> <ul class="selectlarge"><li><a href="#"><b>Contact Us</b></a></li></ul> </div> </div>
CSS:
.nav { height:30px; position:relative; font-family: Georgia, "Times New Roman", Times, serif; font-size:9px; width:100%; z-index:100; margin:0; padding:0; } .nav .table { display:table; margin:0 auto; } .nav .selectsmall, .nav .selectmedium, .nav .selectmediumsub, .nav .selectlarge, .nav .currentmediumsub, .nav .current { margin:0; padding:0; list-style:none; display:table-cell; white-space:nowrap; } .nav li { margin:0; padding:0; height:30px; } .nav .selectsmall a { background:url(images/menu-47.png) top left no-repeat; display:block; height:30px; float:left; width:47px; color:#C6BB9E; text-decoration:none; text-align:center; padding-top:10px; } .nav .selectmedium a, .nav .selectmediumsub a, .nav .currentmediumsub a { background:url(images/menu-106.png) top left no-repeat; display:block; height:30px; float:left; width:106px; color:#C6BB9E; text-decoration:none; text-align:center; padding-top:10px; } .nav .currentmediumsub a { background:url(images/menu-106-sel.png) top left no-repeat; } .nav .selectlarge a { background:url(images/menu-133.png) top left no-repeat; display:block; height:30px; float:left; width:133px; color:#C6BB9E; text-decoration:none; text-align:center; padding-top:10px; } .select_sub .sub a { color:#C6BB9E; text-decoration:none; text-align:left; } .select_sub li { padding:5px 10px; } .nav .selectsmall a:hover, .nav .selectsmall li:hover a { background: url(images/menu-47-mo.png) top left no-repeat; width:47px; cursor:pointer; color:#C08905; display:block; float:left; } .nav .selectmedium a:hover, .nav .selectmedium li:hover a { background: url(images/menu-106-mo.png) top left no-repeat; width:106px; cursor:pointer; color:#C08905; display:block; float:left; } .nav .selectmediumsub a:hover, .nav .selectmediumsub li:hover a { background: url(images/menu-106-mos.png) top left no-repeat; width:106px; cursor:pointer; color:#C08905; display:block; float:left; } .nav .currentmediumsub a:hover, .nav .currentmediumsub li:hover a { background: url(images/menu-106-mos.png) top left no-repeat; width:106px; cursor:pointer; color:#C08905; display:block; float:left; } .nav .selectlarge a:hover, .nav .selectlarge li:hover a { background: url(images/menu-133-mo.png) top left no-repeat; width:133px; cursor:pointer; color:#C08905; display:block; float:left; } .nav .selectsmall a b, .nav .selectmedium a b, .nav .selectmediumsub a b, .nav .selectlarge a b, .nav .currentmediumsub a b { font-weight:bold; } .nav .select_sub { display:none; position:absolute; } /* IE6 only */ .nav table { border-collapse:collapse; margin:-1px; font-size:1em; width:0; height:0; } .nav .sub { display:table; margin:0 auto; padding:0; list-style:none; } .nav .sub_active .current_sub a, .nav .sub_active a:hover { background: url(images/menu-133-mo.png) top left no-repeat; color:#2b3238; } .nav .selectmediumsub :hover .select_sub, .nav .currentmediumsub :hover .select_sub, .nav .current .show { display:block; position:absolute; top:35px; background:#311a0e url(images/gradient.png) repeat-x top left; border: 1px solid #3d2514; border-radius:1em; -webkit-border-radius:1em; -moz-border-radius:1em; -webkit-box-shadow: 0 1px 1px rgba(0,0,0 .2); -moz-box-shadow: 0 1px 1px rgba(0,0,0 .2); padding:0; z-index:100; text-align:center; } .nav .current .show { z-index:10; } /*subnav text colour*/ .nav .selectmedium :hover .sub li a, .nav .selectmediumsub :hover .sub li a, .nav .currentmediumsub :hover .sub li a, .nav .current .show .sub li a { display:block; float:left; background:transparent; padding:10px 10px 0 10px; margin:0; white-space:nowrap; border:0; color:#C6BB9E; } .nav .current .sub li.sub_show a { color:#2b3238; cursor:default; } .nav .selectmedium .sub li a, .nav .selectmediumsub .sub li a, .nav .currentmediumsub .sub li a { font-weight:normal; } /*subnave rollover hover*/ .nav .selectmedium :hover .sub li a:hover, .nav .selectmediumsub :hover .sub li a:hover, .nav .currentmediumsub :hover .sub li a:hover, .nav .current .sub li a:hover { visibility:visible; color:#C08905; }