CODEWITHSUNDEEP
htmlcssinternet-explorer
Nidheesh
Nidheesh

Reputation: 4562

Image width is not proper in IE

In my html the table which displays a red line. In Firefox I am getting the line correctly. But in IE the line has got its line height incremented.Showing in the images below.

<table width="100%" align="center" border="0" cellSpacing="0" cellPadding="0" summary="">
<tr>
<TD style="BACKGROUND-COLOR: red"><IMG alt="" src="myImage.gif" width=1 height=1>
</TD>
</tr>
</table>

In Firefox:

enter image description here

In IE: enter image description here

Why is this happening or how can I fix it.

Upvotes: 1

Views: 127

Answers (4)

Artem Shevtsov
Artem Shevtsov

Reputation: 516

I think that it's better to apply css style border-bottom: 1px solid to this row.

<table style="width: 100%; text-align: center;" cellSpacing="0" cellPadding="0">
    <tr>
        <td>some column</td>
    </tr>
    <tr>
        <td style="height: 1px; line-height: 1px; border-bottom: 1px solid red; background: transparent;"><!-- border --></td>
    </tr>
</table>

Live example: http://jsfiddle.net/6jVvQ/6/

Upvotes: 3

Itay Gal
Itay Gal

Reputation: 10824

I suggest a different solution. You don't have to use a table for this task. You may want to use div or hr

It's less code and easier: example

Tables considered deprecated (when styling your layout with them) and also you should avoid inline styling as much as you can. If you are using tables anyway try to style them like this:

<table class="clean-table">
...
</table>

And the CSS:

.clean-table{
    width: 100%;
    border-spacing: 0px;
    padding: 0px;
    margin: 0px;
    text-align: center;
}

Upvotes: 0

The Mechanic
The Mechanic

Reputation: 2329

Try this

<table width="100%" align="center" border="0" cellSpacing="0" cellPadding="0" summary="">
    <tr>
        <td  style="height:1px; line-height:1px; background-color: red">
            <img alt="" src="myImage.gif" width="1px" height="1px" />
        </td>
    </tr>
</table>

Upvotes: 0

George
George

Reputation: 36794

Add this styles to your table row:

<tr style="height:1px; font-size:1px; line-height:1px;">
    <TD style="BACKGROUND-COLOR: red"><IMG alt="" src="myImage.gif" width=1 height=1>
    </TD>
</tr>

That's not to encourage inline styles though. Use external stylesheets!

Check out this DEMO

Upvotes: 0

Related Questions