css sub-menu overlapping problem

Discussion in 'HTML' started by shortwave, Dec 16, 2007.

  1. shortwave

    shortwave Guest

    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.
    shortwave, Dec 16, 2007
    #1
    1. Advertising

  2. shortwave

    rf Guest

    "shortwave" <> wrote in message
    news:...
    > 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?

    --
    Richard.
    rf, Dec 17, 2007
    #2
    1. Advertising

  3. shortwave

    Bergamot Guest

    shortwave wrote:
    >
    > 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.

    --
    Berg
    Bergamot, Dec 17, 2007
    #3
  4. shortwave

    shortwave Guest

    shortwave wrote:

    > 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
    shortwave, Dec 17, 2007
    #4
  5. shortwave

    dorayme Guest

    In article
    <
    >,

    shortwave <> wrote:

    > shortwave wrote:
    >
    > > 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


    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...

    --
    dorayme
    dorayme, Dec 17, 2007
    #5
  6. shortwave

    rf Guest

    "shortwave" <> wrote in message
    news:...
    > shortwave wrote:
    >
    >> 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


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

    --
    Richard.
    rf, Dec 17, 2007
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tony
    Replies:
    4
    Views:
    2,128
    Andy De Petter
    Nov 27, 2003
  2. Ben
    Replies:
    2
    Views:
    866
  3. Lawrence D'Oliveiro

    Death To Sub-Sub-Sub-Directories!

    Lawrence D'Oliveiro, May 5, 2011, in forum: Java
    Replies:
    92
    Views:
    1,979
    Lawrence D'Oliveiro
    May 20, 2011
  4. shantanu
    Replies:
    0
    Views:
    122
    shantanu
    Aug 17, 2005
  5. DCC700
    Replies:
    1
    Views:
    1,315
    DCC700
    Apr 23, 2009
Loading...

Share This Page