Question

The HTML code:

<ul>
    <a href='index.php'> 
        <li>
            <img src='images/icons/home.png' alt='' />
            <p>Home</p>
        </li> 
    </a>
</ul>

The CSS:

ul {

    height:100%;

    position: absolute;
    right: 0;
    text-align: left;
}

ul li {

    height: 100%;
    width:90px;
    float: left;
}

ul li p {
    margin-top: 4px;
    width: 100%;    
}


ul a li {
    display:block;
}

ul li img {
    margin-top: 8px;
    width: 43px;
    height: 43px;
}

(I’ve left all the properties here except the font stuff)

The problem:

In Internet Explorer only: the whole link (which is a square block with text and an image inside) functions normally as a link except for the part where the image is. In that part when clicked on the link does not work. It does, however, strangely, still, show the link in the status bar when you hover over any part, including the image.

Answer 1

You should provide a larger sample of your HTML, but I can already see that it’s invalid:

<a href='index.php'> 
    <li>
        ..
    </li> 
</a>

• You either have an a element as a direct child of a ul element which is invalid.
• Or, you don’t have a containing ul element, which is also invalid.
• It’s only valid to use an li element inside a ul or ol element (and a couple of other less common scenarios).

Valid HTML would look like this (assuming HTML5!):

<ul>
    <li>
        <a href="#">
            <img src='images/icons/home.png' alt='' />
            <p>Home</p>
        </a>
    </li>
</ul>

Once you use valid HTML, it should work in IE.

(But, you didn’t specify what version of IE, so I’m just guessing that it will.)