CODEWITHSUNDEEP
htmlcss
Adam Evans
Adam Evans

Reputation: 2082

HTML shrink td to fit image size

I am laying out a website with a table, and the logo goes in the top row of the table. The logo is a mostly transparent image with a green background, and it is in a table with a red background. However, the table cell is not shrinking to fit the image vertically and so it is showing some of the background red below the image when I don't want it to. I have tried setting the margin and padding all to 0, setting cell-spacing and cell-padding to 0, and removing borders, but none of it has worked.

My browser's page inspector tool shows that the td element is responsible for extending the height of the cell, not the tr or table

What am I missing? I feel like it is something really simple.

HTML:

<!DOCTYPE html>
 <html>
 <head>
  <link rel="stylesheet" href="styles2.css" />
 </head>
 <body>
  <div id="wrapper">
    <table id="layoutTable" >
      <tr>
        <td class="layoutTabletd">
          <img id="logoImage" src="res/logobar2.png"/>
        </td>
      </tr>
    </table>
  </div>
 </body>
 </html>

CSS:

#wrapper
{
  width:              1000px;
  margin-left:        auto;
  margin-right:       auto;
}
#layoutTable
{
  background-color:   #FF0000;
  margin:             0px;
  padding:            0px;
  border-collapse:    collapse;
}
#layoutTable tr td.layoutTabletd
{
  border:             1px solid black;
  padding:            0px;
  margin:             0px;
}
#logoImage
{
  background-color:   #00FF00;
  margin-left:        auto;
  margin-right:       auto;
  margin-top:         0px;
  margin-bottom:      0px;
  padding:            0px;
}

Result: result

Upvotes: 3

Views: 936

Answers (1)

fnune
fnune

Reputation: 5494

Solved: http://jsfiddle.net/r0801v5v/

#layoutTable
{
  line-height:0;
  background-color:   #FF0000;
  margin:             0px;
  padding:            0px;
  border-collapse:    collapse;
}

Notice the added line-height:0; - I am not exactly sure why this happens but I've seen it before. Hope I helped.

Upvotes: 4

Related Questions