Greetings from a bewildered help-seeker . . .
It was pointed out that my links do not function correctly on Firefox (3.5.6) on a Windows (XP) platform. When any link is clicked, the new page is not fully displayed until the mouse is moved! It only affects my center
It is my own personal site at http://www.GraphicConnectionKC.com
I have Googled the bug and found a few other mentions of this phenomenon, but with no solution( offered. I am hoping for a CSS tweak, but Javascript (or whatever) would be fine too.
It is built entirely in HTML and CSS with just a touch of Flash (no table cells or layers what so ever). There are the "pngfix" and "Google Analytics" Javascripts used too.
I thought it may be due to some fairly intense navigation CSS, but even the simple text links on the footer do the same thing:
on "click" the page changes EXCEPT the center
but only in Firefox on a PC . . . . (as far as I know)
Any ideas out here?
I am running out of ideas
Cannot replicate the issue.
Cannot replicate the issue. Running FF 3.5.6 on Win XP the site appears to work fine all links appear to load the center content without any hitch
Validation & replication of issue
Thanks Hugo!
My doc is set at transitional (so I can link outside my site with target: _blank and still validate). Both my HTML and CSS are valid (I'm real anal about valid code)
It is somewhat comforting that you didn't experience it. It does only happen when clicking with an absolutely still mouse, and remaining absolutely still after click.
If your Windows and Firefox are the same, and the mouse is not moved at all, I am totally confused now. My brother noticed it first on his PC. I run a MAC, so I had to observe the problem on my father's PC (which is also Windows XP) and by downloading Firefox (he uses IE) to see what my brother was speaking of.
Windows and Firefox are both so VERY common that I have been real stressed out over this issue.
Also no see
It is somewhat comforting that you didn't experience it. It does only happen when clicking with an absolutely still mouse, and remaining absolutely still after click.
Same as Hugo, I'm not getting the problem either. I also tried setting the links off with just keyboard just in case. That was difficult as I received no visual feedback on where I (my focus) was. Luckily I could see the url at the bottom of the browser... my copy of Safari does not do this though (someone said I have to turn that on...).
This was FF3.5.5 on (if it matters) VirtualBox Windows XP and I also tried it out in K-Meleon (FF2 basically) and while it took a lot longer to load for some reasons, it also didn't have an mouse issues.
Still, that doesn't mean the problem doesn't exist, but it's a weird one I haven't heard of before. Also it sounds fairly likely to be related to some XP setting, or maybe even a mouse setting. Of course, we can't go around telling people to play with their computer settings, so fixing it is understandably a priority.
Two things occurred to me as possibilities:
for the center_div, somehow you might be combining something with the overflow: auto box that irritates some XP setting. Only way to know for sure would be to make a version of your same page with the overflow box set up without overflow and no height.
and if it's also happening in the footer... well this also doesn't sound like the reason either but I noticed you are pulling the footer or some box in the footer up with a negative top margin and then there are links inside... in certain situations I've run into a slightly different issue with footers like that and I ended up needing to add "position: relative;" without any coords to make it "stable" in all browsers. However the problems I ran into were not mouse related... rather, the links wouldn't work at all in FF and Safari/Win.
Another thing you could maybe do is find a page or site that has a similar setup (header, overflow box in the middle, sidebars with abso-po'd links, and a footer pulled up with a neg top margin) and see, on the machines that showed the problem with your site, if those sites experience a similar problem.
----------------------------------------------
I know you didn't ask for any critique of your site but I have to say, it was very very difficult for me to navigate or figure your site out with my default browser setup. Your site is very dependent on the images you use. It was actually easier to go through it with a screen reader than with CSS on and images off (which people do for various reasons). It is possible to have the site looking the way you want but also more friendly to those using stripped-down browsers too.
Also, your alt text was initially confusing... after viewing the page in Windows to check the mouse problem it made more sense.
fancy rule divider graphic
css logo
I couldn't figure out why I'd want to click a css logo, but it really meant "What is CSS?" or "Definition of CSS" which is what I'd use as the alt text. The decorative images shouldn't have any alt text. Who wants to hear "fancy rule divider graphic"? : ) It's like listening through a site and suddenly hearing "the cheese is old and moldy, where is the bathroom". (I love that one as I found it as real alt text for an image from a movie on some site... apparently that's what a character is saying in the scene being shown).
center <div> Overflow
Your Quote:
"you might be combining something with the overflow: auto box that irritates some XP setting."
Hi Stomme!
You were correct!
I REALLY appreciate you having investigated it so thoroughly.
When I remove {overflow: auto} the issue disappears, although it wrecks my site . . .
Many people, including myself, find many sites irritating, in that the navigation disappears when one scrolls down a (long) page, and are full of "back to top" anchors.
That is why I chose this layout, and also liked that it seemed fairly unique and has a very "clean," non-confusing layout.
Concerning the alt tags, I have been adding "alt" to everything so the code validates.
I read many people just put ("") in the tag when they really don't want text there to overcome the validation issue.
I do have another site (which is pending hosting transfer) nested on my site at http://www.graphicconnectionkc.com/overlandtow/ which employs the same layout which does NOT appear to have this same problem.
I may have to "just live with it," not sure what to do at this point.
center <div> Overflow
Your Quote:
"you might be combining something with the overflow: auto box that irritates some XP setting."
Hi Stomme!
You were correct!
I REALLY appreciate you having investigated it so thoroughly.
When I remove {overflow: auto} the issue disappears, although it wrecks my site . . .
Many people, including myself, find many sites irritating, in that the navigation disappears when one scrolls down a (long) page, and are full of "back to top" anchors.
That is why I chose this layout, and also liked that it seemed fairly unique and has a very "clean," non-confusing layout.
Concerning the alt tags, I have been adding "alt" to everything so the code validates.
I read many people just put ("") in the tag when they really don't want text there to overcome the validation issue.
I do have another site (which is pending hosting transfer) nested on my site at http://www.graphicconnectionkc.com/overlandtow/ which employs the same layout which does NOT appear to have this same problem.
I may have to "just live with it," not sure what to do at this point.
You can haz overflow
When I remove {overflow: auto} the issue disappears, although it wrecks my site . . .
Well, this is good, because it points us in the right direction... YES you CAN keep the overflow box, it's a plenty-used technique and removing it was only suggested to see if it was related to the problem.
So now we are going to strip down both sites and see what is different between the two, to find the actual bug. I could do the strip down but since I can't reproduce the bug I can't go further to see what could be causing it. A strip-down removes all extraneous code and most children (you mostly have containers with dummy content where content needs testing). If two stripped-down versions side-by-side don't show the bug on either then you'll need to reintroduce each removed element, one at a time, like people finding a food allergy. One thing I notice right away visually (now that I'm on an everything-on browwser) is that there are no sidelinks on the other site.
Don't give up on it.
Concerning the alt tags, I have been adding "alt" to everything so the code validates.
I read many people just put ("") in the tag when they really don't want text there to overcome the validation issue.
This is exactly what you should do, though when possible you want to make decorative images CSS backgrounds. However since you can't float those, the ones who need to be HTML images for stuff like floating should get an alt="" (this is recommended at WebAIM and I think it's also mentioned in WCAG 2). A screen reader and those using text browsers or even Firefox will simply not have any indication that there is an image there, which is what you want... nobody wants to hear a stream of meaningless junk if they are trying to get to the content of your site (which is not about fancy decorative borders lawlz). The photo of you might be a "content" photo but for the rest, they are decoration.
The point of alt is to let whatever those content images say also impart their meaning to those who cannot, for whatever reason, load those images, or see them. Since decoration isn't content, alt is not necessary except for validation. When alt should be there, it should make sense in the textual content of the site. Why i thought "css logo" made little sense for a link that didn't go to any pages about CSS logos. It went to a page about CSS. So if your site had only text, what you have made that link say?
(as a side note, a recent survey of screen reader users did say that, at least for photos, they did prefer knowing if the image was a "photo of blah" rather than some other text about "blah". I also like knowing what kind of image it is, when it matters, as images are now normally off by default in my Firefox).