#1 2008-05-15 01:48:35
- korat
- Member
- From: Thailand
- Registered: 2006-06-29
- Posts: 70
- I've been thanked 0 times.
-
Difference in layout between FF and IE
I'm using layers on dreamweaver to add text to a site. But why does the text always seem to sit higher on the page with IE than Firefox? This is making things a real pain when trying to keep the page looking tidy. What am I doing wrong?
Offline
#2 2008-05-15 02:04:31
- Northie
- Moderator
- From: Yorkshire, UK
- Registered: 2006-08-19
- Posts: 2629
- I've been thanked 63 times.
-
Re: Difference in layout between FF and IE
The layer tag is not standard - use divs, spans and CSS instead
Now taking free-lance inquiries; Please contact me for more details
Internet Marketing Books
Promote Yourself on Site Reference!
Offline
#3 2008-05-15 02:14:13
- korat
- Member
- From: Thailand
- Registered: 2006-06-29
- Posts: 70
- I've been thanked 0 times.
-
Re: Difference in layout between FF and IE
Don't the layers automatically create div tags?
Offline
#4 2008-05-19 20:04:00
- ColoEagle
- Administrator
- From: Colorado, USA
- Registered: 2006-02-15
- Posts: 2127
- I've been thanked 86 times.
-
Re: Difference in layout between FF and IE
layers are different from div's, can you supply an example for us to insure we are talking the same thing.
Also remember that IE has a little trouble with math, this can sometimes create different positioning.
The only way to discover the limits of the possible is to go beyond them into the impossible
Attention designers and webmasters - "The Beauty of CSS"
Valid Web Designs tutorials on HTML, XHTML and CSS
Home Security Systems
Offline
#5 2008-05-19 21:43:49
- korat
- Member
- From: Thailand
- Registered: 2006-06-29
- Posts: 70
- I've been thanked 0 times.
-
Re: Difference in layout between FF and IE
This is the code for one of the pages -
Code: html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #19799D;
}
#logo {
position:absolute;
left:60px;
top:0px;
width:180px;
height:180px;
z-index:1;
}
#banner {
position:absolute;
left:240px;
top:0px;
width:725px;
height:180px;
z-index:2;
}
#mainheader {
position:absolute;
left:90px;
top:228px;
width:344px;
height:42px;
z-index:3;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#navbar {
position:absolute;
left:60px;
top:180px;
width:905px;
height:50px;
z-index:4;
}
#subhead1 {
position:absolute;
left:312px;
top:272px;
width:284px;
height:45px;
z-index:5;
}
#para1 {
position:absolute;
left:313px;
top:328px;
width:272px;
height:156px;
z-index:6;
}
.style3 {color: #FFFFFF; font-size: 14px; }
#para2 {
position:absolute;
left:313px;
top:526px;
width:272px;
height:100px;
z-index:7;
}
#subhead2 {
position:absolute;
left:312px;
top:648px;
width:249px;
height:36px;
z-index:8;
}
#para3 {
position:absolute;
left:312px;
top:704px;
width:272px;
height:101px;
z-index:9;
}
#para4 {
position:absolute;
left:311px;
top:819px;
width:275px;
height:120px;
z-index:10;
}
#newsboxbg {
position:absolute;
left:629px;
top:274px;
width:305px;
height:420px;
z-index:11;
}
#newspara {
position:absolute;
left:642px;
top:513px;
width:280px;
height:160px;
z-index:12;
}
.style4 {color: #333333; font-size: 12px; }
#newsboxheader {
position:absolute;
left:642px;
top:272px;
width:280px;
height:20px;
z-index:13;
}
#newsboximage {
position:absolute;
left:640px;
top:330px;
width:280px;
height:175px;
z-index:14;
}
#sponsorshipbox {
position:absolute;
left:630px;
top:702px;
width:305px;
height:340px;
z-index:15;
}
#sponheader {
position:absolute;
left:645px;
top:710px;
width:271px;
height:24px;
z-index:16;
}
#sponpara {
position:absolute;
left:645px;
top:896px;
width:280px;
height:140px;
z-index:17;
}
#sponimage {
position:absolute;
left:641px;
top:759px;
width:280px;
height:140px;
z-index:18;
}
#enghead {
position:absolute;
left:90px;
top:734px;
width:196px;
height:25px;
z-index:19;
}
#Engbox {
position:absolute;
left:86px;
top:734px;
width:212px;
height:344px;
z-index:20;
}
#Engboximage {
position:absolute;
left:88px;
top:790px;
width:243px;
height:190px;
z-index:21;
}
#Layer1 {
position:absolute;
left:148px;
top:1259px;
width:182px;
height:83px;
z-index:22;
}
.style5 {
font-size: 12px;
color: #FFFFFF;
}
#Layer2 {
position:absolute;
left:90px;
top:965px;
width:229px;
height:39px;
z-index:23;
}
#Layer3 {
position:absolute;
left:340px;
top:1215px;
width:220px;
height:57px;
z-index:24;
}
#Layer4 {
position:absolute;
left:91px;
top:507px;
width:180px;
height:24px;
z-index:25;
}
#Layer5 {
position:absolute;
left:89px;
top:1342px;
width:182px;
height:47px;
z-index:26;
}
#Layer6 {
position:absolute;
left:213px;
top:1510px;
width:319px;
height:80px;
z-index:27;
}
#Layer7 {
position:absolute;
left:90px;
top:297px;
width:175px;
height:218px;
z-index:28;
}
#Layer8 {
position:absolute;
left:90px;
top:1193px;
width:248px;
height:21px;
z-index:29;
}
#Layer9 {
position:absolute;
left:323px;
top:1342px;
width:220px;
height:47px;
z-index:30;
}
#Layer10 {
position:absolute;
left:657px;
top:1078px;
width:279px;
height:28px;
z-index:31;
}
#Layer11 {
position:absolute;
left:644px;
top:1125px;
width:280px;
height:216px;
z-index:32;
}
#Layer12 {
position:absolute;
left:625px;
top:1342px;
width:317px;
height:32px;
z-index:33;
}
#Layer13 {
position:absolute;
left:744px;
top:1377px;
width:69px;
height:38px;
z-index:34;
}
#Layer14 {
position:absolute;
left:90px;
top:783px;
width:147px;
height:190px;
z-index:35;
}
#Layer15 {
position:absolute;
left:90px;
top:1011px;
width:190px;
height:190px;
z-index:36;
}
.style6 {color: #FFFFFF; font-family: "Courier New", Courier, monospace; }
#Layer16 {
position:absolute;
left:90px;
top:552px;
width:174px;
height:190px;
z-index:37;
}
-->
</style></head>
<body>
<div id="logo"><img src="images/lfw.gif" alt="sdv" width="180" height="180" /></div>
<div id="banner"><img src="images/banner6.jpg" alt="uh" width="725" height="180" /></div>
<div id="mainheader">
<h1 class="style6">Volunteer Thailand </h1>
</div>
<div id="navbar"><img src="images/nav grad.gif" alt="GRTG" width="905" height="50" /></div>
<div id="subhead1">
<h3 class="style6">A volunteer opportunity with Dragonfly!</h3>
</div>
<div id="para1">
<p align="justify" class="style3">Dragonfly volunteers work all across Thailand on English teaching, orphanage care work, building, and wildlife projects which aid communities and environment. We are committed to providing local people and ecosystems with help and support, and each volunteer with the best opportunity to work abroad and experience the amazing culture of Thailand.</p>
</div>
<div class="style3" id="para2">
<p align="justify">Dragonfly's Volunteer Thailand Projects can offer a volunteer opportunity to anyone interested in helping people in rural and marginalized communities of Thailand - regions which need support the most.</p>
</div>
<div id="subhead2">
<h3 class="style6">Why Volunteer to Work With Dragonfly?</h3>
</div>
<div id="para3">
<p align="justify" class="style3">At Dragonfly, we love what we do and do what we love. We’re dedicated to serving the people of Thailand by running volunteer projects that make a difference, even a small one, in their lives.</p>
</div>
<div class="style3" id="para4">
<p align="justify">For you as a volunteer, we use our local knowledge of Thailand and years of experience to prepare you fully for your placement and to ensure that your volunteer work goes towards ongoing, quality projects. We make it easy not only to volunteer but to explore the beautiful local culture that Thailand has to offer – by living and working submersed in it!</p>
</div>
<div id="newsboxbg"><img src="images/Newsboxversion2.gif" alt="gbnfg" width="305" height="420" /></div>
<div id="newspara">
<p align="justify" class="style5">After months of preparation, planning, and tons of paper work, Dragonfly has succeeded in registering a new charity in Thailand – the Dragonfly Community Foundation! We through the foundation, we’ll be able to run new programs to help people in need of shelter, education, medical attention and more. In coming months, we’ll unveil a new foundation website and begin a fundraising campaign – any and all help will be appreciated!</p>
</div>
<div id="newsboxheader">
<h3 class="style6">Volunteer Thailand News </h3>
</div>
<div id="newsboximage"><img src="images/newsbox image.jpg" alt="dfbdf" width="280" height="176" border="2" /></div>
<div id="sponsorshipbox"><img src="images/Sponsorship box version2.gif" alt="bfg" width="305" height="340" /></div>
<div id="sponheader">
<h3 class="style6">Sponsor-a-child project </h3>
</div>
<div id="sponpara">
<p align="justify" class="style4">This project is aimed at supporting disadvantaged children by providing them with living expenses and especially the much-needed funds to help them stay in school. Each sponsor makes small monthly payments to support a child who would otherwise have very little chance of completing their education. Interested? Learn how you can make a difference!</p>
</div>
<div id="sponimage"><img src="images/Sponsor-a-child box image.jpg" alt="hjh" width="280" height="140" border="2" /></div>
<div id="enghead">
<h3 class="style6">English Teaching </h3>
</div>
<div id="Layer1">
<p align="justify" class="style5">Help build an interest in this important global language at a welcoming school in Thailand’s mountainous North or culturally rich Northeast regions.</p>
</div>
<div id="Layer2">
<h3 class="style6">Orphanage Care work </h3>
</div>
<div class="style5" id="Layer3">
<p align="justify">Work to bring some fun and skills into the lives of children who need care and attention.</p>
</div>
<div id="Layer4">
<h3 class="style6">Building</h3>
</div>
<div id="Layer5">
<p align="justify" class="style5">Join a team and construct a much-needed building using sustainable techniques</p>
</div>
<div id="Layer6"></div>
<div id="Layer7"><img src="images/Building image.jpg" alt="edg" width="175" height="218" border="1" /></div>
<div id="Layer8">
<h3 class="style6">Wildlife conservation </h3>
</div>
<div id="Layer9">
<p align="justify" class="style5">Work to care for and rehabilitate wildlife and educate others about the issues affecting Thailand’s wild animals</p>
</div>
<div id="Layer10">
<h3 class="style6">Download our info pack </h3>
</div>
<div id="Layer11"><img src="images/info pack.jpg" alt="sdfv" width="280" height="216" border="1" /></div>
<div id="Layer12">
<p align="justify" class="style5">To receive our newsletter please subscribe here </p>
</div>
<div id="Layer13"><img src='http://www.emailbrain.com/rwcode//webadmin/images/emailbrain/eb_subscribe05.gif' alt="newsletter" border=1 align="absmiddle"></div>
<div id="Layer14"><img src="images/orp2.jpg" alt="fgh" width="147" height="190" border="1" /></div>
<div id="Layer15"><img src="images/gibbon.jpg" alt=" xfghxf" width="190" height="190" border="1" /></div>
<div id="Layer16"><img src="images/English teaching box image.jpg" alt="fgb" width="174" height="190" border="1" /></div>
</body>
</html>
When viewed in the two different browsers the text is correct if FF but the IE version the text is riding too high!
Offline
#6 2008-05-19 22:26:36
- laurie_m
- Member
- From: Bega, Sapphire Coast Australia
- Registered: 2005-08-18
- Posts: 1435
- I've been thanked 37 times.
-
Re: Difference in layout between FF and IE
G'day Korat.
Sorry to tell you, Mate, that in my understanding, it just won't work to build this kind of site using position absolute.
For it to work out you are depending on too many variables that are outside of your control.
Consider these possibilities for someone visiting your site:
* Using a Mac computer that doesn't have the font that you have specified as your primary font, and so defaults to a different size for a given specified size,
* Because of poor eyesight and has enlarged the font,
* Using a different browser such as IE, Opera, or the many other smaller browsers.
* Who knows what else may cause it to screw up with the code that you have.
You'll need to build the site using position relative in divs or else build a table based site. The way you have it, it will only take the slightest little thing to go wrong and the whole thing will misalign.
Regards,
Laurie.
Last edited by laurie_m (2008-05-19 22:28:03)
John McDouall Stuart - Explorations in Australia
Remains of Coulthard Lake Eyre Attacked by Aboriginals
Offline
#7 2008-05-19 23:36:54
- korat
- Member
- From: Thailand
- Registered: 2006-06-29
- Posts: 70
- I've been thanked 0 times.
-
Re: Difference in layout between FF and IE
How would you recommend I do it? I was hoping to get the layout sorted then doing it in CSS but I don't know that much about it. I've been looking through the w3c tutorials but they don't seem to help me that much.
Last edited by korat (2008-05-19 23:37:36)
Offline
#8 2008-05-20 00:08:46
- laurie_m
- Member
- From: Bega, Sapphire Coast Australia
- Registered: 2005-08-18
- Posts: 1435
- I've been thanked 37 times.
-
Re: Difference in layout between FF and IE
Well, I guess you're like me, Korat: always looking for a freebie.
You could try a free template from Layout Gala. It should work OK in Dreamweaver. You'll have to work on the colour scheme a bit. They are pretty plain templates, but very good from the SEO viewpoint.
The css file is in the template. It's best, at some point, to remove that part of the template code and make it a separate css file.
I would have thought that Dreamweaver would have some templates installed, ready for you to click and use.
Be sure to do the css as you build the site. The css, more or less, is the layout.
Everything should go in a div; as many divs as you need. A div is a bit like a box that can stretch downward. The css file tells the div just how it's got to behave.
I reckon you may have a better understanding of html than I did when I started to learn css. You'll be right, Mate.
Someone else may suggest a better template for you to learn on.
I suggest that you play about and make several pages in Dreamweaver for practice, and then scrap them, rather than trying to get your first attempt fixed up to publish.
There are 40 templates on the Layout Gala site, all based on the same code. http://blog.html.it/layoutgala/
Regards,
Laurie.
Last edited by laurie_m (2008-05-20 00:12:09)
John McDouall Stuart - Explorations in Australia
Remains of Coulthard Lake Eyre Attacked by Aboriginals
Offline
#9 2008-05-20 02:26:23
- Ryan_steyn
- Member
- From: South Africa, Port Elizabeth
- Registered: 2006-08-23
- Posts: 1743
- I've been thanked 31 times.
-
Re: Difference in layout between FF and IE
Ye know... you could do what i do and just tweak it for IE with a css hack, i also noticed that ie6 doesnt like reading things the same as firefox (about 5-10px out), so i first build for ff and keep the page open in ie while i tweak it. IE7 doesnt play nice with that hack though, so it may not be relevant for long... but im just throwing the idea out there 
"Humans are by far the most fascinating creatures, in a universe with no boundaries and a world with so much unfound wonder we are the only entities capable of creating boredom"
Offline
#10 2008-05-20 07:59:35
- MarkCCDC
- Moderator
- From: Deland, FL
- Registered: 2005-10-25
- Posts: 1270
- I've been thanked 20 times.
-
Re: Difference in layout between FF and IE
Curious about your site in different browsers?
http://browsershots.org/
May take a short amount of time (~30 minutes last time I used it), but gets you screenshots of your website in a load of browsers - and it's free!
By the way - I have nothing to do with that site, just a cool tool I've found handy from time to time.
Good luck!
Offline
#11 2008-05-20 08:36:57
- aknet47
- Member
- From: vienna
- Registered: 2006-09-14
- Posts: 234
- I've been thanked 1 times.
-
Re: Difference in layout between FF and IE
My multitesting-website-env. says you should add definitions to the body:
border: 0;
margin: 0;
and to the heading style6:
padding: 0em;
margin: 0;
eg.
I´ve got a blog
Offline
#12 2008-05-29 11:20:21
- ninak
- Member
- From: Florida
- Registered: 2007-07-16
- Posts: 204
- I've been thanked 4 times.
-
Re: Difference in layout between FF and IE
MarkCCDC wrote:
Curious about your site in different browsers?
http://browsershots.org/
May take a short amount of time (~30 minutes last time I used it), but gets you screenshots of your website in a load of browsers - and it's free!
By the way - I have nothing to do with that site, just a cool tool I've found handy from time to time.
Good luck!
Thanks for the site. Just used it and I am very happy with I discovered. Thanks again. Janina
Offline
#13 2008-05-29 11:24:41
- MarkCCDC
- Moderator
- From: Deland, FL
- Registered: 2005-10-25
- Posts: 1270
- I've been thanked 20 times.
-
Re: Difference in layout between FF and IE
ninak wrote:
Thanks for the site. Just used it and I am very happy with I discovered. Thanks again. Janina
Sure thing! Glad it has helped you. I think its an excellent service and idea, one that I think Google would be smart to purchase, since with their financial backing, the service could be nearly instantaneous.
Again, glad it helped 
Offline
#14 2008-06-11 21:27:50
- seolady
- Member
- From: USA
- Registered: 2008-06-11
- Posts: 11
- I've been thanked 0 times.
-
Re: Difference in layout between FF and IE
IE & FF always have an issue regarding on CSS. Some use an IE hack. Another is you could start studying some codes from FREE to download Web Design Templates at OSWD (Open Source Web Design)..
You could also try using some CMS like:
1. wordpress
-This is FREE, easy to set-up. easy to maintain, with lots of plugins. i.e. If you want a blog-type site then this is good for you. I have been using this a lot here are some example sites that I have set-up & designed using this CMS.
shoppingcartqueen's blog (my previous client, there are a lot other blogs i setup for her)
Tiangge
Mardie
2. Drupal
-This is a bit harder than wordpress but if you know much PHP then i think its easy. Also FREE
3. Joomla
-I guess its FREE also.
All of the CMS is free all you need is a domain/host. Hope these would help
Offline
| Never |
- Sponsored Results
|
|