July 30th, 2012, 01:48 PM
Menu wrapping issue
I am adding a blog on the site strategicbites dot com. On my computer (Win 7, FF 14.0.1) the navigation buttons align and link to the correct pages.
On my client's computer, the Blog menu button is appearing underneath the Who We Are menu button.
Can't figure out why. Does anyone see the problem?
July 30th, 2012, 04:49 PM
Which browser and OS is your client using?
My first thought was that it was a sizing issue, but I can't recreate it even at 800x600.
July 31st, 2012, 04:52 PM
Win 7, Firefox 14.0.1. Same as me. Hence the confusion....
August 2nd, 2012, 04:05 PM
Still can't figure this out...can anyone help?
August 3rd, 2012, 06:06 PM
I expect it may be an issue of different font-sizes. If you increase the font-size, the menu breaks like you say.
One approach would be to use display:table-cell on the list-items instead of floating them. (IE versions before 8 don't support that though, so would need a workaround if you support them.) Additionally, you might want to use text-align:center and reduce the horizontal padding a little.
August 6th, 2012, 02:08 PM
Thanks, but I don't think that's it either.
The client says that the menu looks fine on the Blog page, but not on any other page. The CSS for the menu is exactly the same for each page, which tells me that it's something else.
Can those who have visited the site please post whether the menu looked right to them (all page links lined up properly) or not (Blog link bumped underneath)?
August 6th, 2012, 02:35 PM
The blog page is mixing HTML5 with XHTML 1.0 Transitional. You should pick one and be consistent. Perhaps one of the resulting errors makes the menu look as you intend on that page.
The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).