Click to See Complete Forum and Search --> : CSS mismatch IE FF


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?

Rossario123
08-29-2006, 08:02 PM
you might wan't to correctly space your id's and class definers..

i.e


this

a.mainlevel#active_menu{
display: inline;
}

should be

a.mainlevel #active_menu{
display: inline;
}

TomJ
08-30-2006, 02:34 AM
I edit my css using TopStylePro. TSP applies the formatting of the IDs and classes. I hesitate to think that my problem is caused by this incorrect spacing. But then again, I may be wrong. I'll give it a try later ...

Rossario123
08-30-2006, 11:32 AM
it is more than likely not your problem but it will cause more problems futher down the road

i suggest learning css and hand coding it rather than using a program to format such a simple language for you, because you will have fewer errors down the road of your site..