Problem with the layout in IE

I m trying to create an email template and having problem with the layout in Internet Explorer The footer section looks same in Chrome and Mozilla however the footer leaves a margin(white space) at the bottom in IE9 and IE10 and in IE7 it gets messed up.


Here is the code that I m using

jsfiddle.net/sayedtaqui/th85v

What do I do to fix this?

 

Your outer wrapper is conflicting with the footer and you have fixed widths/heights in pixels which is a no-go. Use min/max widths/heights.

 

Hey Scott thanks, you solved half of the problem , but there is still a differece in the bottom-border height in {IE9, IE10} and {chrome, mozilla}though I used min-height and min-width as you said and now IE7 and IE8 problem is solved. please check the updated code here jsfiddle.net/sayedtaqui/th85v
I tried to make changes in the height of footer but no luck.

 

I'm still not exactly clear on your problem, so if you're trying to get rid of the grey bit use this:

    <style>
    
    body{margin:0px;
                    padding:0px;}
    
 div.main{  
                    background:#dedddd ;
                    }

div.wrapper_border{

                        width:540px;
                        min-height:470px;
                        border:1px solid blue;
                        margin:0 auto;
                        background:blue;
                        
                        }
                        
div.inner_content{ 
                        width:500px;
                        border:1px solid blue;
                        margin:20px;
                        background:#fff;
                        
                        }
                        
                        
                        
                        div.email_header{
                                            border-bottom:1px solid #ccc;
                                            height:80px;
        }
        
        
        
        div.main_content p{
                                            margin-left:37px;
                                            margin-right:37px;
                                            font-family: Arial;
                                            font-size:12.47px;
        }
        
        div.icon_box{
                                         height: 100px;
                                    }
      
    </style>

HTML:

 

new menber ,have a test

 

It sounds like a combination of the box model bug (http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug) and a transitional doctype.