How can I get Internet explorer to display this image correctly

96 Views Asked by At

I am trying to get internet explorer to display an image in a table cell correctly. The image will display perfectly fine in chrome, but internet explorer keeps inserting white space above the image. Is there anything else that I can add which will prevent internet explorer from incorrectly displaying the image/table cell? I am trying to get the image to fill up the cell without any white space being the sides of it.

Code that I am using:

<p>&#160;</p>
<table cellspacing="0" cellpadding="0" style="width: 100%; height: 232px;">
   <tbody>
      <tr>
         <td class="ms-rteTable-default" style="width: 292px;">​​</td>
         <td class="ms-rteTable-default" style="width: 33.33%;">​</td>
         <td class="ms-rteTable-default" style="width: 33.33%;">​</td>
      </tr>
      <tr>
         <td class="ms-rteTable-default" style="width: 292px; height: 186px;">​<img src="/Test%20Pics%20Library/map_gif.gif" alt="" style="width: 100%; height: 100%; margin-right: auto; margin-left: auto; vertical-align: top;"/> </td>
         <td class="ms-rteTable-default" style="width: 33.33%;">​</td>
         <td class="ms-rteTable-default" style="width: 33.33%;">​</td>
      </tr>
   </tbody>
</table>
<p>​</p> 
<br/> 
<br/>
<br/> 
<br/>

Internet explorer view:

enter image description here

Chrome view:

enter image description here

2

There are 2 best solutions below

1
On BEST ANSWER

i think you copied this code from somewhere.... there is some special character between <td></td> if you write the code again space will not come or copy this code

<p>&#160;</p>
<table cellspacing="0" cellpadding="0" style="width: 100%; height: 232px;" >
   <tbody>
      <tr>
      <td class="ms-rteTable-default" style="width:292px;"></td>
         <td class="ms-rteTable-default" style="width:33.33%;"></td>
         <td class="ms-rteTable-default" style="width:33.33%;"></td>

      </tr>
      <tr><td class="ms-rteTable-default" style="width:292px;height: 186px;"><img src="SVoice_im.jpeg" alt="" style="width: 100%; height: 100%; margin-right: auto; margin-left: auto; vertical-align: top;"></td></td>
      <td class="ms-rteTable-default" style="width:33.33%;"></td>
         <td class="ms-rteTable-default" style="width:33.33%;"></td>
      </tr>
   </tbody>
</table>
<p></p>
<br/> 
<br/>
<br/> 
<br/>
0
On
<p>&#160;</p>
<table cellspacing="0" cellpadding="0" style="width: 100%; height: 232px;">
   <tbody>
      <tr>
         <td class="ms-rteTable-default" style="width: 292px;">​​</td>
         <td class="ms-rteTable-default" style="width: 33.33%;">​</td>
         <td class="ms-rteTable-default" style="width: 33.33%;">​</td>
      </tr>
      <tr>
         <td class="ms-rteTable-default" style="width: 292px; height: 186px; vertical-align: top; position: relative;">​<img src="/Test%20Pics%20Library/map_gif.gif" alt="" style="width: 100%; height: 100%; margin-right: auto; margin-left: auto; display: block;"/></td>
         <td class="ms-rteTable-default" style="width: 33.33%;">​</td>
         <td class="ms-rteTable-default" style="width: 33.33%;">​</td>
      </tr>
   </tbody>
</table>
<p>​</p> 
<br/> 
<br/>
<br/> 
<br/>

Did you try this?