Question: 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](https://i.stack.imgur.com/2Tvds.jpg)

In IE:
![enter image description here](https://i.stack.imgur.com/QRyt2.jpg)

Why is this happening or how can I fix it.

Answer: 
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/>
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](http://jsfiddle.net/6jVvQ/1/)

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;
}

```