Menu tabs overlap in Opera mini simulator

[dubman]

Hi, I'm adapting a site for mobiles using media queries and one of the issues I have is that the menu tabs
overlap in the opera mini simulator http://www.opera.com/developer/tools/mini/. The test page is www.profesornativo.com/e.htm

Any idea on how to stop the overlapping? Thanks.

[RyanReese]

Just a shot in the dark because I don't have a way to test...

But on #navigation a{} try changing it to display:inline-block; and remove the min-width set on it.

[dubman]

Thanks, but that doesn't seem to work. Now I'm trying to find an alternative solution, maybe <ul> list or something...ideally I would like to have a horizontal

menu, in 2 horizontal lines for mobile screens, with 1 horizontal line for laptop screens (using block type backgrounds for each link).

[ralph.m]

It's much better to wrap menu links in an unordered lists anyhow. E.g.

<ul id="navigation">
  <li><a href="http://www.profesornativo.com/test_1.htm">Level test</a></li>
  <li><a href="http://www.profesornativo.com/exercises_1.htm">Exercises</a></li>   
  <li><a href="http://www.profesornativo.com/prices_1.htm"> Prices</a></li>
  <li><a href="#">Pronunciation</a></li>
</ul>

Then float those <li>s left, or set them to display: inline-block. That will be a much more bulletproof menu.

[RyanReese]

And if you still want it centered you can just give that #navigation list, in Ralphs code, a width and margin:0 auto; to center (it will also need overflow:hidden; to contain the floated links now) . That's assuming you go the floating route.

[dubman]

But I hear floats and media queries don't go well together..I have just tried the <ul id="navigation"> idea. The links now appear vertically, but maybe I didn't do it correctly - I will try a few other things. Thanks a lot!

[ralph.m]

You could also try display: inline-block instead to make them go horizontal. Here are some links with more details and examples:

http://www.sitepoint.com/forums/show...58#post4988458
http://pmob.co.uk/pob/centred-float.htm
http://www.css-lab.com/demos/inline-...kill-node.html
http://www.css-lab.com/demos/nav/inl...k-vmargin.html
http://www.pmob.co.uk/temp/hozinlinemenu.htm