Grow your CSS skills. Land your dream job.

Fix footer menu position

  • # December 5, 2012 at 7:54 am

    I have a colorful menu in my blog’s footer.
    It don’t look good in Safari. (when I check with IPad)

    **[Here is the problem](http://imgs.ir/imgs/201212/IMG_0843.jpg “problem image”)
    & [Here is it's link](http://baghbagho.com/#footer “Baghbagho”)**

    I want to know how to fix that… (Look for a better CSS structure than what I made for it)

    # December 5, 2012 at 8:16 am

    When I first loaded up the site in Safari (desktop) I got a flash of that issue but it corrected itself.

    I wonder if this is a meta viewport issue? Do you have this in the head of your pages?

    # December 8, 2012 at 9:01 am

    No, I’m sure that I don’t have that meta code in my theme.
    Also the problem that some objects change position after the page load, is held in common in all of the browsers, but in the Safari, it don’t change position after the page load.

    # December 8, 2012 at 9:42 am

    I think @Paulie_D is suggesting that you should add that snippet inside your “head” tag and see if that fixes your problem.

    # December 12, 2012 at 9:21 am

    Oh,
    No, that didn’t change anything. I added that meta code and you can check it on the header now but no change.

    # December 12, 2012 at 10:53 am

    The menu/links css seems a little odd with padding & negative margins. Seems to me that it would be easier to set the width of each li to 12.5% (1/8) [perhaps with box-sizing:border-box] might be the way to go.

    # January 5, 2013 at 9:16 am

    Farzad I think It’s better to use `display: table` for the `ul`, and `display: table-cell` for the `li`’s. This will force the browser to render your menu like its inside a table and the items will adjust themselves and you don’t need to worry about width anymore. e.g: apple.com top nav

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".