Question

I’ve got the following code:

CSS

ul li {
    width: 100%;
    padding 0;
    margin 0;   
}
    ul.step li{
    list-style-image: url(TID05.png);
    background: #5E5E5E;
}

    ul.substep li{
    list-style-image: url(TID07.png);
background: #A6A6A6;
}

table{
table-layout: fixed; 
width: 100%;
}
td.bgImage{
    width:15px;
    background-repeat: no-repeat;
    background-image: url(TID09.png);
}

HTML

<ul class="step">
<li>1</li>
<ul class="substep">
    <li>1</li>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></tr></table>
    <li>2</li>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></tr></table>
    <li>3</li>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></tr></table>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></tr></table>
    <li>4</li>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></tr></table>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></tr></table>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></tr></table>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></tr></table>
    </ul>
</ul>

I want the same result on Internet Explorer as i have on Firefox. Can anybody help?
Is something wrong in my HTML code? or is there a bug in Internet Explorer?

Answer 1

You cant use any tags outside the li tag.

add span tag to make the numbers as heading and write the css accordingly.

HTML

<ul class="step">
    <li><span>1</span></li>
<ul class="substep">
    <li><span>1</span>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></tr></table></li>
</ul>

CSS

ul li {
        width: 100%;
        padding 0;
        margin 0;   
    }
        ul.step li{
        list-style-image: url(TID05.png);
        background: none;
    }
        ul.step li span{
        list-style-image: url(TID05.png);
        background: #5E5E5E; display:block
    }

        ul.substep li{
        list-style-image: url(TID07.png);
    background: none;
    }
       ul.substep li span{
        list-style-image: url(TID07.png);
    background: #A6A6A6; display:block
    }

    table{
    table-layout: fixed; 
    width: 100%;
    }
    td.bgImage{
        width:15px;
        background-repeat: no-repeat;
        background-image: url(TID09.png);
    }​

DEMO http://jsfiddle.net/WCqLh/2/

This give same result in IE 7+ and chrome