page layout with div elements, problem with IE and Mozilla re: relative positioning |
page layout with div elements, problem with IE and Mozilla re: relative positioning |
jefflisafl |
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 |
pandy |
Sep 11 2006, 11:40 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 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. |
jimlongo |
Sep 11 2006, 11:41 AM
Post
#3
|
This is My Life Group: Members Posts: 1,128 Joined: 24-August 06 From: t-dot Member No.: 16 |
|
pandy |
Sep 11 2006, 11:47 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Don't think it's box model related. No padding and stuff present.
|
jimlongo |
Sep 11 2006, 12:01 PM
Post
#5
|
This is My Life Group: Members Posts: 1,128 Joined: 24-August 06 From: t-dot Member No.: 16 |
Probably right, it was a knee-jerk reaction.
|
Lo-Fi Version | Time is now: 28th March 2024 - 11:17 AM |