FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

CSS mismatch IE <> Firefox

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


-TomJ-
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.

In Internet Explorer, the menu icons are shown one line above the menu texts.

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.

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:
Code:

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?
eepman
I believe that because you used set widths for your boxes, in ie the text is not completely equal and the text is pushed to the next line. If you just increase the widths from 153 then it should fix it. I hope.
eruct
I would try eepman's sugestion and lose the width: 153px. I don't know why you define a width.

Also, the reason that your links move to the right, change color and get and under/ overline is because you have that in your style sheet:
Code:
text-decoration:underline overline;
text-indent:26px;


So, even if their is no icon in front of them they will still act like that.

Let us know if things still aren't working for you...
-TomJ-
eruct wrote:
I don't know why you define a width.

I remember why those widths are there. The original template used frame-like images as background, to imitate a button. I removed those images, but not the width definitions.

eruct wrote:
Also, the reason that your links move to the right, change color and get and under/ overline is because you have that in your style sheet: ...

The color change and text-decoration are indeed as intended. The point is that when I hover over an iconless item, there is an inexplicable reaction of other menu-items (the ones with an icon).
Look in image 2 at the News menu item: it is shown over two lines.
Now I hover over the Search menu-item (see image 3), and the News menu-item is shown on one line.
The Search item should underline and overline and be yellowish, so that is OK. But why is there an action with the News and Home items?
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.