Menu tabs overlap in Opera mini simulator

HTML & CSS
1

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.

2

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.

3

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).

4

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.

5

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.

6

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!

7

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

http://pmob.co.uk/pob/centred-float.htm
http://www.css-lab.com/demos/inline-block/inline-block-kill-node.html
http://www.css-lab.com/demos/nav/inline-block/inline-block-vmargin.html
http://www.pmob.co.uk/temp/hozinlinemenu.htm