2 replies [Last post]
jake7363
Offline
newbie
Last seen: 2 years 37 weeks ago
Timezone: GMT-5
Joined: 2008-11-10
Posts: 3
Points: 0

Hi,
I am hoping there is a simple answer to my question.
I am using a dropdown navbar and all is well in ff 3.01. But when I use IE 7.0, part of the dropdown is beneath a div container, which does not allow access to those menu items.

What is the difference in the way IE reads against FF that makes that occur? If I can find out, I think I can fix the problem.

Thanks in advance,
Jake

vin2785
Offline
Regular
West Yorkshire
Last seen: 4 years 47 weeks ago
West Yorkshire
Joined: 2008-12-12
Posts: 35
Points: 11

Try pasting your code please

Try pasting your code please =)

Whenever I make a drop down menu I tend to create an alternative stylesheet for the IE browsers and adjust margin settings accordingly but maybe the more experienced guys here know of a better way...

jake7363
Offline
newbie
Last seen: 2 years 37 weeks ago
Timezone: GMT-5
Joined: 2008-11-10
Posts: 3
Points: 0

re IE vs FF dropdown menu w/code

There are two external style sheets and one html
Thanks in advance for any and all help.
Jake

html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css"href="FavLInksExp.css"/>
<link rel="stylesheet" type="text/css" href="../menu/menu_style.css"
<style type="text/css">
<!--
 
-->
</style>
 
 
 
</head>
 
<body>
 
<div id="wrapper">
	<div class="header">
	 header	</div>
	<div class="lcontainer">
	left
		<div>&nbsp;</div>
	</div>
	<div class="mcontainer">
		<div class="unavbar">
			<div class="nav-container-outer">
			 <ul id="nav-container" class="nav-container">   
				  <li><a class="item-primary" href="indexX.html" target="_self">&nbsp;&nbsp;Home&nbsp;&nbsp; </a><!--Home-->
				  </li>
				  <li><span class="divider divider-vert" ></span></li>
				  <li><a href="#" title="Store" target="_self">&nbsp;&nbsp;Store&nbsp;&nbsp;</a><!--Store-->
					 <ul style="width:150px;">
						<li><a  href="MusicX.html" title="Music" target="_self" >Music</a></li>
						<li><a href="PlaysX.html" title="Plays" target="_self" >Plays</a></li>
						<li><a href="VideosX.html" title="Video" target="_self" >Video</a></li>
						<li><a href="FreeX.html" title="Free" target="_self" >Free</a></li>
					 </ul>
				   </li>
				   <li><span class="divider divider-vert" ></span></li>
				  <li><a class="item-primary" href="#" target="_self">Fun Stuff</a><!--Fun Stuff-->
					 <ul style="width:150px;">
						<li><a  href="FavLinksX.html"  title="Favorite Links" target="_self">Favorite Links</a></li>
						<li><a href="../AlbumsFl/CapMoments.html" title="Photos" target="_self" >Photos</a></li>
						<li><a href="FunPlacesX.html" title="Places" target="_self" >Places</a></li>
					 </ul>
				   </li>
				   <li><span class="divider divider-vert" ></span></li>
				  <li><a class="item-primary" href="#" target="_self">History</a><!-- History -->
					 <ul style="width:150px;">
						<li><a href="HistoryX.html" title="Musical History Tour" target="_self" >Musical History Tour</a></li>
						<li><a href="LifeTimesX.html" title="Life and Times" target="_self" >Life and Times</a></li>
						<li><a href="WitnessX.html" title="Witness" target="_self" >Witness</a></li>
					 </ul>
				   </li>
				   <li><span class="divider divider-vert" ></span></li>
					<li><a class="item-primary" href="#" target="_self">Wordsmithing</a>
					 <ul style="width:150px;">
						<li><a href="QuickWordX.htm" title="A Quick Word" target="_self" >A Quick Word</a></li>
						<li><a href="SaysX.html" title="Somethig to Say" target="_self" >Somethig to Say</a></li>
						<li><span class="submenu"> Clippings</span></li>
						<li><a href="ClippingsAX.htm" title="Articles" target="_self">&nbsp;>Articles</a></li>
						<li><a href="ClippingsIX.htm" title="Interviews" target="_self">&nbsp;>Interviews</a></li>
						<li><a href="ClippingsRmX.htm" title="Remarks" target="_self">&nbsp;>Remarks</a></li>
						<li><a href="ClippingsRvX.htm" title="Reviews" target="_self">&nbsp;>Reviews</a></li>
					 </ul>
				   </li>
				   <li><span class="divider divider-vert" ></span></li>
				  <li><a href="OnAirX.htm" target="_self" class="item-primary style1">On the Air</a></li><!-- On the Air -->
				  <li><span class="divider divider-vert" ></span></li> 
				  <!--<li class="clear"> </li>-->
				   <li><a class="item-primary" href="#" target="_self">Spotlight</a><!-- Spotlight -->
					 <ul style="width:150px;">
						<li><a href="ElementsX.htm" title="Elements" target="_self" >The Elements</a></li>
						<!--<li><a href="storePlays" title="Plays" target="_self" >Other Artists</a></li>-->
						<li><span class="submenu">Christian</span></li>
						<li><a href="LifeTeenX.htm" title="Life Teen" target="_self" >&nbsp;>Life Teen</a></li>
						<li><a href="FestX.htm" title="Fest" target="_self" >&nbsp;>Fest</a></li>
					 </ul>
				   </li>
				</ul>
			</div>
		</div>
		<div class="text">
				middle
		</div>
			<div class="footer">
		footer
		<ul class="bnavbar">	
			<li>Home</li>
			<li>Store</li>
			<li>Photos</li>
			<li>Contact</li>
		</ul>
		</div>
 
	</div>
	<div class="rcontainer">
	right
	</div>
 
