Tue, 2005-09-20 22:40
If you take a look at this code, the "topNav" appears positioned correctly in IE 6.0. However, in Firefox, it moves to the middle of the page.
What's happening?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
background-color: yellow;
}
.topNav {
background-color: silver;
margin-top: 100px;
float: left;
}
.rightRail {
background-color: blue;
margin-top: 265px;
margin-left: 490px;
width: 240px;
}
</style>
</head>
<body>
<div class="topNav">Test Nav</div>
<div class="rightRail">Test Right Rail</div>
</body>
</html> 
Tue, 2005-09-20 23:55
#1
position not the same in FireFox as IE
Let's see if I can say this right because I'm exhausted. IE is doing it wrong. The top nav is floated so it is taken out of the document flow. However, the rightRail has a margin of 265px. So the top nav "floats" under the margin and, rightly, places itself 265px plus its own 100px from the top. So FF, as always, gets it right.
Wed, 2005-09-21 00:12
#2
Re: A good starting point...
Luke2000 wrote:
A good piece of code to add into your body tag is:
body { margin: 0; padding : 0; }
This gives you a 'clean-sheet' to start with and removes the preset margins from the browser.
That only sets the padding & margin of the body to 0. If by a 'clean sheet' you mean every element, then you want:
* { margin: 0; padding : 0; }
Wed, 2005-09-21 00:15
#3
Your right..
I did mean by a clean body so to speak.. lol. This code works fine for me:
Quote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body { margin: 0;
padding: 0;
background-color: yellow;
}
.topNav { position: relative;
top: 100px;
background-color: silver;
float: left;
}
.rightRail {
background-color: blue;
position: relative;
top: 400px;
margin-left: 490px;
width: 240px;
}
</style>
</head>
<body>
<div class="topNav">Test Nav</div>
<div class="rightRail">Test Right Rail</div>
</body>
</html>
Wed, 2005-09-21 00:23
#4
position not the same in FireFox as IE
Did you delete a post? Cos now it looks like I've quoted something that wasn't there.
Wed, 2005-09-21 00:23
#5
position not the same in FireFox as IE
and I thought you were going crazy... 
Wed, 2005-09-21 01:04
#6
Sorry
Sorry Tyssen, I deleted it to replace it with the one there now. I apologise 
Wed, 2005-09-21 02:45
#7
position not the same in FireFox as IE
okay, well what I mean to do is position the "topNav" 100px from the top and the "rightRail" 265px from the top and 490px from the left.
How do I do that in CSS so that it renders correctly in both IE and FF?
drhowarddrfine wrote:
Let's see if I can say this right because I'm exhausted. IE is doing it wrong. The top nav is floated so it is taken out of the document flow. However, the rightRail has a margin of 265px. So the top nav "floats" under the margin and, rightly, places itself 265px plus its own 100px from the top. So FF, as always, gets it right.
Wed, 2005-09-21 02:59
#8
One solution...
This works fine for me:
Quote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body { margin: 0;
padding: 0;
background-color: yellow;
}
.topNav { position: relative;
top: 100px;
background-color: silver;
float: left;
}
.rightRail {
background-color: blue;
position: absolute;
top: 265px;
left: 490px;
width: 240px;
}
</style>
</head>
<body>
<div class="topNav">Test Nav</div>
<div class="rightRail">Test Right Rail</div>
</body>
</html>
Wed, 2005-09-21 03:07
#9
position not the same in FireFox as IE
With Luke's method, you could run into problems later with .rightRail being positioned absolutely cos at the moment it's taking its position from the body tag - that could change when other elements are added.
Wed, 2005-09-21 03:13
#10
Oh dear...
Like I said earlier, I am new to CSS myself. Just thought i'd give it a try... 
lol
Fri, 2005-09-23 18:25
#11
position not the same in FireFox as IE
And don't forget a complete DTD to force IE into standards mode 
Mon, 2005-09-26 17:30
#12
position not the same in FireFox as IE
DTD?
I am just watching this thread because I am having similar problems with MSIE getting stuff all wrong.
I thought I had fixed the problem, it was showing the same in both MSIE and Firefox, but now (with no changes to the template) it is showing all messed up.
I really am at my wit's end about this. I have NO EARTHLY idea what the hell could be wrong. It looks great in Firefox. I'm sick of dealing with MSIE.
Mon, 2005-09-26 17:39
#13
position not the same in FireFox as IE
DTD = Document Type Definition
This site will help explain it.
http://www.w3schools.com/dtd/default.asp
- R
Mon, 2005-09-26 18:58
#14
position not the same in FireFox as IE
Well okay, I knew what that was just didn't realize the DTD name for it 
Honestly, any ideas on why MSIE is acting so bizarre for my template?
Mon, 2005-09-26 19:05
#15
position not the same in FireFox as IE
I'm surprised FF can handle it at all. You have 120 listed errors with the validator and some more in your CSS. For instance, you have multiply defined 'id's. Before you get it to work in IE, fix your code.
Mon, 2005-09-26 21:50
#16
position not the same in FireFox as IE
Any blog template has errors, it has errors because of the blogger.com stuff that inserts into the code.
All you had to do was actually read the code to notice that.
Not just cut and paste into a validator.
I've already done that, and when I "fix" the supposed "errors" the whole page is unreadable in any browser and completely borked. So there ya go.
EDIT: I apologize for the blatant frustration, but the validator will always find errors no matter what I do, it's blogger.com's fault.
Tue, 2005-09-27 00:35
#17
position not the same in FireFox as IE
I realise that it's frustrating being told to validate, but there are a lot of errors.
However validation is not always the cure for all problems. In IE it looks as though the left sidebar is being pushed down which suggests insufficient space on that line for the two containers.
Could you try removing the padding and border from the .post img ruleset and see what difference that makes and report back.
Have to say that I am amazed at the nature of the errors in the code produced by blogger there's some really terrible nesting violations going on there and most certainly not worthy of the XHTML DTD that is not well formed at all, and it seems the same on a few of the blogs that I checked. Good reason to leave them in my book. have a look at wordpress or textpattern both are XHTML compliant producing well formed standards code.
Hugo.