Fix footer menu position

[farzadina]

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)

[Paulie_D]

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?

[farzadina]

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.

[tbwiii]

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

[farzadina]

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

[Paulie_D]

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.

[sallar]

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

[Author]

Posts