white space around linked images in sliced html page in IE

Question

i have come across this before but cant remember how to fix it- internet explorer is adding in extra white space around images- i think its because these images are linked- and that is throwing off the whole visuals

i have tried
1. minifying it to remove all white space in the html
2. changing the html head to transitional

any ideas?

i cant remember how i done it before- i tried changing the margin of the table as wel but no luck

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="en"
    lang="en"
    dir="ltr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{
    font: 13px/1.231 arial,helvetica,clean,sans-serif;
    background-color:#999;
    text-align:center;
    padding:0px;
    margin:0px;
}

#header{
    height:87px;
    width:960px;
    background:url('<?=base_url()?>imgs/templates/dealerdotcom/site-header-interior.jpg');


}

#wrapper{
    width:960px;
    margin:auto;
    text-align:left;
    background-color:#fff;
}

#footer{
    background: url("<?=base_url()?>imgs/templates/dealerdotcom/bg-header.png") repeat-x scroll 0 0 #080808;
    width:960px;
    min-height:75px;
}

#main{
    height:600px;
}
.blurb{
    padding-top:25px;   
}


.email_class {
    border:1px solid #CCCCCC;
    width:200px;
    margin-bottom:20px;
    height:150px;
    /*float:left;*/
    text-align:center;

}

.login_button{
    padding-top:50px;
    margin:auto;
    text-align:center;
}

.options{
    text-align:center;
    width:500px;
    margin:auto;

}

.connect_box{
    width:900px;
    margin-left:auto;
    margin-right:auto;

    border:1px solid #CCCCCC;

    min-height:400px;
    padding:15px;
    font-size:11px;
    text-align: center;
}
table{
    margin: 0px;
    *margin: 0 0 0 -2;
}
</style>
 <link href="<?=base_url()?>/styles/gallerycss-cssbutton.css" type="text/css" rel="stylesheet" />
<script src="http://yui.yahooapis.com/3.4.0/build/yui/yui-min.js"></script>
</head>

<body>

<div id="wrapper">
    <div id="header">
        <img style="margin:15px;" src="<?=base_url()?>imgs/templates/dealerdotcom/ddc-logo.png"/>
    </div>
    <div id="main"> 
        <table style="margin:0px;" id="Table_01" width="957" height="598" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="6">
                <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_01.png" width="957" height="227" alt=""/>
            </td>
        </tr>
        <tr>
            <td rowspan="3">
                <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_02.png" width="228" height="371" alt=""/>
            </td>
            <td colspan="5">
                <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_03.png" width="729" height="29" alt=""/>
            </td>
        </tr>
        <tr>
            <td rowspan="2">
                <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_04.png" width="33" height="342" alt=""/>
            </td><td width="239" height="236">
            <? if($setting['use_fb']){ ?>
                <a href="<?= $loginUrl; ?>"><img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_05.png" width="237" height="234" alt=""/></a>
            <?}?>
            </td>
            <td rowspan="2">
                <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_06.png" width="80" height="342" alt=""/>
            </td>
            <td width="239" height="236"><? if($setting['use_twitter']){?><a href="<?=base_url()?>social/pre_network_select/twitter">
                    <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_07.png" width="228" height="234" alt=""/>
            </a>
            </td>
            <?}?>           
            <td rowspan="2">
                <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_08.png" width="147" height="342" alt=""/>
            </td>
        </tr>
        <tr>
            <td>
                <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_09.png" width="239" height="106" alt=""/>
            </td>
            <td>
                <img border="0" src="<?=base_url()?>imgs/templates/dealerdotcom/images/site_10.png" width="230" height="106" alt=""/>
            </td>
        </tr>
        </table>

    </body>
    </html>

you can see in the ladies dress the issue-

enter image description here

Live link please or reproduce in [JSFiddle](http://jsfiddle.net). Also include generated HTML for the page, not the PHP document. On another note, before anyone else says it...you shouldn't be using tables for layout . — My Head Hurts, Jan 27 '12 at 16:03

score 1 · Answer 1 · edited May 23 '17 at 12:01

1

Adding this should sort it out:

img {
    vertical-align: top;
}

More information here.

edited May 23 '17 at 12:01

Community

1
1

answered Jan 27 '12 at 16:06

thirtydot

224,678
48
389
349

score 0 · Answer 2 · answered Jan 27 '12 at 16:09

0

It's been a while, but I used to set the border attribute of the image tag to 0 to correct a similar problem. (Sometimes I would actually wind up with a colored border around the image - only in IE!)

<img src='myimage.gif' border='0' />

answered Jan 27 '12 at 16:09

Tim

4,051
10
36
60

white space around linked images in sliced html page in IE

2 Answers2