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>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
<center><a href="http://www.pershoreinbloom.com">&copy; 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;

}

the page designer used px sizes in the css, pixels are for images - all other elements should be measured in relative sizes.
if the window is smaller than the sum of the pixel sizeseither on a small screen or the window open to less than fullscreen, the divs overlapthe div with the higher z-index sits on top, the div with a lower index is obscured
one of the many reasons why W3C standards exclude pixel sizes
% and em scale to the window
px and pt are fixed
not high on the scale of 'hard to fix'
not on the 'head slap' scale either
just get a current 'how to' guide from w3schools.com

Okay thanks, I get you, can see how this could cause problems.

The thing is if you want to control the design cant having percentages cause problems too?

But I guess for this example instead of using 904px 90% would be okay?

If you want a consistent appearance % em work px pt dont
for example : web page 3 images, top left, middle right, bottom left

make yourself anx example page

<div style='wdith:49% float:left;> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed erat purus. Morbi ante risus, fermentum id auctor in, faucibus ac lorem. Sed faucibus imperdiet hendrerit. Praesent eros arcu, aliquam at pretium et, faucibus sed velit. Vestibulum luctus, magna sit amet faucibus aliquet, quam nunc dapibus diam, dictum porta libero nunc a mi. Integer nec felis vitae nunc pharetra accumsan. Lorem ipsum dolor sit amet</div>
<div style='wdith:49% float:right;> <img src='something etc'>bla bla bla</div>
<hr>
<div style='wdith:500px float:left;> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed erat purus. Morbi ante risus, fermentum id auctor in, faucibus ac lorem. Sed faucibus imperdiet hendrerit. Praesent eros arcu, aliquam at pretium et, faucibus sed velit. Vestibulum luctus, magna sit amet faucibus aliquet, quam nunc dapibus diam, dictum porta libero nunc a mi. Integer nec felis vitae nunc pharetra accumsan. Lorem ipsum dolor sit amet</div>
<div style='wdith:500px float:right;> <img src='something etc'>bla bla bla</div>

then resize the window a few times and see which ones look right

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.