• Locked
No replies
Sun, 2011-02-06 05:13
dustin_grof
dustin_grof's picture
Offline
newbie
Last seen: 11 years 51 weeks ago
Timezone: GMT-8
Joined: 2011-02-06
Posts: 1
Points: 2

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

Top
Tags: