CSS Issues With Firefox on XP ??

[mumford1]

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

[ralph.m]

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

[imillard]

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.

[Victorinox]

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.

[mumford1]

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

[Paul O'B]

Something like this:

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

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

[mumford1]

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

[ralph.m]

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

.menu li:hover ul {display: block;}

You'll also need to remove overflow: hidden; from here for the sub lists to be visible:

.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;
}

[mumford1]

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

[Paul O'B]

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.

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

[Paul O'B]

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.

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

[ralph.m]

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:

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

[mumford1]

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

[ralph.m]

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

[mumford1]

Thanks for all your help guys!

[Paul O'B]

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