Question

I have an issue where Internet Explorer is generating an additional br element that is not in my source. The additional br effects the page’s layout and is visible when using the developer tool. I’ve tried removing all hard returns between the surrounding elements but the additional br persists. Firefox and Chrome do not have this issue. Ideas on what I can do to fix the issue?

Instead of

First line.
Second line.

I get

First line

Second line.

Code Example

    <asp:ImageButton ID="RemoveItem" AlternateText="Remove Item" 
        ImageUrl="~/img/buttons/remove.png" runat="server" CssClass="remove"
        CommandName="Remove" OnCommand="RemoveCartItem_Command" />
    <br runat="server" id="TotalBreak" />
    <span class="fieldlabel">Total</span>

And what I end up with (… used to show I’ve shortened rendered ids)

<input id="...RemoveItem" class="remove" alt="Remove Item"
       src="img/buttons/remove.png" type=image name="...RemoveItem" />
<br id="...TotalBreak"/>
<br/>
<span class="fieldlabel">Total</span>

Answer 1

It’s probably due to line-height or another default in the browser’s default style sheet. Like buyckbova said, you should use a CSS reset. Try Eric Meyer’s, it’s thorough: http://meyerweb.com/eric/tools/css/reset/