Applet loads but is hidden in Firefox

flyingt · Dec 31, 2009

Ok, so I'm making a game to learn about PHP. The link is here; you can log in as a Guest. (http://flyingtiger.exofire.net/). I decided to use an applet to send GET data for modifying the game state. I'm sure this isn't the best way to do it, but I'm proficient with Java and right now I just want something that works.

The problem I'm having is that the applet displays in IE and Chrome, but not in Firefox. In Firefox, it loads but is hidden. I know the applet loads in Firefox because when I set View->Page Style to No Style the applet is visible. When style sheets are on, however, the applet is hidden. It is supposed to be inside the bright green box on the left hand side. Any help would be appreciated. Thank you.

misson · Dec 31, 2009

flyingt said:
I decided to use an applet to send GET data for modifying the game state. I'm sure this isn't the best way to do it, but I'm proficient with Java and right now I just want something that works.

The standard way is to use AJAX, but a Java applet will work fine.

If you want to try AJAX, I say go for it. Javascript is simpler than Java, so don't worry about learning a new language. It's still quite elegant, despite (because of?) its simplicity. The only thing that might seem odd is JS's prototype-based inheritance ([2], [3]).

flyingt said:
The problem I'm having is that the applet displays in IE and Chrome, but not in Firefox. In Firefox, it loads but is hidden. I know the applet loads in Firefox because when I set View->Page Style to No Style the applet is visible. When style sheets are on, however, the applet is hidden. It is supposed to be inside the bright green box on the left hand side. Any help would be appreciated. Thank you.

I'm still trying to hunt down the exact cause, but the styling that's producing the effect is the "overflow: auto" on the game div. (Aside: use an external rather than inline stylesheet.) The simplest solution is to make the side-panel use fixed positioning, which (given that you've given it fixed position in all but styling) makes the most sense.

On the topic of positioning, why do you have overflow hidden on <body> while the game div has fixed positioning and overflow of "auto"? Seems unnecessarily complex.

flyingt · Dec 31, 2009

misson said:
The standard way is to use AJAX, but a Java applet will work fine.

If you want to try AJAX, I say go for it. Javascript is simpler than Java, so don't worry about learning a new language. It's still quite elegant, despite (because of?) its simplicity. The only thing that might seem odd is JS's prototype-based inheritance ([2], [3]).

I'll look into this. I've been meaning to learn AJAX or JQuery, so I will after I've done more with the page.

misson said:
I'm still trying to hunt down the exact cause, but the styling that's producing the effect is the "overflow: auto" on the game div.

How is this possible? The applet isn't in the game div.

misson said:
(Aside: use an external rather than inline stylesheet.) The simplest solution is to make the side-panel use fixed positioning, which (given that you've given it fixed position in all but styling) makes the most sense.

A very good idea. I don't know why I didn't think of that. Thanks.

misson said:
On the topic of positioning, why do you have overflow hidden on <body> while the game div has fixed positioning and overflow of "auto"? Seems unnecessarily complex.

It is this way because when overflow wasn't set to auto, Firefox displayed two scrollbars on the right hand side. I'm sure making your suggested fix with the sidebar will help clean-up the webpage.

Thanks for your time and consideration. I probably will learn AJAX soon, but if you have any more ideas about making the applet display, I'd be glad to know for future reference.

misson · Jan 1, 2010

flyingt said:
misson said:

I'm still trying to hunt down the exact cause, but the styling that's producing the effect is the "overflow: auto" on the game div.

Click to expand...

How is this possible? The applet isn't in the game div.

That's what's so curious. I suspect a browser bug.

flyingt said:
It is this way because when overflow wasn't set to auto, Firefox displayed two scrollbars on the right hand side.

I meant why the whole set-up. If the game div didn't have fixed positioning, you wouldn't have two scroll-bars, hence no need to set overflow on <body> to hidden. You could simply rely on <body>'s scrollbars.

flyingt said:
if you have any more ideas about making the applet display, I'd be glad to know for future reference.

Setting the sidebar to fixed positioning is the fix; in addition to being a better style implementation, it causes the applet to display.

marshian · Jan 1, 2010

I have a problem with your problem. The problem is, I don't have the problem!
Using Firefox 3.5.6 on Ubuntu 9.10, the applet displays just fine.
That makes it obvious it's a browser bug, and specific to your version or operating system.
If I were you I'd file a bug report with Mozilla, in order to get it fixed in a future version. The link is https://bugzilla.mozilla.org/enter_bug.cgi, and don't forget to mention the problem doesn't exist on my configuration, it might help them trace the bug faster

Edit: and make sure your Firefox is fully updated!

misson · Jan 1, 2010

marshian said:
Using Firefox 3.5.6 on Ubuntu 9.10, the applet displays just fine.

Flyingt already changed the positioning, so the display problem is gone. What happens if you change the positioning of the sidebar div (body > :nth-child(2)) to "absolute" using Firebug?

marshian said:
That makes it obvious it's a browser bug, and specific to your version or operating system.

Thanks for reminding me. I forgot to report I tested on FF 3.5.6/Vista. Flyingt, what are your browser and OS versions?

marshian · Jan 1, 2010

misson said:
Flyingt already changed the positioning, so the display problem is gone. What happens if you change the positioning of the sidebar div (body > :nth-child(2)) to "absolute" using Firebug?

Ooh, I didn't realise he already fixed it x)
Adding

Code:

body :nth-child(2) {
 position: absolute;
}

Moved a couple of elements, causing a few graphical glitches to appear in the game area, but the applet remains visible at all times.

misson · Jan 1, 2010

marshian said:
Adding

Code:

body :nth-child(2) { position: absolute; }

Moved a couple of elements, causing a few graphical glitches to appear in the game area, but the applet remains visible at all times.

Sorry, I had the wrong element (should have looked at the source first; the 2nd child is a <br/>). The sidebar is body :nth-child(4). Note you'll have to add the style inline, otherwise the current inline style will override your changes.

Edit: nevermind about checking. The page style has changed too much to re-introduce the original bug.

flyingt · Jan 2, 2010

misson said:
Thanks for reminding me. I forgot to report I tested on FF 3.5.6/Vista. Flyingt, what are your browser and OS versions?

I have Windows 7 and Firefox 3.5.6

Thanks to both of you for your prompt and useful feedback.

marshian said:
Moved a couple of elements, causing a few graphical glitches to appear in the game area, but the applet remains visible at all times.

There are definitely a lot of things that need work. With only two people working on it, it can take a long time to fix any one thing.

Applet loads but is hidden in Firefox

flyingt

New Member

misson

Community Paragon

flyingt

New Member

misson

Community Paragon

marshian

New Member

misson

Community Paragon

marshian

New Member

misson

Community Paragon

flyingt

New Member

Free Web Hosting

Our Community

Legal