</div>
</body>
</html>
 
 
EXTERNAL SHEET 1:(<link rel="stylesheet" type="text/css"href="FavLInksExp.css"/>)
@charset "utf-8";
/* CSS Document */
 
/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #40435C;
padding: 0px;
height: 74px;
background: url(images/nav-bg.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
 
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
 
.nav-container .submenu {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding-left:5px;
	color:#393A44;
}
 
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
/*position:relative;*/
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:210;
}
.nav-container ul ul{
z-index:220;
}
.nav-container ul ul ul{
z-index:230;
}
.nav-container ul ul ul ul{
z-index:240;
}
.nav-container ul ul ul ul ul{
z-index:250;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:80%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}
 
/*^'^ Primary Items ^'^*/	
#nav-container a{	
padding:7px 0px 7px 0px;
margin: 10px 15px 0px 10px;
color: #605d97;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(images/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}
 
#nav-container a:hover{
color: #000000;
background: url(images/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: center;
}
 
/*^'^ Secondary Items Container ^'^*/	
#nav-container div, #nav-container ul {	
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(images/item-secondary-container-bg.jpg);
background-repeat: repeat-x;
background-color: #A7AAC9;
border-bottom: 1px solid #A7AAB9
}
 
/*^'^ Secondary Items ^'^*/	
#nav-container div a, #nav-container ul a{	
padding:3px 10px 3px 6px;
background-color: #000000;
background: url(images/item-secondary-bg.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}
 
/*^'^ Secondary Items Hover State ^'^*/	
#nav-container div a:hover, #nav-container ul a:hover{	
background-color: #000000;
background: url(images/item-secondary-bg.jpg);
background-repeat: no-repeat;
color:#636882;
}
 
/*^'^ Secondary Item Titles ^'^*/	
#nav-container .item-secondary-title{	
cursor:default;
padding:4px 0px 3px 7px;
color: #636882;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
/* background: url(images/item-secondary-title-bg.jpg); */
background-repeat: no-repeat;
font-weight:bold;
}
 
 
/*^'^ Horizontal Dividers ^'^*/	
#nav-container .divider-horiz{	
border-top-width:1px;
margin:5px 5px;
border-color: #3a3c52;
}
 
/*^'^ Vertical Dividers ^'^*/	
#nav-container .divider-vert{	
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}
 
EXTERNAL STYLESHEET 2: (<link rel="stylesheet" type="text/css"href="FavLInksExp.css"/>)
/* CSS Document */
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
 
#wrapper {
	margin:0 auto;
	clear:both;
	background-color:#00DF00;
	width:100%;
	float:left;
	position:relative;
	height:900px;
}
 
.header {
	background-color:#FFBFFF;
	width:100%;
	float:left;
	position:relative;
	height:100px;
	margin-top:50px;
}
 
.lcontainer {
	float:left;
	position:relative;
	background-color:#2AFF55;
	width:20%;
	height:600px;
 
}
 
.mcontainer {
	float:left;
	position:relative;
	background-color:#551FFF;
	width:60%;
	height:600px;
}
.unavbar {
	float:left;
	position:relative;
	width:100%;
	height:31px;
	background-color:#C0DCC0;
}
 
.text {
	float:left;
	position:relative;
	width:100%;
	height:800px;
	background-color: #FF7F55 ;
	margin-top:30px;
	z-index:1;
}
.rcontainer {
	float:left;
	position:relative;
	background-color:#66FFFF;
	width:20%;
	height:600px;
}
 
.footer {
	float:left;
	position:relative;
	background-color:#7FBF55;
	height:75px;
	width:100%;
}
 
.bnavbar {
	text-align:center;
}
 
.bnavbar li{ 
	display:inline;
	width:100px;
	text-align:center;
	padding:0 10px 0 10px;  
	border-width:2px;
	border-color:#2A0000;
	border-style:groove ;
	height:20px;
	background-color:#FFFFFF;
	margin-right:2px;
}
 
.bnavbar li:hover {
	background-color:#FF0000;
	border-right-style:outset;
	border-right-width:3px;
}