A few more pairs of eyes required

[Cherubae]

I have some buggy code and for the life of me I can't figure out what's causing me the headache.

I have a div-based layout (http://www.fogu.com/hm4/index.php) which is resulting in different problems for different browsers.

headache #1
I placed an iframe in the middle-right side to handle the text content; it's nested inside of a div but spreads off the side of the screen in IE and Net7. I can only assume it's spanning the width of the browser window and not the width of the div. Opera handles the width of the iframe correctly, but doesn't seem to like the overflow:hidden in the body tag, so it also scrolls down the whole page along with scrolling the iframe. I can add a margin-right:250px to offset the width of the left-side divs (which happen to be 250px wide) and that corrects IE, but not Net7.

css file -> http://www.fogu.com/hm4/hm4_layout.css

I've tried just having the iframe not nested inside of a div and use positions to put it in the right spot. Works fine for IE, but not Opera or Net7. setting the width:auto doesn't seem to work either.

headache #2
I have a flash animation that plays across the top. It only appears if a user is in 1024x768, but I've also had to restrict it to IE only; when ever the flash animation plays in Opera or Net7, the symbols that are off to the sides of the "stage" also show up in the animation. All works fine excet for Net7, which doesn't show the Flash as intened (via some javascript) but it continues to display "Loading...." in the status bar. The only thing I can think that might cause this is either the Flash/javascript combo or something on the page is screwy (via css?) and it's loading over and over.

headache #3
I have my bottom div with a background image. The background image displays fine in Net7 and IE, but Opera just won't pull it up for some reason and I have no idea why. I have it set as...

#bottom {width:100%; height:100%; top:420px; left:0px; z-index:2; background-color: #99CCFF;
background-image:url(/hm4/img/bottom_background4.png); background-repeat:repeat-x;
cursor:url(/hm4/img/nappy.cur), auto;}


Many eyes welcome to cure my headaches

[pardicity3]

headache #1:

You have a div with a width of 100%. On that same div you have a margin of 250px set. Afaik when IE sees a percentage it calculates the width that that certain percentage implies. Thus, you are getting a div on an 800x600 monitor that is close to 800 pixels wide. Then you are offsetting that div 250px, this makes 250 pixels of the div move off the right of the page. Or atleast that is what I am seeing.

Try setting your margin to something like 15% and then set the width to 85%. This should solve your problem...I hope :)!

headache #2

Hmm....:confused:

headache #3

hmm, I still see the background image in opera. I am using opera 6.0.

[Cherubae]

Thanks ;) Part of my problem was I had the div that held the iframe set for 100% width, which made it the same size as the browser window. After I took that part out of the div it all worked out.

I still don't know about #2 either, maybe it's a Net7 thing.

If you can see the background in your version of Opera 6, maybe it's a bug with my Opera 7.03 :o


- Cher

[brothercake]

I have Opera 7.10 and I can see it fine, but in O7.02 only the left-hand background image is visible

[A1ien51]

I hav win98 IE 6 and with the flash, the last part of the tree image has a break from the other part of it, If you want a screen shot, I will send it to you.

Also, I would darken the scroll bars a bit, hard to find them at first

I like the site, looks nice
A1ien51

[Cherubae]

Well after I darkened the scroll bar I noticed I was missing the dtd declaration. I threw the Transitional doctype up at the top and now the whole thing is wacky ;)

- The background image that was missing from Opera is missing from IE now as well. Removing the doctype brings it back though. This is the css I'm using for the bottom div:

#bottom {width:100%; height:100%;
top:420px; left:0px; z-index:2;
background-color:#9CF;
background-image:url(/hm4/img/bottom_background4.png);
background-repeat:repeat-x;
cursor:url(/hm4/img/nappy.cur), auto;}


The W3C validator only complains about missing background-color tags in all my id's (which are there *shrug*).

- My problem with the iframe is back as well ;) 250px to the right is were the scroll bar is. If there is some way to set the width of an object to be the browser.width minus 250px, that would fix my problem :( I took the iframe out of the nested div and then used top/left positioning to put it into place but still the iframe was 250px over to the right.

Removing the doctype always fixed the problem though, even if it does validate as invalid ;) Is not adding in a doctype my solution? I've tried strict, transitional, and frameset but with no differences.

As for the Flash and the tree tops, I noticed in several browsers that the crazy thing was moving farther over to the right then I requested of it. I took out the margin-left:210px and replaced it with some top/left positioning, lemme know if you see any changes.


- Cher

[oracleguy]

Originally posted by Cherubae


#bottom {width:100%; height:100%;
top:420px; left:0px; z-index:2;
background-color:#9CF;
background-image:url(/hm4/img/bottom_background4.png);
background-repeat:repeat-x;
cursor:url(/hm4/img/nappy.cur), auto;}


The W3C validator only complains about missing background-color tags in all my id's (which are there *shrug*).


Its complaining because your background-color is defined improperly. I believe you have to have hex numbers 6 characters long. So like in the above code sample, use #0009CF instead of #9CF.

[Cherubae]

Nope, sorry. I've tried it with the 6-digit hex code (what I usually use) and the 3-digit one, same error ;) I just happen to leave the 3-digit one in there when I posted the code.


- Cher