Posts tagged safari
Maximum Z-Index Values
0After my previous battle with Internet Explorer 6 & 7 I ran in to yet another z-index bungle. This time it was with the advertising banners on our site. Our drop-down menus from our navigation were getting overridden by a few pesky advertisements. I increased the z-indexes on the elements conservatively and didn’t see a change. I then thought it was something imbedded within the flash and asked our resident flash expert for her opinion and she found an obscure fix that would keep SWFs from overlapping HTML.
To keep a swf from overlapping html, set the wmode parameter to “transparent”.
Example: recipe-widget at http://www.foodandwine.com/holiday-guide
<param name=”wmode” value=”transparent”>
See how the New Year’s dropdown overlays the widget.
Other examples and discussion:
http://www.aleosoft.com/flashtutorial_menuoverlap.html
http://www.codingforums.com/showthread.php?t=156189
This wouldn’t be something we could easily fix as the advertisements are served from an advertising partner and we would have to have the partners contact the advertisers to fix their flash advertisements. We were about to give up and deploy without a fix, as the advertisement only showed up very ocassionally on a few pages, when someone from the marketing side sent an email asking us to bump up the z-index even higher and see how that worked.
I bumped them up to about z-index: 9999; but no dice. Finally, I did what I probably should have done at the beginning and just did into the gabillion lines of code of the offending advertisement and look for z-indexes being specified. And ‘lo and behold, they were setting their ad to 1000000. Hmm. Thanks, guys!
Obviously, they wanted their advertisement to show up above anything else on the page, but that becomes a problem for us when our users wouldn’t be able to navigate the site.
I decided that so this doesn’t happen again, why not just set the z-index to the largest z-index possible? After playing with Firebug in Firefox, I found that yes, indeed there is a maximum z-index and Firefox will automatically truncate the value if the maximum is exceeded. After a little more research, the maxmum is different and what happens when you exceed the maximum depends on which browser you use.
It seems Eric Puidokas did all of the research for us and came up with this nice table explaining the maxmum values and what happens if you exceed those values.
I made a simple test page to find these limits and figure out what happens when you exceed them.
Browser Max z-index value When exceeded, value changes to: Internet Explorer 6 2147483647 2147483647 Internet Explorer 7 2147483647 2147483647 Internet Explorer 8 2147483647 2147483647 Firefox 2 2147483647 *element disappears* Firefox 3 2147483647 0 Safari 3 16777271 16777271 Safari 4 2147483647 2147483647 Opera 9 2147483647 2147483647
The “lowest” maximum value is “16777271″ but as it’s a outdated browser, I went with the common value of “2147483647″ and then “2147483646″ for the child element per my previous post.
I’m not sure if there is etiquette when it comes to using z-indexes on a page, and that’s why I was originally hesitant to make the z-index some outrageous number like “1000″ (only to find out other people seem to yawn at “1000000″) but I hope with this change, we won’t have to deal with drop-down menu z-index problems ever again.
Helping 1Password with Pesky Form Fields
0For the past few months, I’ve been having problems with one pesky site that stopped working with 1Password’s auto-submit from both Safari’s and Firefox’s tool toolbar quick menu. I am assuming that the web site had recently been redesigned and the form had changed. I did what I usually did in these situations — delete the login information from 1Password and try to resubmit the form and re-save the log in information.
However, this time it didn’t work, 1Password would not even save the log in information for me ever again!
Having better things to do with my time, I dealt with the minor inconvenience for months but after having some annoying down-time at work to kill, I flexed my Google-fu and found a quick work-around for troublesome form fields that don’t want to auto-save and don’t want to auto-submit.
There is a feature that I had forgotten about, after you fill in a form, you can right-click on the form and a menu will pop-up with the option for “1Password” and under that menu will be “Save Login…” Select that option and your friendly “Save Login in 1Password” dialog will pop-up. Here, you can save your log in normally. If you’re lucky, you will be able to auto-submit again. If not, you will at least be able to have the form auto-fill and you’ll have to do the heavy lifting of just clicking the submit button.
Here is 1Password’s guide to “Website Login Issues” that may be able to help you further if you’re still having problems.
Making 1Password Work with a Proxy
I’m a huge fan and proponent of password management software and especially 1Password by AgileWebSolutions. Yes, it’s paid software and there are alternatives but I use a Mac and I like eye candy (plus I got it for free from a MacHeist a while back, so nyah.)
When I started working at my new job, I wanted to import all of my logins in case I needed them at work. I quickly found that working at a credit card company meant there were a lot of limitations to what you were and were not allowed to do. One of these things was that I couldn’t log in to Dropbox (where I keep my encrypted 1Password keychain for syncing across machines) and the second was that you needed to go through a proxy server in order to access anything on the internet.
The Dropbox I could live without, I would just have to manually sync my keychain every once in a while for passwords I might reset. The proxy thing was a problem though.
Every time I opened FireFox or Safari meant I had to authenticate against the proxy server. In FireFox this was especially a problem because every time I opened FireFox with tabs already open from a previous session, FireFox would prompt for my proxy password for each tab that was open to an external web site. This meant almost a “ba-jillion” window prompts.
1Password keeps track of passwords based on the domain, but because it was a proxy password, depending on what page it was trying to load, the “domain” 1Password would “pick up” was usually the wrong one. Obviously, I didn’t want to have to enter my proxy password manually every time (why would I have the password manager in the first place then?!)
The work around for this is to open up 1Password, create the entry for your proxy server username/password and where it says “Display: Always” there is an additional entry at the end of the drop-down that says “Show in Every HTTP Auth Prompt.” That’s the golden ticket!
Now, when you open FireFox, (warning: it still opens up a million authentication windows but you only have to fill out one) in the 1Password dropdown to fill out the prompt you will see your proxy option. You may have to refresh the pages if it didn’t pop up the auth prompts in order but that was an acceptable price to pay for me to have both 1Password and FireFox.
A “gotcha” to watch out for is in Safari. I noticed that if I reset my browser settings (like, everything blown away, settings, cookies, etc) it lost the proxy server authentication. What you have to do is disable 1Password as a plugin in Safari and restart Safari. A single prompt should pop up asking you for your proxy username and password and will ask you if you want to save it to your keychain. Click the box and submit. When you enable 1Password as a plugin again you should be golden and won’t have to input your proxy password ever again.
I hope this helps someone out there that had the same problem! Took me a good week or so to get everything running smoothly.
