Fit image to table cell - html

Question

I read trough a lot of the posts here but those solutions don't seem to work for me.
I have a problem with the row because it should fit the image without those white spacings ont top:
#popuptable table, th, td, tr
table.popuptable {
border-width: 1px;
border-spacing: 2px;
border-style: outset;
border-color: #2778AF !important;
border-collapse: collapse;
background-color: white;
}
table.popuptable th {
margin-left: 20px !important;
border-width: 0px;
padding: 2px;
border-style: ;
border-color: #2778AF !important;
background-color: white;
-moz-border-radius: ;
}
table.popuptable td {
border-width: 0px;
padding: 2px;
border-style: ;
border-color: #2778AF !important;
background-color: white;
-moz-border-radius: ;
}
table.popuptable tr {
border-width: 0px;
padding: 2px;
border-style: ;
border-color: #2778AF !important;
background-color: white;
-moz-border-radius: ;
}
Where is my problem? I tried all combinations of height I could think of..
Update Html for the popup:
<div id="hidden-BE" style="display:none;" class="popuptable">
<table border="0" width="400">
<tbody><tr>
<th colspan="2"> Kanton BE </th>
</tr>
<tr>
<td width="125px"><img src="http://www.personnes-histoirerurale.ch/pimages/ch/be.gif" width="125"></td>
<td valign="top">
<b>Auswahl (Total: 4)</b><br>
<ul>
<li>Laur, Ernst Ferdinand (1871-1964)</li>
<li>Landis, Jakob (1926-)</li>
<li>Lampert, Octave</li>
<li>Laur-Schaffner, Sophie (1875-1960)</li>
</ul>
</td>
</tr>
</tbody></table>
</div>

Answer 1

Here is one way of adjusting the layout to get a good image fit.
For the HTML, add valign="top" to the table cell holding the image:
<table border="0" width="400" class="popuptable">
<tbody>
<tr>
<th colspan="2">Kanton BE</th>
</tr>
<tr>
<td width="125px" valign="top">
<img src="http://www.personnes-histoirerurale.ch/pimages/ch/be.gif" width="125">
</td>
<td valign="top">
<b>Auswahl (Total: 4)</b>
<br>
<ul>
<li>Laur, Ernst Ferdinand (1871-1964)</li>
<li>Landis, Jakob (1926-)</li>
<li>Lampert, Octave</li>
<li>Laur-Schaffner, Sophie (1875-1960)</li>
</ul>
</td>
</tr>
</tbody>
</table>
For the CSS, make the following modifications:
table.popuptable td {
border-width: 1px;
padding: 0px; /* adds spacing above image, so remove... */
border-style: solid;
border-color: #2778AF !important;
background-color: white;
-moz-border-radius: ;
}
table.popuptable img {
display: block;
}
table.popuptable ul {
border: 1px dashed red;
margin: 0 ;
}
Use display: block on the img to get rid of the extra space below the baseline that gets inserted with inline elements.
You also have 2px padding in the table cells, which you may want to remove or keep as needed.
Finally, the default margins on the ul may cause the height of the text block to be higher than the image, so adjust those as necessary.
See fiddle: http://jsfiddle.net/audetwebdesign/HqQWY/

Answer 2

use the set of properties to make the image fit
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Answer 3

Ditch the tables, do the pop-up with divs, set the image as background image for the div:
<div class="flag"></div>
And set background-size: cover;
http://www.w3schools.com/cssref/css3_pr_background-size.asp