www.webdeveloper.com
Results 1 to 11 of 11

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

  1. #1
    Join Date
    Apr 2010
    Posts
    24

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

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

  2. #2
    Join Date
    Nov 2010
    Posts
    13
    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:
    Code:
    span {
    	display: block;
    	float: right;
    }

  3. #3
    Join Date
    Apr 2010
    Posts
    24
    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.

  4. #4
    Join Date
    Nov 2010
    Posts
    13
    Then put this arrow just as part of <li> background!

  5. #5
    Join Date
    Apr 2010
    Posts
    24
    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?

  6. #6
    Join Date
    Nov 2010
    Posts
    13
    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!

  7. #7
    Join Date
    Apr 2010
    Posts
    24
    Alright. Thanks.

  8. #8
    Join Date
    Apr 2010
    Posts
    24
    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?

  9. #9
    Join Date
    Nov 2010
    Posts
    13
    Why can't you? Make another red(highlited) background picture and load it on a:hover instead of changing background color.

  10. #10
    Join Date
    Apr 2010
    Posts
    24
    Ah thanks!

  11. #11
    Join Date
    Nov 2010
    Posts
    15
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles