Another hack for IE6
It's no secret that ensuring cross-browser compatibility is one of the main headaches of any web developer. Recently, there was a problem with drawing a horizontal pop-up menu for the Joomla template, which would work simultaneously in the latest FireFox, Opera, as well as in IE7 and IE6.
UPD: this topic does not pretend to be novel or in principle convenient as described in it. Just another fix.
The menu itself is rendered using the notorious suckerfish.php script.
The essence of the problem was that IE6 does not support the: hover property in CSS.
To ensure cross-browser compatibility
, the following was invented: 1) edit succerfish, php as follows: you need to find the function function mosShowListMenu ($ menutype) and replace the line in it
when you hover over it with the mouse, it will change the class name to “over”, which we will use further in CSS for IE.
Next, for IE6, we write css in which we take into account that when you hover over an element, you need to operate with the .over class like this
UPD: this topic does not pretend to be novel or in principle convenient as described in it. Just another fix.
The menu itself is rendered using the notorious suckerfish.php script.
The essence of the problem was that IE6 does not support the: hover property in CSS.
To ensure cross-browser compatibility
, the following was invented: 1) edit succerfish, php as follows: you need to find the function function mosShowListMenu ($ menutype) and replace the line in it
array( "", "- " , "
", "
" ),
on
save, put in the root of the template. Now every itemarray( "", "- " , "
", "
" ),
Next, for IE6, we write css in which we take into account that when you hover over an element, you need to operate with the .over class like this
.........
ul.nav li.over {
background-image:url(../images/navigation_back.jpg);
position:relative;
}
.........
ul.nav ul li.over {
border:1px solid white;
}
.........
ul.nav li.over ul {
visibility: visible;
}
ul.nav li.over ul li ul {
visibility: hidden;
}
ul.nav li ul li.over ul {
visibility: visible;
}
ul.nav li ul li ul li.over {
border:1px solid white;
}