Home/ Questions/Q 931099
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T20:26:48+00:00

tab not showing in IE 6, working fine in others http://jsbin.com/ehege/2 how to solve?

  • 0

tab not showing in IE 6, working fine in others

http://jsbin.com/ehege/2

how to solve?

 <style type="text/css">
        *
        {
          margin:0;
          padding:0;
        }

        li
        {
     list-style:none;
        }

        a
        {
          text-decoration:none;
          font-size:14px;
        }

        #tabcontainer
        {
          height:62px;
          position:relative;
          margin: 2em;
          font-size: 12px;
        }

        #tabitemscontainer1 > li > a 
        {
          -moz-border-radius:   7px 7px 0 0;
          background: #F3F8C6;
          float:                left;
          margin-right:         2px;
          padding:              5px 10px;
          border:               1px solid #EABF4A;
         /* Added this */
         position: relative;
         top: 0;
         /* end */
        }

        #tabcontainer ul li li.selected a,#tabitemscontainer1 > li.selected > a
        {
          color:#AE4329;
          font-weight:700;
        }

        #tabitemscontainer1 > li.selected
        {
          border-bottom: 1px solid #F3F8C6;
        }

        #tabitemscontainer1 > li.selected > a
        {
        /* Added this */
        position: relative;
        top: 0px;
        z-index: 1;
        border-bottom: 0px;
        /* end */
        }

        ul.level2
        {
          background: #F3F8C6;
          border:1px solid #EABF4A;
          left:0;
          position:absolute;
          top:28px;
          width:463px;
          padding:6px;
          z-index: 0;
        }
   #tabcontainer ul li {float:left}
        #tabcontainer ul li li
        {
          float:left;
          padding:0 15px 0 4px;
        }
</style>

</head>

<body>

    <div class="tabcontainer" id="tabcontainer">
        <ul id="tabitemscontainer1">
          <li class="selected" >
                <a href="#">item 1</a>

                <ul class="level2">
                    <li><a href="#">sub item 1</a></li>

                    <li><a href="#">subitem 2</a></li>

                </ul>
            </li>

            <li><a href="#">item2</a></li>
        </ul>
    </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First of all, IE6 doesn’t support the > selector at all.

    Secondly, there is no reason to make the a inside the li float to the left. To be able to put padding and margin on the a make it display: inline-block.

    Try changing that and remove other unnecessary rules (such as position, which should not be needed on a either) and see if that helps.

    • 0