CODEWITHSUNDEEP
htmlcss
Tate83
Tate83

Reputation: 274

Fit image to table cell

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:

example

#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>

Upvotes: 1

Views: 5057

Answers (3)

Marc Audet
Marc Audet

Reputation: 46785

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/

Upvotes: 1

J.T.
J.T.

Reputation: 135

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

Upvotes: 1

fidel castro
fidel castro

Reputation: 1607

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;

Upvotes: 1

Related Questions