Link & Code provided - balloon not working in IE

Discussion in 'CSS' started by le007, Oct 9, 2007.

  1. #1
    http://homepage.eircom.net/~egoman/marginmenu.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <style type="text/css">
    #nav ul {
    white-space: nowrap;
    font-family: arial;
    font-size:12px;
    list-style:none;
    }
    #nav li {
    float: left;
    margin-right: 2px;
    }
    #nav a, #nav .active {
    padding: 0 11px;
    height: 2em;
    float:left;
    line-height: 2em;
    margin: 0 0 4px;
    background-color: #000000;
    color: white;
    text-decoration: none;
    width: 100px;
    }
    #nav a:hover {
    color: #fff;
    background-color: #369;
    margin: 3px 0 0 0;
    }
    #nav .active {
    background: #369;
    margin: 0 2px 0 0;
    }
    
    
     a span {
     display: none;
     }
      a:hover span {
          display: block;
          position: relative; top: 0px; left: 0;
          /* formatting only styles */
          width: 100px;
          padding: 5px; margin: 0px; z-index: 100;
          background: green; border: 1px dotted #c0c0c0;
          color: white;
          opacity: 0.9;
          /* end formatting */
    
          }
    
    </style>
    </head>
    
    <body>
    <div id="nav">
            <ul>
                <li><a href="test" >HOME<span>You are home</span></a></li>
                <li><a href="test" >test</a></li>
                <li><a href="test" >test</a></li>
                <li><a href="test" >test</a></li>
                <li><a href="test">test</a></li>
                <li><a href="test">test</a></li>
                <li><a href="test">test</a></li>
            </ul>
        </div>
    </body>
    </html>
    Code (markup):
    Hey all, anyone know how to make IE look like FF? Also have the span directly under the menu option?
    Thanks,
    Leo
     
    le007, Oct 9, 2007 IP
  2. buzza_gts

    buzza_gts Active Member

    Messages:
    199
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    58
    #2
    I test in FF and IE7 and they both look identical is the problem with IE6 only?
     
    buzza_gts, Oct 9, 2007 IP
  3. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #3
    Yes, IE6 only - specify IE6 from now on :)
     
    le007, Oct 9, 2007 IP
  4. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #4
    le007, Oct 10, 2007 IP