Yet more feedback please

Not open for further replies.
I'm really sorry - you guys must be getting fed up of hearing about my Orchestra project. Truth is, I want this to be really good and I will only achieve that by you good folks picking fault with anything that's not up to par.

The next part of the project is now done ... the orchestra layout. I'll say no more because, if it's going to work for kids it has to be self-explanatory. Let me have it!!! :?

A few minutes later: Darn it ... I've just looked at it in FF and the centre image is jumping down about 5px and left about 2 px. I've no idea why. :cry:
Great idea, but with the hover over the various instrument groups, is it possible to have the new image appear exactly on top of the old one in the same spot? It's a bit disconcerting when it moves off to the left.

Aha! it jumps left or right in IE as well, depending how wide the page is.

It's because your "pop-up" div isn't positioned the same way as the original it's suppsoed to pop-up over. As I shrunk the page I got them to be one on top of the other at 1024 pixels wide I think. My resolution is 1280 x 1024.

Firefox probvably has some other pixels added in padding or margins or whatever.
They definitely need a bit more fun injected into their pages there. Not joking at all, but John's Orchestra site may be just what's needed to stimulate kids' interest.
Move the layoutdiv into the content div just after the img tag and before the


Set the layoutdiv left to 137px and top to 80px.

I'd also move the map and the statcounter code to the end of the file just before the closing body tag.
Very weird!

There is a slight shift for screen width between 895 and 899 pixels, inclusive.

It's fine at 894 and below, fine at 900 and above !
That is weird. I have no idea what might cause it. I suppose the simplest solution would be to ignore it. :) You could add some javascript to reposition the div if the user has FF and the screen width is in that range. Hardly worth all of the extra work though. And, it might be a bug in FF that will be fixed in the next release. That's why I suggest you just ignore it. After all, how many users will ever come to the site with their browser window set like that?
I take your point John however I see it at 1024x768.

My guess is it's because the initial jpg is 585x453 and the subsequent, instrument specific ones are only 455x293. Unless you have a better idea I think I'll blank out the center area of the screen and display the non-highlighted version of the orchestra in the same way as the highlighted versions. This consistency should prevent any shift being noticeable. I've tried this in FF and it works fine (although I have to figure a way of getting it displayed first time around). However in IE it causes a 'flicker' as you move the mouse. But that's better than what happens now so I can live with that.
JWJ, what is this supsoed to do?
<div id="layoutdiv" style="background: transparent url(layout/conductor.jpg) no-repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; visibility: hidden;">
What should the red stuff be doing?
While you are at it, the validator picks these things out in the css:

* Line: 163 Context : #footer

Property colour doesn't exist : black
* Line: 182 Context : .menu a

Invalid number : float center is not a float value : center
It should be color not colour :lol:

Then the html validator burps on this:
Line 40 column 95: required attribute "ALT" not specified.

...GHT="453" BORDER="0" USEMAP="#layout">
<div id="layoutdiv" style="background: transparent url(layout/conductor.jpg) no-repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; visibility: hidden;">
That wasn't in the original code. I think it may have been added to the html output when the page was generated by php. None of that -moz stuff was in there nor was the scroll or 0%. This could very well be what is causing that little shift in FF.
Thanks. I've sorted the first two but I haven't done the ALT tag. The validator should burp on all the Area tags also but I'm hung up on trying to fix the screen wobble first.
I don't know where you are seeing that code, Christina. Here's what I see when I do a view source.
<div id="layoutdiv"></div>

Point the mouse at any instrument and see where it sits in the Orchestra
Not open for further replies.