Using jQuery Tabs script with an icon to remove the tab but this code renders differntly in IE8 and Firefox 3.6.2. The problem is that Firefox wraps the tab and puts "X" signs in new row, whicle IE correctly renders it in the same row (but not centered vertically as it should but rather in the top right corner - which is still better than Firefox behaviour).

I have spent the last hour trying to find out if the problems lies in CSS (both with Firebug and IE's Developer Toolbar) but there is nothing special in CSS, just the default jQuery Flick UI CSS.

<div id="tabgroup.<%= Model.Slug %>">
    <ul>
        <%
            foreach (ContentListItem tab in Model.Contains)
            {%>
        <li><a href="#tab\.<%=tab.Slug%>">
            <%=tab.Title%></a><% if (Context.User.IsInRole("Administrators"))
                        { %><span class="ui-icon ui-icon-close"><%=Resources.Localize.Routes_TabDelete %></span><% } %>
        </li>
        <%
            }%>
    </ul>
    <%
        foreach (ContentListItem tab in Model.Contains)
        {
            Html.RenderAction("Display", "Tab", new { slug = tab.Slug });
        }%>
</div>

Please disregard the stuff about ASP.NET MVC code...