CAJE February 2016

Cell padding affected by contained ASP NET image

I have an ASP net image contained within an HTML table cell, but for some reason there seems to be extra padding at the bottom of the cell.

enter image description here

I have tried a number of things, with no luck:

  • Removing CSS padding.
  • Removing the right hand "Logged in" cell to check it isn't influencing it the other cell.
  • Adjusting the size of the source image. The padding stays 3px high.

            <td style="width:200px; vertical-align:top;">
            <table class="customTable" style="width:100%; table-layout: fixed">
                <tr style=" padding:0px;">
                    <td style="width:48px; padding:0px;">
                        <asp:Image ID="imgUser" runat="server" ImageUrl="~/Media/user_anon.png" CssClass="userImage" />
                    </td>
                    <td class="customCell">
                        <asp:Label ID="lblUser" runat="server" Text="Label">Logged in</asp:Label>
                        <asp:Image ID="image1" runat="server" ImageUrl="~/Media/dropdown.png" />
                    </td>
                </tr>
            </table>
        </td>
    

CSS:

.customTable {
font-size:smaller;
text-align:center;
border-collapse: collapse; 
}

.userImage {
    margin:0px;
}

Answers


jiff February 2016

Well I think found your problem and made two fiddle for test, look first example:

JSFiddle

It's exactly like your problem, right?

now look this one:

JSFiddle

You need to set display: block for img

#imgUser {
    width: 100%;
    display: block;
    margin: 0;
}

Post Status

Asked in February 2016
Viewed 1,778 times
Voted 14
Answered 1 times

Search




Leave an answer