Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ page layout with div elements

Posted by: jefflisafl Sep 11 2006, 10:57 AM

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?

Posted by: pandy Sep 11 2006, 11:40 AM

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.

Posted by: jimlongo Sep 11 2006, 11:41 AM

Perhaps you can find something here about the infamous Internet_Explorer_box_model_bug

hth, jim

Posted by: pandy Sep 11 2006, 11:47 AM

Don't think it's box model related. No padding and stuff present.

Posted by: jimlongo Sep 11 2006, 12:01 PM

Probably right, it was a knee-jerk reaction.