float: right causes list elements to be bigger in IE 8?

[Riothamus]

Hello everyone.

I'm trying to create a CSS pull-down menu for my site using PHP includes. The menu is on the left-hand side of my page, and when you move the mouse over certain categories, a sub-menu is supposed to appear.

I've got pretty much everything coded using <li> elements with special CSS attributes attached to them. Everything works fine in Firefox, but there's one problem in IE. For those menu options which are supposed to have sub-menus, I want there to be an arrow at the edge of the menu option to indicate that sub-menus will appear if the user moves his mouse over them. I achieved this in Firefox by using the 'float: right' property. But in IE8, this enlarges the entire menu option, and the arrow appears a line too low.

If it's not clear what I mean, here's the page I've been testing it on: http://www.heroofcamelot.com/literat...t_versions.php

This page displays correctly in Firefox, but not IE. In Firefox, every menu option is exactly the same height, whereas in IE, the arrows have caused those menu options to be too large, and the arrows are only displayed below the text that they're supposed to be on the same line as.

My code for adding the arrows was simple. For the first menu option, for example, this is my code:

<li><a href= "/legend"/>The Legend<font size = "3pt" style = "float: right">&rarr;</font>

In Firefox, this causes the arrow to be displayed at the right end of the list element, which is what I want. But in IE, it adds an extra line and displays it there. I was just wondering if anyone has encountered this bug when dealing with CSS lists, and if there are any known fixes for the problem. Thanks in advance.

[EMaks]

Try to use span tags instead of font tags. I've just tried it, I have ie9 installed and it has problems with your code. But with span tags everything is ok. Maybe in ie8 or earlier it does't work. For span tags put:

span {
	display: block;
	float: right;
}

[Riothamus]

Just tried it and it didn't work. I tried changing the display to inline or removing it completely too, nothing worked. But thanks for the suggestion.

[EMaks]

Then put this arrow just as part of <li> background!

[Riothamus]

Is there a way to do that with code? Or do you mean make it into an image and use it as the background of the li element?

[EMaks]

Yes, this is exactly what I mean I think there is a way to do it with code, but now I think background solution is the easiest, but not perfect!

[Riothamus]

Alright. Thanks.

[Riothamus]

Actually, now that I try to do it, I realize it can' be done, because I need the menu option to highlight in red when the mouse is over it, and you can't do that with a graphic, can you?

[EMaks]

Why can't you? Make another red(highlited) background picture and load it on a:hover instead of changing background color.

[Riothamus]

Ah thanks!

[drymsza]

you could also make the menu lists position relative make the arrow within a inline element like <em> for instance and make the <em> position: absolute; . You can then simply position it whever your want with top: 3px; right: 3px; for example which would make it 3 pixels from the top and 3 pixels from the right. Wouldnt have a problem with the overlapping elements which pushes it down since absolute eliminates that.