Question

Menu Tabs do not function correctly in only Internet Explorer 8Menu Tabs do not function correctly in only Internet Explorer 8The tab in the link Above on my HTML webpage do not work in IE8. They do work in IE9, safari, Firefox, opera ect.

The problem in IE is that when a tab is clicked it does not open.

HTML:

div id="tab2" class="css-tabs">
        <ul class="noint11_menu">
            <li id="item-1"> <a href="#item-1">Shipping</a>
                <div>
                    <p><img id="shippingtable" src="http://www.ubreakirepair.com/ebaysite/images/shippingtable.png"/></p>
                    <div class="footer">----------</div>
                </div>
            </li>
            <li id="item-2"> <a href="#item-2">Payment</a>
                <div>
                    <p>Tab Content 2</p>
                     <div class="footer">---------</div>
                </div>                
            </li>
            <li id="item-3"> <a href="#item-3">Returns</a>
                <div id="notice">
                    <p>content </p>
                    <div class="footer">---------</div>
                </div>
            </li>
            <li id="item-4" title="click for Tab 4"> <a href="#item-4">Tab 4</a>
                <div>
                    <p>Tab Content 4</p>
                    <div class="footer">------------</div>
                </div>
            </li>
        </ul>
    </div></td>

CSS:

.css-tabs {
    position: relative;
    text-align: left; /* This is only if you want the tab items at the center */
    height: auto;
    margin-left:-30px;
    display: 
}
.css-tabs ul.noint11_menu {
    list-style-type: none;
    display: inline-block; /* Change this to block or inline for non-center alignment */
}
.css-tabs ul.noint11_menu > li {
    display: block;
    float: left;
}
.css-tabs ul.noint11_menu li > a {
    color: #EEEEEE;
    text-shadow: 1px 1px 1px #000;
    font-family: 'MuliLight', Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    display: block;
    text-align: center;
    border: 1px solid #002232;
    padding: 5px 10px 5px 10px;
    margin-right: 10px;
    -moz-user-select: none;
    cursor: pointer;
    background: #014464;

}
.css-tabs ul.noint11_menu li > div {
    display: none;
    position: absolute;
    width: 100%;
    left: 0;
    color: #ccc;
    text-align: left;
    padding: 0;
    margin-left: 32px;
    background: #181818 /* added this */;
    height:350px

}
.css-tabs ul.noint11_menu li > div > p {
    border: transparent;
    padding: 10px;
    margin: 0;
}
.css-tabs ul.noint11_menu li > a:focus {
    border-bottom: 1px solid #fff;
}
.css-tabs ul.noint11_menu li:target > a {
    cursor: default;
    border-bottom: 1px solid #fff;
}
.css-tabs ul.noint11_menu li:target > div {
    display: block;
}
#item-1 div {display: block}
#item-2 div { height:535px}
#item-3 div { height:535px}
#item-4 div { height:535px}



.footer{color:#fff; text-align:center}​

Answer 1

IE8 does not support :target, which is what you are relying on to show those tabs.

I believe your best alternative would be to separate the tab content into different pages, and use a set of links at the top for navigation. Your nav links can be styled to look like tabs, so the site can still look the same – you’d just have a page load after clicking each tab.

That alternative would also be less confusing even for users with modern browsers, since their back and forward buttons will behave in a predictable way while they’re browsing the site.

:target is better used for highlighting which in-page anchor the user has jumped to after clicking a section link. Using it to fake a tab control where large chunks of primary content in the page are hidden does not seem very accessible or user friendly.