ansaurus

Question

IE Bug - gap in table cell on text wrapping

Answer 1

A:

You have to remove any caracter as white space or line break between your image and your <td> tag, or set font-size:0; for it.

IE (even IE9) likes to render any caracter in inline content...

MatTheCat 2010-10-25 10:17:06

this didn't help either

adomak 2010-10-25 11:11:08

Answer 2

A:

I replaced all those silly style attributes with real CSS rules (and also changed them a bit) and now it works in my IE (IE9 beta):

<!DOCTYPE html>

 <html> 
  <head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <title> 
      Newsletter
    </title> 
  </head> 
  <body> 
    <style type="text/css" media="screen"> 
        body { padding:20px; }
        table { border: 3px solid green; border-spacing:0; margin-bottom:20px; }
        td { border: 1px solid red; padding:0; width:300px; }
        td img { display:block; }
    </style> 

    <table> 
        <tr> 
            <td colspan="2">text is wrapping text is wrapping text is wrapping text is wrapping text is wrapping text is wrapping text is wrapping text is wrapping text is wrapping text is wrapping text is wrapping </td> 
        </tr> 
        <tr> 
            <td><img src="http://dummyimage.com/300x50/000/fff"&gt;&lt;/td&gt; 
            <td><-- big gap in IE(6-8). bad!!</td>                      
        </tr>           
    </table> 

    <table> 
        <tr> 
            <td colspan="2">not wrapping text</td> 
        </tr> 
        <tr> 
            <td><img src="http://dummyimage.com/300x50/000/fff"&gt;&lt;/td&gt; 
            <td>good</td>                       
        </tr>           
    </table> 

  </body> 
</html>

Šime Vidas 2010-10-25 10:32:23

this didn't help.. (updated example)

adomak 2010-10-25 11:10:10

@adomak Why were you using `style` attributes anyway? They are just bad practice...

Šime Vidas 2010-10-25 11:28:40

It's for an email template. Anyways, thanks

adomak 2010-10-25 11:54:29

@adomak Do email templates require using `style` attributes instead of placing the CSS inside the `<style>` element in the HEAD of the template?

Šime Vidas 2010-10-25 12:13:04

I really dont know. This is first time I'm writing HTML for email. I thought inline style is best practice..

adomak 2010-10-25 12:27:57

@adomak I just addressed that issue in this question http://stackoverflow.com/questions/4014600/do-html-email-templates-require-the-use-of-the-style-attribute

Šime Vidas 2010-10-25 12:41:04

ansaurus

tags:

views:

answers:

IE Bug - gap in table cell on text wrapping

related questions