I'm designing a website and found out when in compatibility mode (IE7 I believe) I can see the background image and bottom-border of a particular div section the way it should be but when in IE8 or Firefox the background image doesn't show and the border-bottom appears at the top instead of bottom.
Here is the css for the divs...

#mainContent {
 padding: 0 20px; 
 background: #FFFFFF;
 margin-left: 213px;
 width: 780px;
 margin-top:-20px;
}
#mid{
 width:780px;
 background:#fff url(../images/midbg.jpg) repeat-x bottom;
 height:100%;
 border-bottom: 2px solid #CCC;
}
.midLeft{
 width:480px;
 float: left;
 
}
.midLeft p{
 padding: 10px 20px;
 
 text-align:justify;
}
.midRight{
 float: right;
 width:290px;
 border-left: 1px solid #CCC;
 
}
.midRight p{
 padding: 10px 20px;
 text-align:justify;
}

and part of the html

<div id="mainContent">
    <div id="mid">
       <div class="midLeft">
       <h3 style="padding-left:20px;">Welcome</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio.</p></div>
    <div class="midRight"><p><img src="images/insight.jpg" /></p><p> Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p></div>
    </div>
    <br class="clearFloat" />
    <p>&nbsp;</p>
    <div id="bottom">
    <hr width="100%" /><br />
     <div class="bottomLeft">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. </p></div>
    <div class="bottomRight"><p>Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p></div>
    </div>
 <!-- end #mainContent --><br clear="left" /></div>

it could be because your #mid hasn't floated where as the other elements are.

It'd be easier to diagnose if you could provide a link.

Try wrapping quotes around the background image URL. Also I think bottom needs to come before the repeat-x

background:#fff url("../images/midbg.jpg") bottom repeat-x;

Thanks all for your input. I fixed it by moving the <br class="clearfloat"> to the closing #div for mid.