Having problems with layered DIVs... Firefox.

[Ter13]

Alright, I'm trying to make a javascript enabled DIV for my webpage. What it SHOULD do, is go behind the body div, and basically compliment a title image that contains part of a background image.

I'm moving the background div with a small java script that simply finds the offset location of the title image, and then matches the background div to that location, making the image seem to be seamless, and go behind the page content.

This is how it should look: http://img81.imageshack.us/img81/9944/problem11pl.jpg
(It looks that way in IE)

And this is how firefox makes it look: http://img143.imageshack.us/img143/8062/problem21jb.jpg

Now, I'll show you the script I used to create it:

The Javascript function to move it:

function locateBackground()
{
var background = getElementsByClass("backgrounddiv");
var offsetTrail = getElementsByClass("titlediv")[0];
var offsetLeft = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
if (navigator.userAgent.indexOf("Mac") != -1 &&
typeof document.body.leftMargin != "undefined") {
offsetLeft += document.body.leftMargin;
offsetTop += document.body.topMargin;
}
background[0].style.left = offsetLeft-85;
background[0].style.top = offsetTop;
}

The CSS for the two conflicting DIVs:


DIV.bodydiv
{
width: 640px;
position: relative;
z-index: 2;
overflow: auto;
left: auto;
right: auto;
margin: 0px auto 0px auto;
text-align: left;
}

DIV.backgrounddiv
{
left: 0px;
top: 0px;
position: absolute;
z-index: 1;
}


The HTML is pretty simple here, so I'm leaving it out. 99% of the work is done by the script and the style sheet.

As for the parts I know are broken, well, Firefox doesn't want to relenquish control over the location of the background div, and IE is cooperating just like an obedient program... For once...

Anybody got any tips?

[drhowarddrfine]

The HTML is pretty simple here, so I'm leaving it out.Without complete code or, preferably, a link we can only guess. It could relate to absolute positioning. Are you aware AP is removed from the normal flow, allowing other elements to shift positions?

Also, are you using a complete doctype? Which one?

CSS is case sensitive. Could this be causing the problem?

In the end, the problem will be IE and not Firefox.

[Ter13]

Now, I'm going to flat out say this:

The HTML is NOT NECCESSARY to figure out this problem.

All you are going to see is a bunch of nested DIV files.

The CSS may well be case sensitive, but my CSS doesn't use caps. I forgot to include a doctype when I made the file, I'm going to try that in a minute, and I've yet to ftp the page up to my server, so... Well, the pictures should be good enough for now. Though, I think once I try the Doctype... I'll have it fixed...

I did find it strange that IE looked like I wanted it to, and that Firefox didn't... Typically, it's been the other way around.

[drhowarddrfine]

Like I said, without the code, I wouldn't know whether you forgot the doctype, a significant error. Nor would I be able to tell how you named your divs. A picture is not worth a thousand code lines.

If IE looks right but not FF then did you code using IE, then checked FF? Or did you do it the right way and got it working in FF before checking IE? IE is almost always wrong.

[Ter13]

Okay, I added a doctype (I don't usually forget those... =/), and they both display the same now. The "broken" way. I see now that I am at fault, and not the browser, as I had thought.

Here's a link to the site:

http://www.wownage.com/Index.php

and here's the CSS:

http://www.wownage.com/SimpleLayout.css

Anyway, thanks for your patience.

[Ter13]

Oh, and by the way, my menu system is all kinds of jacked up... Anybody got any idea why it isn't aligned right, and why I can't shift it to the right by 16 pixels?

[drhowarddrfine]

Validate and fix your html and css errors. I would not have used a transitional doctype. It just allows sloppy code. You should always use strict for new pages.

[Ter13]

Okay, first of all, THANK YOU. I cannot express my gratitude for finding that missed end bracket... That was throwing my CSS into TOTAL chaos! Thank you so much for that, and also for leading me to find the problem myself, rather than giving me a block of code to digest! As for the strict doctype, why can I not have an onresize event?

It keeps telling me that there is no onresize property... Why exactly is that?

[_Aerospace_Eng_]

The strict doctype throws out many attributes in hopes of separating functionality from content. Inside your script tags somewhere add this
onresize = doSomething;
where doSomething is the name of the function you want to run onresize.

[drhowarddrfine]

for leading me to find the problem myself, rather than giving me a block of code to digest!That is why I give terse, to the point answers and you are one who recognized the benefits.

[Ter13]

Okay, thanks, engineer, but I can't seem to get that to work at the time being... Right now, I just want to get this site UP before I worry about getting everything in "strict" standards. As far as I'm concerned, that's a job for the "tweaking" stage, not the building stage.

Anyway, I've had another issue. My divs have to line up to the pixel level. In Firefox, it's no issue. In IE, on the other hand...

Well, essentially, IE has displayed my "quote" div 4 pixels lower than firefox, and my "quote" paragraph as 2px smaller than firefox...

I can't seem to figure out a solution. I've tried adjusting a lot of things, but nothing seems to do it.

I'm still learning this entire "IE sucks at the CSS" business, so please be patient with me.

BTW: http://www.wownage.com

[SOLUTION FOUND!]

So, I spent about three hours on this one, only to find that it is not one bug, as it seemed, but a combination of three internet explorer incongruencies. First, came the inline-image 3px jog thing, that was an easy fix, I made all that didn't have a "sister" image block-level images. Then for the rest of the images, I just had to put the div's opening and closing tags on one line... Strangely enough, this fixed the problem...

It feels kind of pointless to be doing all of this when I'm just going to have to remove the hack later anyway... I mean, when IE7 is out, this style sheet is going to be obsolete, so... I'm going to stab myself in the face.