Problem styling unordered list

HTML & CSS
1

Hello,

I’m having trouble styling a unordered list to look like a set of tabs. My css works on most contemporary browsers but unfortunately I need it work in IE6 (dun dun DUN!). I’ll spare you the lengthy reasons behind this requirement but I assure you that there’s no way around this and that it’s completely out of my control.

Here’s the code : http://jsfiddle.net/TELK7/506/

I’ve been using Netrenderer to check IE6 compatibility (no way I’m going through the hassle of setting up a VM today!). Note that this only works well with links to JSBin previews but for some reason the messageboard won’t let me post a link to my code on JSBin (dizebobice).

If any more experienced css’ers out there have any ideas they would be most welcome!

Many Thanks,

WS

2

First issues RIGHT off the bat

display:inline-block only works on elements that were display:inline by default. To make it work for display:block elements like LIs, you need to set them to display:inline and make sure they have hasLayout (like a width or something.)
Secondly, > does not work in IE6. It does not support that. So find an alternative. All those rules will not be used. That’s your main issue.

To target IE6 specificially, you can use IE conditional comments, since they work in IE6, OR you can use the star HTML hack. Like so

* html #element { /*IE6 only*/}
1 Like
3

Thanks. I’ll look into that.

WB

4

My condolences on your pain. Personally, if I had a client demanding IE 6 support, I’d write it on IE 6 first, then add tweaks to correct the layout on other browsers (which is easier than the other way around). I would not make any attempt to use the newer features of those browsers.

5

As already mentioned above you need changes like this:

<!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>Untitled Document</title>
<style type="text/css">
.tabrow {
    padding: 0;
    border-bottom: 1px solid #999;
}
.tabrow  ul {
    margin: 0;
    padding: 0;
  list-style: none;
  width: 100%;
 height: 32px;
 font-size:0;/* kill whitesspace gap when using inline-block*/
}
.tabrow  ul  li {
    display: inline-block;
    *display:inline;/* ie6/7 inline block hack */
    *zoom:1.0;/* ie6/7 inline block hack */
    font-size:16px;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 31px;
    line-height: 31px;
    border: 0 solid #999;
    border-width: 1px 1px 1px 0;
    overflow: hidden;
    position: relative;
    background: #f0f0f0;
}
.tabrow  ul  li.first {
    border-width: 1px;
}
.tabrow  ul  li  span {
    text-decoration: none;
    color: #000;
    display: block;
    padding: 0 6px;
    border: 1px solid #fff;
    outline: none;
}

</style>
</head>

<body>
<div style="padding: 10px;">
        <div class="tabrow">
                <ul>
                        <li class="first"><span>one</span></li>
                        <li><span>two</span></li>
                        <li class="last"><span>three</span></li>
                </ul>
        </div>
</div>
</body>
</html>
1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.