Hi my friend developed a site http://www.pershoreinbloom.com it looks fine in most browsers but when I view on my 14" screen with IE 7 the content text overlaps onto the background image, I am trying to help find why but am a bit flumuxed.
I was wondering if anyone could see reason for this:
The html for the content area is
<div id="content-wrap">
<div id="bottom-bg">
<div id="top"></div>
<div id="content">
<h2><img src="img/welcome.png" alt="" /></h2>
<p align="justify">Pershore in Bloom was formed five years ago to enhance and promote Pershore for residents and tourists alike and also to encourage community pride and participation.</p>
<p align="justify">This we feel is achieved by encouraging organizations and schools to participate in community projects as well as providing floral displays.</p>
<p align="justify">The Heart of England in Bloom presents awards annually to towns and villages taking part and this year, with everyone's help, we are going for gold!</p>
<p align="justify">New members on the committee are always welcome bringing new ideas and fresh thinking – if you would like to assist please contact our Secretary or any committee member. </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<center><a href="http://www.pershoreinbloom.com">© Pershore in Bloom</a> - Managed and Hosted by <a href="http://www.eliservices.co.uk">Eli Services</a></center>
</div><!--/content -->
</div><!--/bottom bg -->
</div><!--/content wrap -->and the css
body {
font: 100%/160% georgia;
background: #ffffff url(img/main-bg.jpg) no-repeat center top;
color: #333333;
width: 100%;
display: table;
}
#content-wrap {
width: 904px;
margin: 0 auto;
position: relative;
}
#content {
width: 750px;
float: left;
position: relative;
margin: 35px 0 20px 94px;
z-index: 5;
}