{"id":88,"date":"2005-04-20T12:54:57","date_gmt":"2005-04-20T10:54:57","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2005\/04\/20\/dropdown-menu-with-fix-for-opera\/"},"modified":"2008-04-25T03:36:10","modified_gmt":"2008-04-25T01:36:10","slug":"dropdown-menu-with-fix-for-opera","status":"publish","type":"post","link":"https:\/\/www.maratz.com\/blog\/archives\/2005\/04\/20\/dropdown-menu-with-fix-for-opera\/","title":{"rendered":"Dropdown Menu Fix for Opera"},"content":{"rendered":"<p><img loading=\"lazy\" class=\"alignleft\" src=\"http:\/\/www.maratz.com\/img\/sshots\/dropdown_fx.gif\" alt=\"dropdown screenshot\" width=\"188\" height=\"113\" \/> Yesterday I almost pulled out all of my hair trying to make dropdown menu on one of our sites to work in <a href=\"http:\/\/www.opera.com\/\">Opera 7.54<\/a>. Browser version sniffing instead of feature testing or <a href=\"http:\/\/developer.apple.com\/internet\/webcontent\/objectdetection.html\">object detection<\/a> is what I hate the most, but I had to do it and at the end it serves its\u2019 purpose well.<!--more--><\/p>\n<p>My favorite method of making dropdowns is to create nested unordered lists and then switch <code>block<\/code> and <code>none<\/code> values for the <code>display<\/code> property with <code>:hover<\/code> <a href=\"http:\/\/www.w3.org\/TR\/REC-CSS2\/selector.html#dynamic-pseudo-classes\">pseudo-class<\/a>. This of course doesn\u2019t work in IE without JavaScript, because I use JavaScript to <a href=\"http:\/\/www.alistapart.com\/articles\/dropdowns\">add and replace a class attribute<\/a> for the hovered element in IE.<\/p>\n<p>I usually set CSS rule <code>position: relative;<\/code> for containing list item and <code>position: absolute;<\/code> for the nested list. But, hey! This doesn\u2019t work in Opera 7.54 (and maybe in some earlier 7.x versions)&#8230; Filtering of CSS for different browsers is in my job description and I\u2019m facing it almost every day, but it\u2019s always something new which drives me nuts at times.<\/p>\n<h3>Browser Oddities<\/h3>\n<p>These are some browser\u2019s speciffic oddities:<\/p>\n<ul>\n<li>In Firefox and Opera 8  a combination of <code>display: none || block;<\/code> makes flash movie in the header jumps and flicker, so I have to use <code>visibility: hidden || visible;<\/code> switching. <code>position: absolute;<\/code> works fine.<\/li>\n<li>In Internet Explorer for Windows it\u2019s all the same if you switch <code>visibility<\/code> or <code>display<\/code> values, but <code>position: relative;<\/code> shifts content underneath for the height of the drop down, so it must be <code>position: absolute;<\/code>.<\/li>\n<li>In Opera 7.54 it also works fine with both <code>visibility<\/code> and <code>display<\/code> values switching, but Opera 7.54 has some rendering issue when nested list is absolute positioned and a few background-images overlap. Crap!<\/li>\n<\/ul>\n<p>The summary is\u2014we need <code>position: absolute;<\/code> for FF, Opera 8 and IE, and <code>position: relative;<\/code> for Opera 7.54. The <code>visibility<\/code> property value switching should work in all of the mentioned browsers.<\/p>\n<h3>How to Set Different Rules for Opera 7.54<\/h3>\n<p>Since there\u2019s no proven CSS filtering for Opera version 7.x only, I had to do the User Agent sniffing with PHP. I already introduced <a href=\"http:\/\/www.maratz.com\/blog\/archives\/2005\/04\/17\/multi-language-web-site-and-background-images\/\">server-side CSS parsing<\/a>. In parsed CSS file, I can dinamicaly write CSS rules, depending on a given conditions, like the following generic example:<\/p>\n<p>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:<\/p>\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<caption>Predefined UserAgent values in Opera 7.54<\/caption>\n<thead>\n<tr>\n<th>Identify as<\/th>\n<th class=\"value\">User Agent Value<\/th>\n<\/tr>\n<tr>\n<td>Opera<\/td>\n<td class=\"value\">Opera\/7.54 (Windows NT 5.1; U)<\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Mozilla 5.0<\/td>\n<td class=\"value\">Mozilla\/5.0 (Windows NT 5.1; U) Opera 7.54<\/td>\n<\/tr>\n<tr>\n<td>Mozilla 4.78<\/td>\n<td class=\"value\">Mozilla\/4.78 (Windows NT 5.1; U) Opera 7.54<\/td>\n<\/tr>\n<tr>\n<td>Mozilla 3.0<\/td>\n<td class=\"value\">Mozilla\/3.0 (Windows NT 5.1; U) Opera 7.54<\/td>\n<\/tr>\n<tr>\n<td>IE 6.0<\/td>\n<td class=\"value\">Mozilla\/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 7.54<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>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\u2019 purpose well.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/88"}],"collection":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=88"}],"version-history":[{"count":0,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/88\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=88"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=88"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}