#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    4
    Rep Power
    0

    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?



    Thank you!!!
  2. #2
  3. The Queen of Typos
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2004
    Location
    San Clemente
    Posts
    1,471
    Rep Power
    191
    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.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    4
    Rep Power
    0
    Win 7, Firefox 14.0.1. Same as me. Hence the confusion....
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    4
    Rep Power
    0
    Still can't figure this out...can anyone help?

    Please?

    Thanks!
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    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.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    4
    Rep Power
    0
    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)?

    Thank you!!!
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    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).
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo