www.webdeveloper.com
Results 1 to 3 of 3

Thread: CSS inline list not working in IE7

  1. #1
    Join Date
    Feb 2010
    Posts
    3

    CSS inline list not working in IE7

    This menu (more specifically, the inline display) works in Firefox and IE8, but not in IE7. PLEASE HELP! THANK YOU! Code Below...

    CSS:
    .menu ul{
    position:relative;
    top: 0px;
    left:7px;
    padding: 0px;
    margin:0px;
    display: inline-block;
    list-style: none;
    zoom:1; *display: inline; _height: 30px;
    }
    .menu ul li{
    display: inherit;
    }
    .menu ul li a{
    display: inherit;
    text-decoration: none;
    font-weight:bold;
    font-size:12px;
    padding: 0px 2px 4px 2px;
    }
    #menubreak{
    display: inline-block;
    margin: 0px;
    padding: 0px;
    width: 1px;
    height:10px;
    border-left: 1px solid #000000;
    zoom:1; *display: inline; _height: 30px;
    }

    HTML:
    <div class="menu">
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><div id="menubreak"></div></li>
    <li><a href="#">Link 2</a></li>
    <li><div id="menubreak"></div></li>
    <li><a href="#">Link 3</a></li>
    <li><div id="menubreak"></div></li>
    <li><a href="#">Link 4</a></li>
    <li><div id="menubreak"></div></li>
    <li><a href="#">Link 5</a></li>
    <li><div id="menubreak"></div></li>
    <li><a href="#">Link 6</a></li>
    <li><div id="menubreak"></div></li>
    <li><a href="#">Link 7</a></li>
    </ul>
    </div>

  2. #2
    Join Date
    Mar 2007
    Posts
    946
    Next time make sure to use the code tags and also the id tag is only suppose to be used once on a page. You are using it multiple times with "menubreak". I have changed it below to a class.

    CSS
    Code:
    .menu ul{
    position:relative;
    top: 0px;
    left:7px;
    padding: 0px;
    margin:0px;
    display: inline;
    }
    .menu ul li{
    display: inline;
    }
    .menu ul li a{
    text-decoration: none;
    font-weight:bold;
    font-size:12px;
    padding: 0px 2px 4px 2px;
    }
    .menubreak{
    display: inline;
    margin: 0px;
    padding: 0px;
    width: 1px;
    height:10px;
    border-left: 1px solid #000000;
    }
    HTML
    Code:
    <div class="menu">
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><div class="menubreak"></div></li>
    <li><a href="#">Link 2</a></li>
    <li><div class="menubreak"></div></li>
    <li><a href="#">Link 3</a></li>
    <li><div class="menubreak"></div></li>
    <li><a href="#">Link 4</a></li>
    <li><div class="menubreak"></div></li>
    <li><a href="#">Link 5</a></li>
    <li><div class="menubreak"></div></li>
    <li><a href="#">Link 6</a></li>
    <li><div class="menubreak"></div></li>
    <li><a href="#">Link 7</a></li>
    </ul>
    </div>

  3. #3
    Join Date
    Feb 2010
    Posts
    3
    oh, will do next time.... THANK YOU!!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles