TomJ
08-29-2006, 05:46 PM
I am creating a site using Joomla, and am in the process of modifying a template to make it work the way I want it to.
In Joomla there is an option to have menu items preceded by a specific icon. I want to use that option, but I can't get it to work properly in IE.
In Firefox, the menu icons are displayed correctly, and when hovering, the menu text changes to the desired colour.
http://litz.nl/temporary/SD01_Firefox.gif
In Internet Explorer, the menu icons are shown one line above the menu texts.
http://litz.nl/temporary/SD02_IE_rest.gif
But - this is the funny, incomprehensible part - when I hover over the menu texts that I haven't yet defined an icon for, the items that do have an icon, change into icon plus text on one line, as I am trying to achieve.
http://litz.nl/temporary/SD03_IE_hover.gif
I would need to adjust some margins, but I'll manage that. When I hover over an item with an icon, the text gets the highlight clolour, and moves to the indented position that the non-icon texts get when hovering.
The css that rules this section contains the following definitions:
a.mainlevel#active_menu{
display: inline;
}
a.mainlevel#active_menu:hover{
color:#999;
text-decoration:underline overline;
background-color: transparent;
display: inline;
}
a.mainlevel:link,a.mainlevel:visited{
background-color: transparent;
color:#B30000;
font:bold 12px/26px Verdana,Arial,Helvetica,sans-serif;
text-align:left;
text-indent:10px;
vertical-align:middle;
width:153px;
}
a.mainlevel:hover{
color:#FC0;
font:bold 12px/26px Verdana,Arial,Helvetica,sans-serif;
height:26px;
text-align:left;
text-decoration:underline overline;
text-indent:26px;
vertical-align:middle;
width:153px
}
Anyone with some suggestions?
In Joomla there is an option to have menu items preceded by a specific icon. I want to use that option, but I can't get it to work properly in IE.
In Firefox, the menu icons are displayed correctly, and when hovering, the menu text changes to the desired colour.
http://litz.nl/temporary/SD01_Firefox.gif
In Internet Explorer, the menu icons are shown one line above the menu texts.
http://litz.nl/temporary/SD02_IE_rest.gif
But - this is the funny, incomprehensible part - when I hover over the menu texts that I haven't yet defined an icon for, the items that do have an icon, change into icon plus text on one line, as I am trying to achieve.
http://litz.nl/temporary/SD03_IE_hover.gif
I would need to adjust some margins, but I'll manage that. When I hover over an item with an icon, the text gets the highlight clolour, and moves to the indented position that the non-icon texts get when hovering.
The css that rules this section contains the following definitions:
a.mainlevel#active_menu{
display: inline;
}
a.mainlevel#active_menu:hover{
color:#999;
text-decoration:underline overline;
background-color: transparent;
display: inline;
}
a.mainlevel:link,a.mainlevel:visited{
background-color: transparent;
color:#B30000;
font:bold 12px/26px Verdana,Arial,Helvetica,sans-serif;
text-align:left;
text-indent:10px;
vertical-align:middle;
width:153px;
}
a.mainlevel:hover{
color:#FC0;
font:bold 12px/26px Verdana,Arial,Helvetica,sans-serif;
height:26px;
text-align:left;
text-decoration:underline overline;
text-indent:26px;
vertical-align:middle;
width:153px
}
Anyone with some suggestions?