17 replies [Last post]
planeboy747
planeboy747's picture
Offline
Enthusiast
Last seen: 8 years 41 weeks ago
Timezone: GMT+7
Joined: 2005-07-17
Posts: 71
Points: 8

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>

drhowarddrfine
Offline
Leader
Last seen: 11 years 23 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

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.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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; }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Luke2000
Offline
Enthusiast
Last seen: 15 years 34 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

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>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 10 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

position not the same in FireFox as IE

and I thought you were going crazy... Cool

Luke2000
Offline
Enthusiast
Last seen: 15 years 34 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Sorry

Sorry Tyssen, I deleted it to replace it with the one there now. I apologise Smile

planeboy747
planeboy747's picture
Offline
Enthusiast
Last seen: 8 years 41 weeks ago
Timezone: GMT+7
Joined: 2005-07-17
Posts: 71
Points: 8

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.

Luke2000
Offline
Enthusiast
Last seen: 15 years 34 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

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>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Luke2000
Offline
Enthusiast
Last seen: 15 years 34 weeks ago
Joined: 2005-09-16
Posts: 72
Points: 0

Oh dear...

Like I said earlier, I am new to CSS myself. Just thought i'd give it a try... Sad lol

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 8 weeks 8 hours ago
Joined: 2004-06-30
Posts: 9674
Points: 810

position not the same in FireFox as IE

And don't forget a complete DTD to force IE into standards mode Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Beltane
Beltane's picture
Offline
Regular
At my Desk
Last seen: 15 years 41 weeks ago
At my Desk
Joined: 2005-08-02
Posts: 15
Points: 0

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.

http://blog.aequinox.com

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.

CSS n00b.

Check out My Blog!

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 12 years 9 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

position not the same in FireFox as IE

DTD = Document Type Definition

This site will help explain it. Smile

http://www.w3schools.com/dtd/default.asp

- R

Beltane
Beltane's picture
Offline
Regular
At my Desk
Last seen: 15 years 41 weeks ago
At my Desk
Joined: 2005-08-02
Posts: 15
Points: 0

position not the same in FireFox as IE

Well okay, I knew what that was just didn't realize the DTD name for it Tongue

Honestly, any ideas on why MSIE is acting so bizarre for my template?

CSS n00b.

Check out My Blog!

drhowarddrfine
Offline
Leader
Last seen: 11 years 23 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

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.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

Beltane
Beltane's picture
Offline
Regular
At my Desk
Last seen: 15 years 41 weeks ago
At my Desk
Joined: 2005-08-02
Posts: 15
Points: 0

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.

CSS n00b.

Check out My Blog!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me