PDA

View Full Version : Layout problems with menu system



hackdesigner
05 May 2010, 09:06 PM
Hi all,

http://www.smartweb.net.au/bff

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.

Oh and I just checked it via Safari on iPhone and found another problem (though it's not the end of the world if this one doesn't get fixed)... The menu seems to work okay but instead of being in one line across the screen, it doubles over into two lines!

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

Menu CSS:



#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:


<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