在Internet Explorer中填充背景图片

Question

I have a XHTML 1.0 Transitional web page with following main table:

<table>
<tr>
<!-- header -->
</tr>
<tr>
<td class="left"><!-- menu --></td>
<td class="content"><!-- content and header iamge --></td>
<td class="right"><!-- other stuff --></td>
</tr>
<tr>
<!-- footer -->
</tr>
</table>

The CSS looks like this:

#content {
    width:100%;

    vertical-align:top;
    background-color:white;

    /* desired padding of the content */
    padding-right:10px;
    padding-left:10px;
    padding-bottom:10px;

    background-image: url(bilder/pseudo-panorama3.jpg);
    background-repeat:no-repeat;
    background-position: center top;
    padding-top:213px; /* height of the picture + the desired 10px padding to the content */

}

The planned behavior is as follows:

In Firefox 31, the page shows up as expected:

In Internet Explorer 11, there is a space between the background image and the cell-border:

What can I do to remove this space? I already tried background-clip , but it didn't work.

The URL of the web page is here: http://www.thrs-heidelberg.de/v2/htdoc/

Answer 1

You should add this to your table tag..

<table border="0" cellpadding="0" cellspacing="0">...</table>

Give it a try and lets see if you have the same issue.

By default tables have a default value for cellpadding and cellspacing of 2, even if you dont specify this at all.

with css you can control the padding for each cell, but not the cellspacing.

Edit.

Also try this...

#content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    box-sizing: border-box;

    /* Put the rest of your css here for this class */
}

here is the issue...

you have a box with 100px in size (width) you add 10px in padding (left and right)

you should expect that the box its still 100px, but this is not the case on some browsers.

a total of 20px will be added to your original 100px, so your box will be 120px, this also happens if you add a border.

The way to fix this is to apply to the affected object the previous mentioned css, that will fix the box model issue.