Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dropdown Menu bloats table height in all brownsers except IE.

    I found a simple dropdown menu that works fine in IE but the top level menu title causes the table cell to bloat in height in Chrome and Firefox but works fine in IE.

    This is the menu template shown in a table.
    -Cell height normal in IE
    -Cell height bumped up in Chrome/Firefox

    http://mygig-disk.com/dropdown.htm

    I would like to use this menu because I have figure out how to use it and adapted all the CSS etc to fit my site.

    Thank You

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,211
    Thanks
    23
    Thanked 605 Times in 604 Posts
    Your link works great. you probably have CSS that is causing your problem. Please post YOUR code here so we can see the problem.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Your link works great. you probably have CSS that is causing your problem. Please post YOUR code here so we can see the problem.
    Reminder - this menu displays fine in Internet Explorer
    - but it increases height of table cell in Firefox and Chrome


    I am sure if I was using an all CSS page format, this wouldn't be a problem, But I have a 50 page web site in tables and I have no clue about CSS development . . I would have to quit my day job to convert my site to CSS.

    So I would really appreciate a solution that allows this dropdown menu to live in a table cell.


    Template Link http://mygig-disk.com/dropdown.htm


    On this menu template page, html, css, javascript are in one file . . below.


    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 2</title>
    
    <script type="text/javascript">
    
    var TimeOut         = 300;
    var currentLayer    = null;
    var currentitem     = null;
    var currentLayerNum = 0;
    var noClose         = 0;
    var closeTimer      = null;
    
    function mopen(n) {
      var l  = document.getElementById("menu"+n);
      var mm = document.getElementById("mmenu"+n);
     
      if(l) {
        mcancelclosetime();
        l.style.visibility='visible';
        if(currentLayer && (currentLayerNum != n))
          currentLayer.style.visibility='hidden';
        currentLayer = l;
        currentitem = mm;
        currentLayerNum = n;   
      } else if(currentLayer) {
        currentLayer.style.visibility='hidden';
        currentLayerNum = 0;
        currentitem = null;
        currentLayer = null;
      }
    }
    
    function mclosetime() {
      closeTimer = window.setTimeout(mclose, TimeOut);
    }
    
    function mcancelclosetime() {
      if(closeTimer) {
        window.clearTimeout(closeTimer);
        closeTimer = null;
      }
    }
    
    function mclose() {
      if(currentLayer && noClose!=1)   {
        currentLayer.style.visibility='hidden';
        currentLayerNum = 0;
        currentLayer = null;
        currentitem = null;
      } else {
        noClose = 0;
      }
      currentLayer = null;
      currentitem = null;
    }
    
    document.onclick = mclose; 
    </script>
    
    <style type="text/css">
    #nav li {
    border-top: 3px solid red;
    list-style: none;
      float: left;
      font: bold 16px arial;
    }
    
    #nav li a.menu {
      display: block;
      text-align: center;
      background: #2175bc;
      padding: 4px 10px;
      margin: 0 1px 0 0;
    
      color: #FFF;
      width: 110px;
      text-decoration: none;
    }
    
    #nav li a.menu:hover {
      background: #2586d7;
    }
    
    .submenu {
      background: #2175bc;
      border-bottom: 3px solid red;
      visibility: hidden;
      position: absolute;
      z-index: 5;
    }
    
    
    .submenu a {
      display: block;
      font: 16px arial;
      text-align: left;
      text-decoration: none;
      color: #ffffff;
      width: 110px;
      padding: 4px 10px;
      text-align: center;
      }
    
    .submenu a:hover {
      background: #2586d7;
      color: yellow;
    text-align: right;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <table border="1" width="100%" bordercolorlight="#0000FF" cellspacing="0" cellpadding="0" bordercolordark="#0000FF" style="border-collapse: collapse">
    	<tr>
    		<td>&nbsp;</td>
    	</tr>
    	<tr>
    		<td>
    		
    	<ul id="nav">
      <li><a href="#" class="menu" id="mmenu1" onmouseover="mopen(1);" onmouseout="mclosetime();">MENU-1</a>
        <div class="submenu" id="menu1" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">
            <a href="#">SUB 1-1</a>
            <a href="#">SUB 1-2</a>
            <a href="#">SUB 1-3</a>
            <a href="#">SUB 1-4</a>
        </div>
      </li>
      <li><a href="#" class="menu" id="mmenu2" onmouseover="mopen(2);" onmouseout="mclosetime();">MENU-2</a>
        <div class="submenu" id="menu2" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">
            <a href="#">SUB 2-1</a>
            <a href="#">SUB 2-2</a>
            <a href="#">SUB 2-3</a>
            <a href="#">SUB 2-4</a>
        </div>
      </li>
      
      <li><a href="#" class="menu" id="mmenu3" onmouseover="mopen(3);" onmouseout="mclosetime();">MENU-3</a>
        <div class="submenu" id="menu3" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">
            <a href="#">SUB 3-1</a>
            <a href="#">SUB 3-2</a>
            <a href="#">SUB 3-3</a>
            <a href="#">SUB 3-4</a>
        </div>
      </li>
    
    <li><a href="#" class="menu" id="mmenu4" onmouseover="mopen(4);" onmouseout="mclosetime();">MENU-4</a>
        <div class="submenu" id="menu4" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">
            <a href="#">SUB 4-1</a>
            <a href="#">SUB 4-2</a>
            <a href="#">SUB 4-3</a>
            <a href="#">SUB 4-4</a>
        </div>
      </li>
    
    </ul>
    	
    		
    		
    		</td>
    	</tr>
    	<tr>
    		<td>&nbsp;</td>
    	</tr>
    </table>
    
    </body>
    
    </html>
    Last edited by VIPStephan; 09-05-2013 at 10:51 PM. Reason: added code BB tags

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,211
    Thanks
    23
    Thanked 605 Times in 604 Posts
    Sorry swbca I just don't see it. I use IE ver8 and FF ver 23.0.1 The cells are about 1 or 2 pixels taller in FF. Nothing to worry about.
    Have you tried clearing your browser's cache out? I use ccleaner to do a through job when it's needed.

    Maybe a link to your site would work better???
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    What doctype are you using? IE tends to display things in a non-standard way if you don't have a doctype or use certain older ones.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Sorry swbca I just don't see it. I use IE ver8 and FF ver 23.0.1 The cells are about 1 or 2 pixels taller in FF. Nothing to worry about.
    Have you tried clearing your browser's cache out? I use ccleaner to do a through job when it's needed.

    Maybe a link to your site would work better???
    The code is not in my site yet because of this problem.

    OK, I updated Firefox and it displays correctly in the current version.

    Status of Problem

    Internet Explorer is still fine (some respondents missed that)

    The current version of CHROME and SAFARI add 16 pixes of white space above the top menu items in this link.

    http://mygig-disk.com/dropdown.htm


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •