Question

I’m using FF8 on Linux Mint and I’ve created a navigation menu using list items. There seems to be extra anchors seems to be appearing at the end of my list items which is causing my css selector “.iconSelect ul li:last-child” to break for some reason!

If I remove the extra anchors via firebug, it works and the styling is applied.

My mark up

<div class="iconSelect">
    <ul>
        <li class="abc">
            <div>
                <a href="#"><img src="./img/user_32x32.png"><a/>
            </div>
            <div class="iconName">tes</div>
        </li>

        <li class="mid">
            <div>
                <a href="#"><img src="./img/buildings_32x32.png"><a/>
            </div>
            <div class="iconName">Organisationfsdfsd</div>
        </li>

        <li class="xyz">
            <div>
                <a href="#">
                    <img src="./img/anchor_32x32.png">
                    <a/>
            </div>
            <div class="iconName">Vessel</div>
        </lI>
    </ul>
</div>

Its definitely nothing in the styling or js thats causing this as I’ve removed them both and the extra anchors still appears.

Answer 1

Your closing anchors are wrong:

<a href="#"><img src="./img/buildings_32x32.png"><a/>
                                                  ^^---backwards

they should be </a>. You’ve essentially got TWO open tags, and NO closing tags. FF is being polite and auto-closing them for you in the viewer.