SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 Menu Wrapping

    I have a bug with some css horizontal menus wrapping in IE6.

    On IE7, FF2 and Safari, the menu will appear on one line no matter what size the browser window is. However in IE6, the menu items wrap to another line. Try viewing this page and shrinking the window and you'll see what I mean:

    http://www.lib.uwo.ca:777/themes/wes.../template.html

    Does anyone know how to prevent the menus on the top and bottom from wrapping? I tried a few options with whitespace:nowrap but it did not work.

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not all browsers can handle percent decimals. Also the last item can need to hide odd pixel overflow. If you try this settings I think it will work:
    Code CSS:
    ul {
    	border-right: 3px solid #609;
    	overflow: hidden;
    }
     
    li {
    	width: 20%;
    }
     
    a {
    	border-left: 3px solid #609;
    }
    Last edited by Erik J; Mar 14, 2008 at 10:31. Reason: Missed to type in the li.last rule, see next post.
    Happy ADD/ADHD with Asperger's

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Missed to type in the li.last rule in the code above.
    Code CSS:
    li.last {
    	margin-right: -10px;
    }
    Happy ADD/ADHD with Asperger's

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A few more problems

    Thanks for the quick reply. That solved the problem, however I've noticed a few other problems appear:

    1. in IE 7, the last <li> item in the footer navigation wraps from time to time as you resize the window

    2. in Firefox, the drop down menus disappear when you try to go over them sometimes.

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rgraves View Post
    1. in IE 7, the last <li> item in the footer navigation wraps from time to time as you resize the window
    2. in Firefox, the drop down menus disappear when you try to go over them sometimes.
    1. Did you apply the li.last neg.margin-rule in the footer also?
    2. I can't see menus disappear in my FF.
    Happy ADD/ADHD with Asperger's

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I forgot to put the .last margin part in for the footer so that fixed it in IE7. I plan on implementing this into Drupal and upon further thought, since Drupal automatically generates the menus, I don't think I'll be able to specify a class for the last LI tag.

    Is there another way this can be accomplished to avoid using a class for a specific LI?

    The firefox issue still happens for me but not consistently. If you hover over the menus and try to go down and highlight one of them it disappears sometimes. Doing this multiple times should produce the disappearing menu problem every now and then.

    Rob

  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there another way this can be accomplished to avoid using a class for a specific LI?
    I'm afraid not as the ul-width is fluid. And without a marginal space for the cumulated odd pixels, you have to avoid positive rounding errors by a decimal lesser item-width. No big deal I think.
    Happy ADD/ADHD with Asperger's


Bookmarks

Posting Permissions

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