Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Member
    Join Date
    Jul 2005
    Posts
    77
    Member #
    10681
    Hi all,

    I'm trying to use EasyMenu (http://www.easymenu.co.uk) for a site at the moment and am having trouble with the layout in Opera (on XP SP3 at various screen resolutions). It actually seems to look quite different in every browser on my PC but Opera is the worst...

    The problem is that the drop-down menu actually sits up over the top of the menu bar itself, rather than below the menu bar, where it should and does quite happily in IE8 on my PC.

    I thought that was the only problem until I showed it to someone else who has IE6 on their computer and apparently it does something similar.

    Another person I showed it to who says he is using IE8 (also on XP SP3 - he's a techie so I think he's telling the truth), told me that it appears similar again on his PC.

    I'm completely at a loss as to why this is happening so if anyone can help I'd be ecstatic!

    Menu CSS:
    Code:
    #mainMenu {
    	position: relative;
    	margin: auto;
    	text-align: left;
    	width: 100%; 
    	background-color: #000000;
    	color: #ffffff;
    	padding-top: 10px;
    	padding-bottom: 30px;
    	padding-left:0px;
    	z-index: 100;
    }
    
    #menuList {
    	text-align:left;
    	margin: 0px;
    	margin-left: 10px; 
    	padding: 0px;
    	z-index: 100px;
    }
    
    #menuList ul {
    	margin: 0px;
    	padding: 0px;
    	z-index: 100;
    }
    
    #menuList li {
    	display:inline;
    	list-style: none;
    	margin-right: -5px; 
    	padding: 0px;
    }
    
    a.starter {
    	background-color: #000000; 
    	color: #B3DEEE; 
    	font-size: 14px;
    	margin: 0px;
    	padding: 9.9px; 
    	padding-top: 2px;
    	padding-bottom: 2px;
    	text-decoration: none;
    	border-left: 1px solid #333333; 
    	border-right: 1px solid #333333;  
    	z-index:100;
    }
    
    a.starter:hover, a.starter:active, a.starter:focus {
    	background-color: #707070;
    	color: #B3DEEE; 
    }
    
    #submenu-archive {
    	width: 100px;
    }
    
    #submenu-program {
    	width: 160px;
    }
    
    .menu {
    	text-align: left;
    	color: #FFFFFF;
    	background-color: #707070;
    	position: absolute;
    	visibility: hidden;
    	z-index: 100;
    }
    
    .menu li a {
    	background-color: transparent;
    	color: #FFFFFF; 
    	display: block;
    	font-size: 13px;
    	line-height: 16px;
    	margin-top: -20px;
    	padding: 5px;
    	padding-left: 15px;
    	padding-right: 5px;
    	text-decoration: none;
    }
    
    .menu li a:hover, .menu li a:active, .menu li a:focus {
    	background-color: #7DB9D0; 
    	color: #333333;
    }

    Menu HTML:
    Code:
    		<div id="mainMenu">
    			<ul id="menuList">
    				<li class="menubar"><a class="starter" accesskey="1" title="" href="index.htm">ABOUT BFF</a></li>
    				<li class="menubar"><a class="starter" accesskey="2" title="" href="#">2010 PROGRAM</a>
    					<ul id="submenu-program" class="menu">
    						<li><a title="" href="overview.htm">Program Overview</a></li>
    						<li><a title="" href="opening.htm">Opening Night</a></li>
    						<li><a title="" href="special.htm">Special Events</a></li>
    						<li><a title="" href="background.htm">Youth Documentaries</a></li>
    						<li><a title="" href="digital.htm">Digital Stories</a></li>
    						<li><a title="" href="jumpcut.htm">Jump Cut</a></li>
    						<li><a title="" href="workshops.htm">Workshops</a></li>
    					</ul>
    				</li>
    				<li class="menubar"><a class="starter" accesskey="3" title="" href="tickets.htm">BUY TICKETS</a></li>
    				<li class="menubar"><a class="starter" accesskey="4" title="" href="sponsors.htm">SPONSORS</a></li>
    				<li class="menubar"><a class="starter" accesskey="5" title="" href="newsroom.htm">NEWSROOM</a></li>
    				<li class="menubar"><a class="starter" accesskey="6" title="" href="contacts.htm">CONTACTS</a></li>
    				<li class="menubar"><a class="starter" accesskey="7" title="" href="#">BFF ARCHIVES</a>
    					<ul id="submenu-archive" class="menu">
    						<li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/arts_bayside_film_festival_home.htm">2009</a></li>
    						<li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/archive/bff2008">2008</a></li>
    						<li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/filmfestival2007">2007</a></li>
    						<li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/filmfestival2006">2006</a></li>
    						<li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/filmfestival2005">2005</a></li>
    						<li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/filmfestival2004">2004</a></li>
    					</ul>
    				</li>
    			</ul>
    		</div>
    Let me know if you need to know anything else...

    Thanks so much in advance!

    Neil

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:38 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com