css sub-menu overlapping problem

[shortwave]

This is a serious issue seen in Firefox 2.0.0.11 and I.E. v. 7 (and
previous versions of both Firefox and I.E.) for XP, Vista, and Mac,
although the issue tested isn't seen on every version of Firefox and
I.E. for all three OS's.

The problem: the links for the sub-menu will begin to overlap on their
surrounding links after clicking on the particular link. This will
continue until the link is fully over the surrounding link.

The b classes are there for a border around the menu.

CSS:

#container .menu {
font-weight: bold;
background-color: #FFFFCC;
color: #000000;
cursor: pointer;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #000000;
width: 148px;
padding: 0 0 0 1px;
margin: 0px;
line-height: 2.2;
}
#container .menu a:link {
color: #000000;
text-decoration: none;
}
#container .menu a:visited {
color: #000000;
text-decoration: none;
}
#container .menu a:hover {
color: #000000;
text-decoration: none;
display: block;
}
#container .submenu {
font-size: 11px;
font-style: normal;
background-color: FFFFCC;
color: #000000;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #000000;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #000000;
width: 148px;
padding: 1 2 1 2px;
margin-bottom: 0px;
line-height: 0.3;
}
#container .submenu a:link {
background-color: #FFFFCC;
color: #000000;
text-decoration: none;
display: block;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #FFFFCC;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #FFFFCC;
padding: 5 0 5 0px;
}
#container .submenu a:visited {
color: #000000;
text-decoration: none;
}
#container .submenu a:hover {
color: #000000;
text-decoration: none;
background-color: #FF0000;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #000000;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #000000;
}

HTML:

<!-- Begin Navigation Menu -->
<div class="menu2">
<div id="switch">
<div class="menu" onclick="SwitchMenu('sub1')"><a
href="index.htm">Home</a></div>
<div class="menu" onclick="SwitchMenu('sub2')"><a
href="#">Organization</a></div>
<span class="submenu" id="sub2">
<a href="activities.htm">Activities</a><br>
<a href="gallery/apparel.htm" target="_blank">Apparel</a><br>
<a href="archives.htm">Archives</a><br>
<a href="conferences.htm">Conferences</a><br>
<a href="constitution.htm">Constitution</a><br>
<a href="fundraising.htm">Fundraising</a><br>
<a href="http://www.a-free-guestbook.com/guestbook.php?
username=stormchasers" target="_blank">Guestbook</a><br>
<a href="guestspeakers.htm">Guest Speakers</a><br>
<a href="internships.htm">Internships</a><br>
<a href="meetings.htm">Meetings</a><br>
<a href="mission.htm">Mission Statement</a><br>
<a href="news.htm">News Releases</a><br>
<a href="officers.htm">Current Officers</a><br>
<a href="outreached.htm">Outreach Education</a>
</span>
<div class="menu" onclick="SwitchMenu('sub3')"><a
href="#">Operations</a></div>
<span class="submenu" id="sub3">
<a href="gallery/equipment.htm" target="_blank">Chase
Equipment</a><br>
<a href="gallery/metlab.htm" target="_blank">Meteorology
Laboratory</a><br>
<a href="gallery/gis.htm" target="_blank">GIS Laboratory</
a><br>
<a href="guidelines.htm">Chasing Guidelines</a>
</span>
<div class="menu" onclick="SwitchMenu('sub4')"><a href="#">Photo/
Video Gallery</a></div>
<span class="submenu" id="sub4">
<a href="gallery/halloffame.htm" target="_blank">Hall of Fame</
a><br>
<a href="photos.htm">Photos</a><br>
<a href="videos.htm">Videos</a>
</span>
<div class="menu" onclick="SwitchMenu('sub5')"><a
href="media.htm">Media Recognition</a></div>
<div class="menu" onclick="SwitchMenu('sub6')"><a href="#">Forecast
Products</a></div>
<span class="submenu" id="sub6">
<a href="radar.htm">Radar</a><br>
<a href="http://weather.bgsu.edu/sats/bsu/dave.jpg"
target="_blank">Satellite</a><br>
<a href="http://www.rap.ucar.edu/weather/surface/sfc_evv.gif"
target="_blank">Surface</a><br>
<a href="http://www.spc.noaa.gov/exper/soundings/"
target="_blank">Upper Air Soundings</a><br>
<a href="boltec.htm">Lightning Sensor</a><br>
<a href="http://www.bsu.edu/csh/geog/weather/"
target="_blank">Weather Station</a><br>
<a href="links/" target="_blank">Weather Links</a>
</span>
<div class="menu" onclick="SwitchMenu('sub7')"><a
href="webcams.htm">Campus Cams</a></div>
<div class="menu" onclick="SwitchMenu('sub8')"><a
href="contacts.htm">Contact Us</a></div>
<div class="bottom"></div>
<div class="b5"></div>
<div class="b4"></div>
<div class="b3"></div>
<div class="b2"></div>
<div class="b1"></div>
<br>
<br>
</div>
<!-- End Navigation Menu -->

Javascript:

var persistmenu="yes"
var persisttype="sitewide"
if (document.getElementById){ document.write('<style type="text/css">
\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar =
document.getElementById("switch").getElementsByTagName("span");
if(el.style.display != "block"){ for (var i=0; i<ar.length; i++){
if (ar.className=="submenu") ar.style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function get_cookie(Name) { var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" :
window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" :
window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

Help is appreciated.

 

[rf]

This is a serious issue seen in Firefox 2.0.0.11 and I.E. v. 7 (and
previous versions of both Firefox and I.E.) for XP, Vista, and Mac,
although the issue tested isn't seen on every version of Firefox and
I.E. for all three OS's.

The problem: the links for the sub-menu will begin to overlap on their
surrounding links after clicking on the particular link. This will
continue until the link is fully over the surrounding link.

<snip code>

URL?

 

[Bergamot]

The problem: the links for the sub-menu will begin to overlap on their
surrounding links after clicking on the particular link.

CSS:
HTML:

Post a URL.

 

[shortwave]

The problem: the links for the sub-menu will begin to overlap on their
surrounding links after clicking on the particular link.

CSS:
HTML:

http://www.bsu.edu/web/stormchasers

 

[dorayme]

<[email protected]

,

http://www.bsu.edu/web/stormchasers

You have html errors and many css ones. You can sort the css ones
out by going to

http://jigsaw.w3.org/css-validator

Turn off all your javascript and see how the overlapping occurs
in the menu items at fon size increases by pretending to be a
user who likes his or her fonts bigger than the usual 18 year old.

Why have you got:

#container .submenu {
....
line-height: 0.3;

That is a very low figure?

But I do not dare to specify one in spite of the removal of yours
being necessary.

Could someone please refer this poster to a recent post by Talbot
about over specifying...

 

[rf]

http://www.bsu.edu/web/stormchasers

Why do the submenu items open in a new tab? I didn't want a new tab!

Why is the font size 11 pixels? Why not 1em, my preferred font size?

In any case, using firebug I determined that the submenus have line-height:
0.3. 0.3 of 11 pixels is, 3.3 pixels. When the menu is display correctly
there is top/bottom padding of 5 pixels on these things. When visited this
padding is no longer there. Some of that javascript is doing the wrong
thing, or the CSS that it is fiddling with is wrong.

A most perculiar way of doing things