The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> page layout with div elements, problem with IE and Mozilla re: relative positioning
jefflisafl
post Sep 11 2006, 10:57 AM
Post #1





Group: Members
Posts: 1
Joined: 11-September 06
Member No.: 110



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?

This post has been edited by jefflisafl: Sep 11 2006, 10:58 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 11 2006, 11:40 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,187
Joined: 9-August 06
Member No.: 6



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. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Sep 11 2006, 11:41 AM
Post #3


This is My Life
*******

Group: Members
Posts: 1,125
Joined: 24-August 06
From: t-dot
Member No.: 16



Perhaps you can find something here about the infamous Internet_Explorer_box_model_bug

hth, jim
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 11 2006, 11:47 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,187
Joined: 9-August 06
Member No.: 6



Don't think it's box model related. No padding and stuff present. ninja.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Sep 11 2006, 12:01 PM
Post #5


This is My Life
*******

Group: Members
Posts: 1,125
Joined: 24-August 06
From: t-dot
Member No.: 16



Probably right, it was a knee-jerk reaction. wub.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th March 2019 - 02:52 PM