What's the correct syntax for replacing HTML elements with an <!--[if IE 7]> statement?

Question

Hi, I need to have a slightly different HTML element in IE7 than the rest, here is what I have so far:

<p>
        <label>&nbsp;</label>

        <!--[if IE 7]>
        <span class="progressIndicator" style="display: none;"></span>
        <button type="submit" class="submit" value="" id="qsubmit">SEND</button>
            <![endif]--> 

            <span class="progressIndicator" style="display: none;"></span>
        <button type="submit" class="submit" value="" id="qsubmit">&nbsp;</button>

    </p>

But this just displays the button twice, one with the correct value, and one that doesn't work as desired.

What's the correct way to replace this HTML element for IE7 only?

I would prefer not to browser sniff.

Thanks :)

Answer 1

Like this:

    <!--[if IE 7]>
    <span class="progressIndicator" style="display: none;"></span>
    <button type="submit" class="submit" value="" id="qsubmit">SEND</button>
    <![endif]--> 



    <!--[if !(IE 7)]><!-->
    <span class="progressIndicator" style="display: none;"></span>
    <button type="submit" class="submit" value="" id="qsubmit">&nbsp;</button>

    <!--<![endif]--> 

Answer 2

Put the non-IE7 content in a downlevel-revealed conditional comment (though note the syntax MS use in that article is unnecessarily-invalid HTML). Simplified from the seemingly-redundant markup in the question:

<p>
    <label>&nbsp;</label>
    <span class="progressIndicator" style="display: none;"></span>
    <button type="submit" class="submit" value="" id="qsubmit">
        <!--[if lt IE 8]>
            SEND
        <![endif]--> 
        <!--[if gte IE 8]><!-->
            &nbsp;
        <!--<![endif]-->
    </button>
</p>