SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Issues With Firefox on XP ??

    Hi

    Could somebody please help me on this please. I have created a navigation bar http://cre8tivesource.co.uk/test/

    I have tested this on Chrome, Firefox 15 and it looks good to me (WIndows 7)

    My client is saying that the last navigation item (Sejours Linguistiques) is dropping onto a second line. She is viewing the site on a PC using Firefox 15 on XP.

    Is anyone else seeing this problem, and could it be a problem regarding the fact that she is running XP?

    If so is their some kind of fix I could use for this?

    Hope someone can help me, much appreciated.

    Many Thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hm, if the browser is set to zoom text only and you bump it up one notch, the last item drops. Because you've fitted everything to the exact pixel, with no room to breathe, this is a ikely scenario, depending on browser settings and how each browser calculates pixel and so on. I try to avoid making menus so tight for space because of this.

    Maybe you could try the method mentioned here, where the last list item is set to fill the available space:

    http://www.sitepoint.com/forums/show...navigation-bar

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Location
    Northern New Brunswick, Atlantic Canada
    Posts
    44
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This looks like (yet another) Firefox issue. I have viewed your link with FF under Windows 7 and XP. The same thing happens.
    If you zoom in and out (using CTRL and mouse wheel) the top bar keeps changing from the first to second row. This does not happen in IE.

  4. #4
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    As Ralph says, for the list items to fit on one line requires the text to displayed at exactly the same size across all browsers and platforms, which cannot be relied upon. If a user employs the text-only zoom function available in some browsers (e.g. Firefox, Safari), or the browser renders the font slightly wider, or the browser displays a different and larger font, then list items will drop to the next line.

  5. #5
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Many thanks for the responses, but I am having trouble implementing this in my CSS code http://www.sitepoint.com/forums/show...navigation-bar when I make changes it reflects the drop down menus as well.

    Could someone give me some direction?

    Really appreciate it.

    Thanks again

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,514
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Something like this:

    Code:
    .menu li,.menu li a{float:left}
    .menu li.eight,.menu li.eight a {
    float:none;
    display:block;
    overflow:hidden;
    text-align:center;
    }
    .menu li.eight a{
    padding:8px 0;
    }
    (The above is additional code to follow at the end of the css)

    If you don't want IE7 and under support you could probably just use display:table instead.

    e.g.
    Code:
    .menu{
    display:table;
    width:100%;
    }
    .menu li{
    display:table-cell;
    text-align:center;
    }
    .menu li a{
    padding:8px 0;
    }
    Of course you would then need to reset the styles for the nested dropdown lists back to their original.

  7. #7
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    Many thanks for your response, I added :


    .menu li,.menu li a{float:left} .menu li.eight,.menu li.eight a { float:none; display:block; overflow:hidden; text-align:center; } .menu li.eight a{ padding:8px 0; }

    This makes the last item very long (more padding either side than the other links) I am sure this will be commented on.

    I am also struggling to get the drop downs to work again after inserting the new css. (is this a z-index issue?)

    Really appreciate your time with this.

    Many Thanks

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I may be missing something, but I don't see any styles in your CSS to make the sub lists appear. E.g. you need something like

    Code:
    .menu li:hover ul {display: block;}
    You'll also need to remove overflow: hidden; from here for the sub lists to be visible:

    Code:
    .menu {
    margin: 0;
    padding: 0;
    line-height: 100%;
    font-size: 0;
    position: relative;
    z-index: 1000;
    font-family: 'cronos_proregular';
    text-transform: uppercase;
    clear: both;
    overflow: hidden;
    }

  9. #9
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph

    Removing overflow hidden, now has the drop downs showing, any ideas about the last menu item being longer than the others? And making sure that the nav does not drop down on two lines?

    Many Thanks

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,514
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The drop menu was working as I checked locally with the code I added and it seems you have added overflow:hidden to .menu as Ralph pointed out which stops it working.

    Regarding the gap on the last item then the extra gap is to soak up the difference between browsers otherwise you will just have the menu dropping to another line again in some browsers.

    You can inc rease the padding on the other elements slightly to compensate.

    e.g.
    Code:
    .menu li a {
        color: #00381E;
        padding: 8px 6px;
        text-decoration: none;
    }
    But you must leave breathing space as we have already established that browsers will render the same text/font at different widths which will sometimes amount to as much as 20px on the length of a long line.

    One alternative is to use the display:table approach as I mentioned above or indeed change the design so that each menu item can wrap to two lines within the display:table-cell.

    The other alternative is to supply widths for every menu item to make sure it fits exactly in that width and then just use text-align:center on the menu items and no side padding. That will allow each item to have a lot of breathing space on each side and should also cater for a couple of text resizes.

    The biggest mistake in web design is trying to account for every pixel (without using explicit dimensions) and squeezing things into tight spaces where there is no room to move or increase in size without breaking. You should always expect that browsers will show your text wider or smaller than you are seeing it on your computer and cater for that eventuality.

    While it may look nice to have menu items stretch across the page you have to accept the limits of browsers and code accordingly.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,514
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You also need to remove the left and right padding from the last item as shown in my first example or you are just back to square 1.
    Code:
    .menu li.eight a {
        padding: 8px 0;
    }
    If you add padding to that element then you soak up the free space and the menu will drop. It needs no padding because it is centred in the available space.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mumford1 View Post
    any ideas about the last menu item being longer than the others?
    Because the last list item now takes up the remaining available space, I'd suggest maybe adding a pixel or two of left padding to the other list items to even them out a bit.

    And making sure that the nav does not drop down on two lines?
    Try this:

    Code:
    .menu li.eight a{
    white-space:nowrap;
    }

  13. #13
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    Thanks for that and I understand what you are saying, does it render okay for you on Windows 7 Firefox, I also assumed I would have to take out this class that I had on the last menu item:

    .menu li a.last{
    padding:8px 7px;
    text-decoration:none;
    color: #00381e;
    }

    Thank You

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Oops, we are posting over each other. I was assuming your question related to the two words breaking over two lines, which the whtie-sapce rule can help with, although it means the menu might disappear off screen. Ideally, try to keep menu text as short as possible—preferably one word. Is there any chance that the text of these items could be simplified? (I can't read them.)

  15. #15
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all your help guys!

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,514
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mumford1 View Post
    Hi Paul

    Thanks for that and I understand what you are saying, does it render okay for you on Windows 7 Firefox, I also assumed I would have to take out this class that I had on the last menu item:

    .menu li a.last{
    padding:8px 7px;
    text-decoration:none;
    color: #00381e;
    }

    Thank You
    That rule would seem redundant now as the styles are all accounted for elsewhere so you can remove it.

    The menu is working for me in Firefox windows 7 and you have about a 3 character breathing space now which sholud cater for browser differences but of course won't handle resized text..


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
  •