CSS Layout differences in IE vs Any other browser

HTML & CSS
1

I’m going berzerk fast! There are always challenges between IE and all other browsers but this simple one is driving me batty.

I am finishing up my eNewsletter software and the hardest, longest challenge is design elements.

I’ve attached two images, same code, same page, between IE8 and Chrome. Safari, Firefox, Opera, etc all look the same as Chrome.

Here is my CSS Code that drives the <ul> lists and then following that is HTML.

As you can see by the attachments, the RIGHT edge of the content boxes that have a blue header strip line up evenly with the header in Chrome. In IE, they are two pixels too short. If I increase the width on that item they line up in IE but extend two pixels too far in Chrome.

This is maddenly stupid!! Can anyone inspect my feable css and tell me what I should do?

Thanks!

CSS:


#page-list { margin:0; padding:0; list-style:none; }
#page-list li { margin:0; padding:0; width:898px; display:list-item; }
#page-list .first { background:url('../images/page-list-top.png') no-repeat; height:30px; width:900px; }
#page-list .middle-only { background-color:#CCCCCC; border:1px solid #999999; border-top:none; display:table-cell; }
#page-list .last { background:url('../images/page-list-last.png') no-repeat; height:30px;}
#page-list .list-header { color:#ffffff; font-weight:bold; margin:0; padding:5px 0px 0px 10px; }
#page-list .list-text { padding:5px 0px 0px 10px; margin:0; }

HTML:


<div id="template" >
    <ul id="page-list">
    	<li class="first">
            <div><p class="list-header">Active Newsletter Queue</p></div></li>
        <li class="middle-only">
        	<div style="padding:10px">
            <form name="newsletter" id="newsletter" method="post">
            	<table border="0" cellspacing="10" cellpadding="0">
                	<tr>
                    	<td width="100" >Template:</td>
                        <td><select name="EmailTemplate" id="EmailTemplate" style="width:150px;">{$templates}</select> &nbsp; 
                        <a href="#" onClick="show_template_preview();">Preview</a></td>
                    </tr>
                    <tr>
                    	<td width="100">Subject:</td>
                        <td><input type="Text" name="Subject" id="Subject"></td>
                    </tr>
                    <tr>
                    	<td width="100">From: </td>
                        <td><input type="Text" name="Sender" id="Sender"></td>
                    </tr>
                </table>
            </form>
            </div>
        </li>
    </ul> 
</div>
2

Welcome to Sitepoint!

Your html code definitely looks strange, I question the use of a list here - it just doesn’t make sense here this is almost as bad as using tables for design, speaking of which using a table to layout your form (see this Sitepoint article for how to do this with CSS), and mixing inline-styles with html attributes like width, border, cellspacing (use CSS margins) and cellpadding (use CSS padding).

I also question the use of display:list-item - particularly because you apply this to a list item - and display:table-cell - IE7 and below don’t understand this and it doesn’t really make sense anyway.

Sorry, I don’t have the time to put together an improved version, maybe somebody else has.