SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot samohtwerdna's Avatar
    Join Date
    Jul 2007
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    nested ul display prob in IE

    hello all,

    I have a nav list that drops down in the left column using ul's

    For some reason IE (at least IE7) like to add a margin to the bottom of the nested list.

    Here is my code:
    PHP Code:
    <?php
    <script language="javascript" type="text/javascript">
    // on page load, hide (minimize) the list that should start as hidden (minimized)
    function setLists() {
      
    document.getElementById('TM').style.display       'none';
      
    document.getElementById('PM').style.display       'none';
      
    document.getElementById('DF').style.display       'none';
    }
    function 
    showTM() {
      if (
    document.getElementById('TM').style.display == 'none') {
        
    document.getElementById('TM').style.display 'block';
      } else {
        
    document.getElementById('TM').style.display 'none';
      }
    }
    function 
    showPM() {
      if (
    document.getElementById('PM').style.display == 'none') {
        
    document.getElementById('PM').style.display 'block';
      } else {
        
    document.getElementById('PM').style.display 'none';
      }
    }
    function 
    showDF() {
      if (
    document.getElementById('DF').style.display == 'none') {
        
    document.getElementById('DF').style.display 'block';
      } else {
        
    document.getElementById('DF').style.display 'none';
      }
    }
    </script>
        <title></title>
    <style type="text/css">
    <!--
    body {background:#000;}

    a:link, a:visited{
      color: #9f0622;
      text-decoration: none;
    }

    a:hover{
      text-decoration: none;
      background: #CC0000;
      color:#FFFFFF;
    }

      #topnav a {
        display: block;
        padding: 0px;
        margin-left:10px;
        width: auto;
        background-color: #333;
        border-bottom: 1px solid #000;
        text-decoration: none;
        font-weight:bolder;
        }

      #topnav a:link, #topnav a:visited {
      color:#333;

        text-decoration: none;
        }

      #topnav a:hover {
        background: #006699;
        color: #fff;
        }
    #nav table {position:absolute; border-collapse:collapse; left:0px; top:0; font-size:11px;}
    #topnav {margin:0; padding:0;}
    #topnav a.btnav, #topnav a.btnav:hover  {background-color:transparent; border:0; color:#333;}
    .navTitle {
    background:url(assets/pagenbk.jpg); border-top:1px solid #ccc; border-bottom:1px solid #ccc;
    list-style:none; width:250px; cursor:pointer; padding:0px;
    }

    a.list, a.list:hover {margin:0px;}

    #TM, #PM, #DF {background:#333; width:250px; margin:0; padding:0; list-style:none; line-height:1.3em;}
    -->
    </style>
      </head>
      <body onload="setLists()">
        <div id="nav">
          <ul id="topnav">
            <li class="navTitle one" onclick="showTM()">
                        <b>Total Molding Solutions</b></li>
              <ul id="TM">
                <?php ?>
                <li>
                  <a href="" class="list">1</a>
                </li>
                <li>
                  <a href="" class="list">2</a>
                </li>
                <li>
                  <a href="" class="list">3</a>
                </li>
              </ul>
            <li class="navTitle two" onclick="showPM()">Plastic Molding Equipment</li>
              <ul id="PM">
                <?php ?>
                <li>
                  <a href="">1</a>
                </li>
                <li>
                  <a href="">2</a>
                </li>
                <li>
                  <a href="">3</a>
                </li>
              </ul>
            </li>
            <li class="navTitle three" onclick="showDF()">Deflashing System</li>
              <ul id="DF">
                <?php ?>
                <li>
                  <a href="">1</a>
                </li>
                <li>
                  <a href="">2</a>
                </li>
                <li>
                  <a href="">3</a>
                </li>
              </ul>
            <li class="navTitle four" onclick="">Corona Beam Testing(ERAT)
            </li>
            <li class="navTitle five" onclick="">Mold Design
            </li>
            <li class="navTitle six" onclick="">Vacuum Potting
            </li>
            <li class="navTitle seven" onclick="">Vacuum Impregnating Systems
            </li>
            <li class="navTitle eight" onclick="">Refurbishing
            </li>
            <li class="navTitle nine" onclick="">Spare Parts
            </li>
            <li class="navTitle ten" onclick="">Onsite Service
            </li>
          </ul>
        </div>
    I included most of the code js,CSS,html so you could see what I am trying to do.

    Any Ideas what I'm doing wrong for IE??

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You should really post html and not html and php tags. Just give use the view source code from the browser

    Looking at the code it looks as though you are trying to make a nested list structure but you have the list tags in the wrong place. Nested uls must be contained within a list pair. ....<li> <ul><li>content</li></ul> </li>.....

    To kill the whitespace bugs in IE it is always best to float the lists where possible or at least ensure both the list and anchor are both subject to "haslayout" (floating will do this.).

    I oculdn't really tell what you wanted it to look like but you should be able to adapt it.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    body {background:#000;}
    a:link, a:visited{
      color: #9f0622;
      text-decoration: none;
    }
    a:hover{
      text-decoration: none;
      background: #CC0000;
      color:#FFFFFF;
    }
    #topnav a {
        display: block;
        padding: 0px;
        width: 250px;
            text-indent:10px;
        background-color: #333;
        border-bottom: 1px solid #000;
        text-decoration: none;
        font-weight:bolder;
    
            }
    #topnav a:link, #topnav a:visited {
      color:#333;
      text-decoration: none;
    }
    
    #topnav a:hover {
        background: #006699;
        color: #fff;
    }
    #nav li{
        width:250px;
        float:left;
        clear:left;
    }
    #nav table {position:absolute; border-collapse:collapse; left:0px; top:0; font-size:11px;}
    #topnav {margin:0; padding:0;}
    #topnav a.btnav, #topnav a.btnav:hover  {background-color:transparent; border:0; color:#333;}
    
    .navTitle {
    background:url(assets/pagenbk.jpg); border-top:1px solid #ccc; border-bottom:1px solid #ccc;
    list-style:none; width:250px; cursor:pointer; padding:0px;
    }
    a.list, a.list:hover {margin:0px;}
    
    #TM, #PM, #DF {background:#333; width:250px; margin:0; padding:0; list-style:none; line-height:1.3em;}
    
    
    </style>
    </head>
    <body onload="setLists()">
    <div id="nav">
        <ul id="topnav">
            <li class="navTitle one" onclick="showTM()"> <b>Total Molding Solutions</b>
                <ul id="TM">
                    <li> <a href="" class="list">1</a> </li>
                    <li> <a href="" class="list">2</a> </li>
                    <li> <a href="" class="list">3</a> </li>
                </ul>
            </li>
            <li class="navTitle two" onclick="showPM()">Plastic Molding Equipment
                <ul id="PM">
                    <li> <a href="">1</a> </li>
                    <li> <a href="">2</a> </li>
                    <li> <a href="">3</a> </li>
                </ul>
            </li>
            <li class="navTitle three" onclick="showDF()">Deflashing System
                <ul id="DF">
                    <li> <a href="">1</a> </li>
                    <li> <a href="">2</a> </li>
                    <li> <a href="">3</a> </li>
                </ul>
            </li>
            <li class="navTitle four" onclick="">Corona Beam Testing(ERAT) </li>
            <li class="navTitle five" onclick="">Mold Design </li>
            <li class="navTitle six" onclick="">Vacuum Potting </li>
            <li class="navTitle seven" onclick="">Vacuum Impregnating Systems </li>
            <li class="navTitle eight" onclick="">Refurbishing </li>
            <li class="navTitle nine" onclick="">Spare Parts </li>
            <li class="navTitle ten" onclick="">Onsite Service </li>
        </ul>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Zealot samohtwerdna's Avatar
    Join Date
    Jul 2007
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the explanation and the demo!

    I was able to fix the white space problem and style up the list a bit more - but I couldn't find the IE whitespace problem - so thanks for the help!

    What is "haslayout"?

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's an IE bug - you can read about it here.


Bookmarks

Posting Permissions

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