Dropdown Menu Fix for Opera
Yesterday I almost pulled out all of my hair trying to make dropdown menu on one of our sites to work in Opera 7.54. Browser version sniffing instead of feature testing or object detection is what I hate the most, but I had to do it and at the end it serves its’ purpose well.
My favorite method of making dropdowns is to create nested unordered lists and then switch
none values for the
display property with
I usually set CSS rule
position: relative; for containing list item and
position: absolute; for the nested list. But, hey! This doesn’t work in Opera 7.54 (and maybe in some earlier 7.x versions)… Filtering of CSS for different browsers is in my job description and I’m facing it almost every day, but it’s always something new which drives me nuts at times.
These are some browser’s speciffic oddities:
- In Firefox and Opera 8 a combination of
display: none || block;makes flash movie in the header jumps and flicker, so I have to use
visibility: hidden || visible;switching.
position: absolute;works fine.
- In Internet Explorer for Windows it’s all the same if you switch
position: relative;shifts content underneath for the height of the drop down, so it must be
- In Opera 7.54 it also works fine with both
displayvalues switching, but Opera 7.54 has some rendering issue when nested list is absolute positioned and a few background-images overlap. Crap!
The summary is—we need
position: absolute; for FF, Opera 8 and IE, and
position: relative; for Opera 7.54. The
visibility property value switching should work in all of the mentioned browsers.
How to Set Different Rules for Opera 7.54
Since there’s no proven CSS filtering for Opera version 7.x only, I had to do the User Agent sniffing with PHP. I already introduced server-side CSS parsing. In parsed CSS file, I can dinamicaly write CSS rules, depending on a given conditions, like the following generic example:
Remember, User Agent sniffing is not 100% reliable, but in this case, there was no alternative. Here are some of the predefined User Agent values in Opera 7.54:
|Identify as||User Agent Value|
|Opera||Opera/7.54 (Windows NT 5.1; U)|
|Mozilla 5.0||Mozilla/5.0 (Windows NT 5.1; U) Opera 7.54|
|Mozilla 4.78||Mozilla/4.78 (Windows NT 5.1; U) Opera 7.54|
|Mozilla 3.0||Mozilla/3.0 (Windows NT 5.1; U) Opera 7.54|
|IE 6.0||Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 7.54|