I've got a web page with two different floating divs (position: absolute) and both contains a flash movie. The two are overlapping and the one below is a lot bigger.
The problem is: on the LAST VERSION of FIREFOX for MACINTOSH (snow leopard) the flash movie on top is impossible to interact with!
Watch yourself (wait for the fullscreen video to close): http://clients.adrime.com/files/campaigns/3509758016/27221/IT_pourfemme.it_index.html
How can I fix this?
Thank you in advance
I know this is an old questions but I thought I'd throw a possible solution that I've come across.
I had a very similar issue as described above. Two SWF movies loaded into a page sitting on top of one another. The top most contents mouse position was always off by a decent margin making the buttons almost unusable.
One of my movies was 1000x650 the other 1200x650. The larger of the two had a left positioning equivalent to around -100px which appeared to be the same offset being seen in the top most movie.
By giving both movies the same left positioning, the issue was resolved. Most annoyingly this only occurred on Firefox on Mac / OSX.
Some other discussions around this subject can be found in the comments here:
http://snook.ca/archives/other/hit_bug_in_fire
It appears to be a consistent bug, I'm surprised it hasn't been addressed.
Related
This is a weird situation. In Xcode's IB, I have a NSTableCellView subclass that I've built. It looks like this:
And when I run the app on my Mac, it comes out exactly as I would expect:
However, if any other Mac runs my app, every text field drops by something between 5-10 pixels:
Notice how the image view on the top right, and the hairline separator remain correctly positioned. This is just the text fields.
My brain balks at solving this because I can't guess what the cause is: my Mac is retina (hence right now the larger-looking image from my Mac) but I spend most of my time developing on a non-retina LED cinema display. I've tested this on three other Macs than my own, and the results are the same; it seems my own Mac is the outlier.
Any guesses as to the cause of this layout discrepancy?
UPDATE: I am using springs and struts to lay out the app. But I also tried using AutoLayout on one of my NIBs in case that was related. But the results were identical.
Found the answer! Turns out I had an additional copy of Avenir installed on my Mac which nobody else had. That Avenir has different metrics associated with it, and once I disabled the non-system-provided Avenir, my Mac is now showing the same screwed-up layout as every other computer does. Yay?
I realize that the title is a long one, but allow me to explain. If you look at:
http://hardincountychamber.org/Chamber-Commerce-Directory.asp
in Firefox 6 (Windows 7 64bit), the white background will repeat until around halfway through the letter 'D' of the full directory, and then disappear after one small move of the mouse wheel, and then resume displaying just a little further down the page. The background just snaps back to displaying. Personally I am baffled as to what is causing it, and in the back-end admin section of this page, the same thing occurs with another repeated background image.
So to duplicate the bug, at the time of this postings, search for the term, "Starbuck" on the page, and then scroll until that listing is at top of your browser, then scroll down slowly, and the white background should just disappear.
Any help would be extremely helpful, though I am going to have to paginate the results of this page for a quick fix, I would rather know what it is that is causing it, and maybe even a potential fix.
If you check, that happens when you scroll the page down by slightly more than 32000 pixels (yep, signed 16-bit integer limit). Things are even worse in Firefox 9, there the background doesn't come back below that boundary. Which sounds pretty close to bug 215055 - except that it cannot be that bug, it has been resolved two years ago. There doesn't seem to be an existing report for the bug you found, it is probably best if you file a new bug, component is "Layout".
I need help explaining to my boss why her design is poor on a client's website. She has no knowledge of the web, and it can be difficult as a web developer working with a woman who is a graphic designer (not even a web designer really). On a current site she has designed, an image bar "needs" to be ~1200px according to her, though it isn't necessary with the content. A quick sketch to illustrate what's going on:
As you see, the banner spills out past the 960px of the content and as wide as 1200px. This creates a horizontal scroll when all the content is viewable within the 960px wide viewport. I need to make this an <img> and not a CSS background because it's a jQuery slideshow that fades from image to image.
I think this is a big problem because a lot of people are going to get a horizontal scroll bar imposed in their browser when they're still able to see all the relevant content. She thinks no one will notice and it'll be fine; I think it's very bad practice and confusing to the end user.
How do I explain the problem to her?
Ask her if she would want to open a brochure to only see that one of the folds was unnecessary as it merely has some header image spilling over into it (but no content).
XXXXXXX|XXXXXXX
XIMAGEX|XIMAGEX
XXXXXXX|XXXXXXX
|
Some | (but
content| this
here | is
| blank)
Point her to Nielsen - on of the most famous and top level web usability experts.
"Horizontal Scrolling" is error #3 in "Top Ten Web-Design Mistakes of 2002" article
Also, point out (not sure if Nielsen does) that vast majority of mice don't have horizontal scroll wheels (that was a point made in comments of an article discussing Nielsen's article).
Also, do the usual UI thing - TEST!
Pick 5 random people who ideally match the desired user profile. Ask them to use the mock-up with and without warning and observe which one's easier/faster (and ask, but also obseve without asking)
Hmm. It sounds like you guys need a requirements analyst to step in the middle here. Deciding on a broswer specification & resolution that you'll conform to is a fair thing to ask, I think. Just assuming that 'most' users will have wide screen is not enough for most apps. Seems like she'd be hard pressed to explain why she can't redesign her banner to be smaller & fit the desired size.
I think that user will absolutely notice the horizontal scroll bar and be annoyed by it. Because it's not something most users are used to seeing (can't think of any major sites that have one), they'd have (in effect) learn something new to use your site, which is not good. They should be able to look at a site and be able to use it right away, not spend a few seconds figuring out that the scroll bar doesn't show you any new content, just the additional graphics from the header - those few seconds are where you lose people.
I wonder also, if there's any section 508 guidance on horizontal scroll bars. That may not matter to you guys, but I'm developing gov't sites, so 508 is a big deal for us day to day. If you've got a user using just a keyboard or a screen reader, that scroll bar is more than just annoying.
Two points I would make:
NO major website uses horizontal scroll. Not one. This means, regardless of what she considers "good" design, 100% of users will be confused and will probably never see the content off the right side of the screen.
Horizontal scroll is the print equivalent of a fold-out or "centerfold" style-page. Would you make every page in a magazine like this?
People read left to right, top to bottom (or right to left in some countries). Because of this they can read a lot more content before they need to start scrolling as they only have to scroll vertically.
If you introduce horizontal scrolling then the user has to potentially scroll at the end of each line rather than at the end of each page.
Almost everybody has a wheel mouse now, but only a very few people have wheel mice that side scroll. And even fewer people even know wheels can side scroll!
Let her chew on that.
Try these two points to convince her :
Show her some data about most used browsers resolutions (still 20% internet users have 1024x768 screen resolution)
Having some part of the website not visible when the page is loaded is not "user-friendly" (user can miss some critical information)
Can the entire banner and all the component images within it be scaled down to be narrower? (admittedly it woudl also be shorter, may be more difficult to read etc). Then if the face on the right is really important it woudl still be visible... Horizontal scroll is just really really bad. But I guess you (and everyone else) already knew that :)
You should give her examples and show her what she is trying to do. Do you really want to scroll horizontally to get to information on the other side of the page.
http://www.badwebsiteideas.com/horizontal.htm
I noticed StackOverflow appears to be targeting screen resolution widths of 1024px or more. I also checked Amazon, NBC, MSN, & AOL which target more lay users, and they all appear to be targeting the same width.
Is 1024px the current recommended width for web apps targeting the largest cross-section of users who use default monitor resolution/browser size?
Use liquid layout. Then you can easily accommodate everyone from ~800 to ~1600 width, and with a bit more work and care even lower-resolution devices too. This also gives users #1024 some leeway to zoom the page if they find the text too small.
Remember there'll be things like netbooks which don't have the big screens we expect today. You can get away with a horizontal scrollbar, but if you have to scroll the page just to get the main body of text in, you're lost.
Before sounding so condescending, you may want to read up on the modern user base. Netbooks. PDAs. Smartphones. Smartbooks (you do know what those are, being very sophisticated, right?). Programmers who have their screen in portrait orientaton. People who stack their windows side by side. Kiosks.
UPDATE As per conversation with John, I edited the question to change the tenor a bit to reflect his original intent. However, the original paragraph that I wrote is still true- I haven't seen the latest statistics but the days of "90% of users have AxB resultion/window size on their browser" are probably forever gone, what with wide screen laptops and mobile devices. Makes life more exciting for UI designers :)
Having said that, to develop a really usable web site, you need to couple flowing layout with, ideally, ability to use portlets and portal framework (think My Yahoo), so people can choose the page layout most comfortable for them.
make a good use of 960.gs and you will set everything that you need to start a good web site :)
(source: balexandre.com)
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
960 GS it's a lovely start, doing web or images, they have a complete template for almost any good design program (Photoshop, Ilustrator, Fireworks, InDesign, etc) as well a CSS generator and a Grid Overlay to help you with the website.
I use it and it's fantastic! check out the demo
Nettuts has a tutorial and video. WooThemes wrote a post entitled “Why we love 960.gs” and use it as a starting point for their WordPress themes. Spanish speakers can also check out tutorials by Jepser Bernardino and Miguel Angel Alvarez.
Unsophisticated? I think that's a bit of a rude way to describe the unwashed masses. I suppose every one and their dog has a 1024px width monitor now thanks to the likes of dell and others...
The maximum I would consider targeting as my "base" is 1280x1024, but I would be much more likely to go 1024x768.
That said, in my current projects I try to do a liquid layout with a min-width of 800 to accomidate netbooks and usually a max-width of around 1000px (970 usually). Of course, I also have the luxury of designing for myself, so I have the privilege of telling IE6 users that they should upgrade, which makes the liquid layouts much easier to design.
Summary:
Design with your browser's inner dimensions set to 1250x668 to satisfy 92.7% of users.
I like being stats-driven. To this end, W3Schools has a nice Browser Display Statistics page, which they update periodically with new statistics on how common each screen resolution is.
As of January 2015, 92.7% of browsers visiting W3Schools pages were attached to displays larger than 1024x768, though 39.3% of all displays were limited to 768 pixels in height (or lower), mostly due to the 33% of them having 1366x768 displays.
Unfortunately, W3Schools measured screen resolution rather than the inner dimensions used for rendering web page content. It'd be real nice to get stats on users' window.innerWidth and window.innerHeight instead.
Because we don't have these, we have to reserve room for window decorations that may be larger than our own, as well as browser widgets that may further take away from the space dedicated to rendering a web site. Additionally, not all users browse the web in a maximized web browser, though I think we can ignore that if we assume lower-resolution displays will have maximized browsers.
Windows 7 seems the biggest offender at eating up screen real estate, with what I'm measuring as 30-40px for the task bar (I had to search for a screen shot, as I don't run Windows). Firefox with titlebar, menubar, bookmarks toolbar, and status bar eats another 159px while the slimmer modern FF only consumes 64px. Let's use the slim version and assume around 100px of vertical space will be lost. Maximized browsers don't appear to consume any extra horizontal space, so you really only need to account for the scroll bar, but I'd reserve a few pixels for window edges just in case, bringing us up to 30px.
A few years ago (when I did more web design than I do today), I'd size my own browser to an inner size of 800x550 and made sure that most pages would not have scroll bars. Nowadays, it looks like that can be expanded to around an inner size of 1250x668.
You can check your inner size by putting this in your location bar:
javascript:alert(window.innerWidth + "x" + window.innerHeight)
Those values are read-only; you used to be able to run something like this to resize your inner dimensions, but (thanks to abusive advertisers) it no longer works:
javascript:window.resizeTo(window.outerWidth-window.innerWidth+1250,window.outerHeight-window.innerHeight+668)
One parting note: Just because you're assuming a certain size doesn't mean you shouldn't ensure that your site still works at smaller resolutions. The page can be ugly, but it must be functional!
I keep running across this loading image
http://georgia.ubuntuforums.com/images/misc/lightbox_progress.gif
which seems to have entered into existence in the last 18 months. All of a sudden it is in every application and is on every web site. Not wanting to be left out is there somewhere I can get this logo, perhaps with a transparent background? Also where did it come from?
You can get many different AJAX loading animations in any colour you want here: ajaxload.info
I believe the animation came from the Mac OS X loading screen. Here's a similar one with a transparent background:
alt text http://homepage.mac.com/xraydoc/.Pictures/spinner.gif
I think it's just a general extension to the normal clock-face style loading icon. The Firefox throbber is the first example of that style that I remember coming across; the only real difference between that and the current trend of straight lines is that the constituent symbols have been stretched to give a crisper look, moving back to more of a many-handed clock emblem.