I am trying to redesign a website with div elements instead of tables. I am running into a problem with the relative positioning. The first three elements I placed looked the same in IE and NS and Firefox. However when I tried to place a div with text, IE puts it 50px below where NS and Firefox puts it. Here's the code:
<html>
<head>
<style>
body {text-align: center;}
#wrapper {width: 600px; margin: 0 auto; text-align: left;}
</style>
</head>
<body>
<div id="wrapper">
<map class="one" name="link">
<area href="http://www.cornerstonetampa.org/index.html" shape="rect"
coords="15,14,58,25">
<area href="http://www.cornerstonetampa.org/biblestudies.htm" shape="rect"
coords="75,14,167,25">
<area href="http://www.cornerstonetampa.org/beliefs.htm" shape="rect"
coords="183,14,307,25">
<area href="http://www.cornerstonetampa.org/staff.htm" shape="rect"
coords="326,14,360,25">
<area href="http://www.cornerstonetampa.org/announce.htm" shape="rect"
coords="373,14,492,25">
<area href="http://www.cornerstonetampa.org/contact.htm" shape="rect"
coords="509,14,585,25">
</map>
<div style="position: relative; top: 110; left: 0; width: 600; z-index: 3;"><a
href="#"><img usemap="#link" src="http://www.cornerstonetampa.org/images/links.jpg"
width="600" border="0"></a></div>
<div style="position: relative; top: -20; left: 85; width: 85; z-index: 1;"><img
src="http://cornerstonetampa.org/images/CCClogo4.jpg" width="85"></div>
<div style="position: relative; top: -120; left: 162; width: 340; height: 20; z-index:
2;"><img src="http://cornerstonetampa.org/images/cs.jpg" width="340"></div>
<div style="position: relative; top: -125; left: 198; z-index: 3; width: 275; height; 30;"><font style="font-family: Georgia; font-size: 20pt; color:
rgb(36,72,36);">CHRISTIAN CHURCH</font></div>
</div>
</body>
</html>
Any ideas why this is and how to fix it?
Full Version: page layout with div elements
It's probably a combination of different error handling and that you lack a doctype. The latter will put both browsers in Quirks Mode. In Quirks Mode the browsers emulate older versions of themselves. Use a doctype that puts them in Standards Mode (AKA Strict Mode). The difference between browsers will be the smallest then.
http://hsivonen.iki.fi/doctype/
You will see that the page breaks badly in both browsers now. Next step is to validate your code. CSS requires units for most values. You don't always use them. For example here:
position: relative; top: 110???; left: 0???;
http://www.htmlhelp.com/tools/validator/
http://jigsaw.w3.org/css-validator/
Some other things. It's easier both for yourself and us if you don't use inline styles. You don't need to use a DIV for each image. one is enough. Position the images directly instead - less code. Oh, not related to your problems, but you shouldn't use FONT, really.
http://hsivonen.iki.fi/doctype/
You will see that the page breaks badly in both browsers now. Next step is to validate your code. CSS requires units for most values. You don't always use them. For example here:
position: relative; top: 110???; left: 0???;
http://www.htmlhelp.com/tools/validator/
http://jigsaw.w3.org/css-validator/
Some other things. It's easier both for yourself and us if you don't use inline styles. You don't need to use a DIV for each image. one is enough. Position the images directly instead - less code. Oh, not related to your problems, but you shouldn't use FONT, really.
Don't think it's box model related. No padding and stuff present. 
Probably right, it was a knee-jerk reaction. 
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.