How to deactivate arrows in an accordion?

Question

I would like how to not display the arrows which every accordion header has as default. On older browser my arrows are far away from where they should be, as shown here:

I already tried a solution via CSS:

#accordion .ui-icon { display: none; }

On newer browser this setting works perfectly. But on older browser (e.g. IE 9) the whole accordion seems to be broke:

Did I do anything wrong or is there another way to disable those arrows?

(Using the latest jQuery and jQuery-UI builds.)

---

This is the HTML of the header i use:

<!-- Akkordion -->
<div id="accordion">
    <h3>Header</h3>
    <div>
    <form>
        Text
        <table style="width:100%;">
            <tr>
                <td style="width:50%"><b>Text:</b></td>
                <td style="width:50%" colspan="2">Text</td>
            </tr>
            <tr>
                <td style="width:50%"><b>Text:</b></td>
                <td style="width:50%" colspan="2">Text</td>
            </tr>
            <tr>
                <td style="width:50%"><b>Text:</b></td>
                <td style="width:50%" colspan="2">Text</td>
            </tr>
            <tr>
                <td style="width:50%"><b>Text:</b></td>
                <td style="width:50%" colspan="2">Text</td>
            </tr>
            <tr>
                <td style="width:50%"><b>Text:<b></td>
                <td style="width:10%">
                    <!-- input for a jQuery-slider -->
                    <input type="text" id="anzteil" name="anzteilnehmer" readonly style="border:0; color:#f6931f; font-weight:bold;width:20px;font-align:right;">
                </td>
                <td style="width:40%;">
                    <!-- div for a jQuery slider -->
                    <div id="slider-anzteil"></div>
                </td>
            </tr>
        </table>

        <div style="text-align:right;width:100%;margin-top:20px;"><input type="submit" value="Weiter >"></div>

        <script>
         $(function() {
            $( "#slider-anzteil" ).slider({
                range: "min",
                value: 1,
                min: 1,
                max: 4,
                width: 20,
                slide: function( event, ui ) {
                    $( "#anzteil" ).val( "" + ui.value );
                }
            });
            $( "#anzteil" ).val( "" + $( "#slider-anzteil" ).slider( "value" ) );
        });
        </script>

    </form>
    </div>

    <h3>Header</h3>
    <div>
        <form>
        <div id="radio" style="font-size:14px;">
            <table cellspacing="20">
                <tr>
                    <td style="vertical-align: top;"><input type="radio" id="radio1" name="programm" value="1" <% IF pro = 1 THEN Response.Write "checked" END IF %> /></td>
                    <td><label for="radio1">Text</td>
                </tr>
                <tr>
                    <td style="vertical-align: top;"><input type="radio" id="radio3" name="programm" value="3" <% IF pro = 3 THEN Response.Write "checked" END IF %> /></td>
                    <td><label for="radio3">Text</td>
                </tr>
                <tr>
                    <td style="vertical-align: top;"><input type="radio" id="radio2" name="programm" value="2" <% IF pro = 2 THEN Response.Write "checked" END IF %> /></td>
                    <td><label for="radio2">Text</td>
                </tr>
                <tr>
                    <td style="vertical-align: top;"><input type="radio" id="radio4" name="programm" value="4" <% IF pro = 4 THEN Response.Write "checked" END IF %> /></td>
                    <td><label for="radio4">Text</td>
                </tr>
            </table>

            <div style="text-align:right;width:100%;margin-top:20px;"><input type="submit" value="Weiter >"></div>
        </div>
        </form>

    </div>

    <h3>Header</h3>
    <div>
    <form>
        <div class="ui-widget">
            <div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;">
                <p>
                    <span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
                    Text
                </p>
            </div>
        </div>

        <br>

        <table style="width:460px;">
            <tr>
                <td><b>#</b></td>
                <td><b>Text</b></td>
                <td><b>Text</b></td>
                <td><b>Text</b></td>
            </tr>
            <tr>
                <td>1</td>
                <td>Text</td>
                <td>Text</td>
                <td align="center">Text</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Text</td>
                <td>Text</td>
                <td align="center">Text</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Text</td>
                <td>Text</td>
                <td align="center">Text</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Text</td>
                <td>Text</td>
                <td align="center">Text</td>
            </tr>
        </table>

        <div style="text-align:right;width:100%;margin-top:20px;"><input type="submit" value="Weiter >"></div>
    </form>
    </div>

    <h3>Header</h3>
    <div>
    <form>
        <p>
            Text
        </p>

        <table style="width:100%;">
            <tr>
                <td style="vertical-align: top;">Text</td>
                <td style="vertical-align: top;">Text</td>
            </tr>
            <tr>
                <td style="vertical-align: top;">Text</td>
                <td style="vertical-align: top;">Text</td>
            </tr>
            <tr>
                <td style="vertical-align: top;">Text</td>
                <td style="vertical-align: top;">Text</td>
            </tr>
            <tr>
                <td style="vertical-align: top;">Text</td>
                <td style="vertical-align: top;">Text</td>
            </tr>
            <tr>
                <td style="vertical-align: top;">Text</td>
                <td style="vertical-align: top;">Text</td>
            </tr>
        </table>

        <div style="text-align:right;width:100%;margin-top:20px;"><input type="submit" value="Weiter >"></div>
    </form> 
    </div>

    <h3>Header</h3>
    <div>
    Text<br>
    <br>
    Text
    </div>

</div>

(Important text passages have been changed to "Text", but no HTML has been harmed.)

I use the standard CSS, Redmond style.

Initializing the accordion:

$( "#accordion" ).accordion({ collapsible: true, active: false, heightStyle: "content" });

Answer 1

This should do it:

JSFiddle: DEMO

.ui-accordion-header-icon {
    display: none;
}

I tested it in IE9.