CSS place 3 divs without margin between them in IE 7 and up

I'm trying to create a panel.The panelHeader, panelMiddle and panelFooter all have a background image of 1px height and in panelMiddle the backround image is repeated in y.In both chrome and mozilla the div's are smoothly positioning the one in bottom of the other without margins.But in IE(what a surprise!) a margin between header and middle appears. Any guidelines?Thanks

<div class="panelContainer">
        <div class="panelHeader"></div>
        <div class="panelMiddle">
            test<br/>
            test<br/>
            test<br/>
        </div>
        <div class="panelFooter"></div>
    </div>

EDIT: The css code

.panelContainer{  
    width: 300px; 
}

.panelHeader{  
    background-image:url(panelHeader.png);

    background-repeat: no-repeat;  
    width: 300px;  
    height: 1px;    
}

.panelMiddle{  
    background-image:url(panelMiddle.png);

    background-repeat: repeat-y;开发者_运维知识库  
    width: 300px;   
}

.panelFooter{  
    background-image:url(panelFooter.png);

    background-repeat: no-repeat;  
    width: 300px;  
    height: 5px;
}

Your page was (apparently) running in Quirks mode.

Aided by my comment "Does your page have a doctype?" (and the fact that I couldn't recreate your problem on a page not in Quirks mode), you realised this fact, and you were then able to solve the problem.

This answer feels silly.

I'd modify your CSS to this (note the floats and margins):

.panelHeader{  
    background-image:url(panelHeader.png);
    background-repeat: no-repeat;  
    width: 300px;  
    height: 1px;
    float: left;  
    margin: 0;  
}

.panelMiddle{  
    background-image:url(panelMiddle.png);

    background-repeat: repeat-y;  
    width: 300px; 
    float: left;  
    margin: 0;  
}

.panelFooter{  
    background-image:url(panelFooter.png);
    background-repeat: no-repeat;  
    width: 300px;  
    height: 5px;
    float: left;  
    margin: 0;
}

IE has some very strange behaviours with regard to margin and padding, which even vary between versions. I generally assume that I need to specify margin and padding rules per element unless I've set very general reset rules first.

For proper css scripting I allways reset the whole CSS code. My resetting it browsers will have the same margins and paddings. Some browsers like IE will automatically ad margins if they are not manually added in your css script.

Here is my reset.css:

/* CSS Document */

/* Clear all styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;}

/* remember to define focus styles! */
:focus {
    outline: 0;}

body {
    line-height: 1;
    color: black;
    background: white;}

ol, ul {
    list-style: none;}

/* tables still need 'cellspacing="0"' in the markup */
table{
    border-collapse: separate;
    border-spacing: 0;}

caption, th, td {
    text-align: left;
    font-weight: normal;}

blockquote:before, blockquote:after,
q:before, q:after {
    content: "";}

blockquote, q {
    quotes: "" "";}
/*Ceal all styles END */

Then in the file you put this meta in the header:

<link rel="stylesheet" href="css-styles/reset.css" />
<link rel="stylesheet" href="css-styles/all.css" />

Please notice the reset css is ABOVE the real stylesheet. Feel free to correct my terrible English...