float: right causes list elements to be bigger in IE 8?
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.
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:
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.
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:
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.