Good evening, dear community. The following problem arose - there is a horizontal menu (code below), or rather two. Built on the same principle. When I try to scale up the site in Opera and (who would have thought) IE9 - everything is fine, the menu increases / decreases without problems along with the entire site. But in Chrom and Firefox, the last element jumps to a new line, the structure breaks accordingly, slides off to the side of the slider, which is under the menu. Help, please advice. I would be very grateful.

Here, in fact, is the code:

Standard menu structure:

<nav id="menu1"> <ul> <li class="w0 current"><a href="#">Главная</a></li> <li class="w1"><a href="#">О нас</a></li> <li class="w2"><a href="#">Услуги</a></li> <li class="w3"><a href="#">Портфолио</a></li> <li class="w4"><a href="#">Контакты</a></li> </ul> </nav>

And CSS markup (do not judge strictly - I'm learning))

 #menu1 { background: url("images/menu/top_menu/tab.jpg") repeat-x; height: 60px; margin: 0px auto; min-width: 1020px; position: relative; right: 23px; top: 71px; width: 1020px; } #menu1 ul { list-style: none; } #menu1 li { background: url (images /menu /top_menu /tab.jpg) repeat-x; display: block; float: left; list-style: none; } #menu1 li a { border-right: 1px solid black; color: #fff; display: block; float: left; font-size: 18px; height: 40px; padding-top: 19px; text-align: center; text-decoration: none; } #menu1 li a:hover { background: url("images/menu/top_menu/hover_tab.jpg") repeat-x; color: #fff; } #menu1 li.current a { background: url("images/menu/top_menu/current_tab.jpg") repeat-x; display: block; float: left; } #menu1 li.current a:hover { background: url("images/menu/top_menu/hover_tab.jpg") repeat-x; } #menu1 li.w0 a, #menu1 li.w1 a, #menu1 li.w2 a, #menu1 li.w3 a { width: 203px; }
  • one
    give better link to the page itself - Lucky
  • it is on lokalkhost. perhaps, if there are no options, you will have to upload to the hosting and show it) - Bogdan Ostapchuk
  • so these browsers are arranged and this does not change. - Arteom 1:01 pm

5 answers 5

Very strange, I just copied and ran it myself, everything is normal resized. Can I have a little more data? What are the versions of Chrome and Firefox and which OS?

Here is a Chrome screen . In FF, everything is the same.

  • Thank you for checking) I have 21 chrome, Fox 13. It is possible that the matter is in boarders at the edges of li a blocks. but I compensated for the width, so that everything is balanced. - Bogdan Ostapchuk
  1. Too much extra code from you.
  2. Have you connected any kind of resetter?
  3. Why use float: left; ? He can interrupt your whole style.
  4. display: block; put only for reference, and li not needed.

My advice to you is to download from the Internet any ready-made implementation of the horizontal menu and look at its code.

Personally, I usually assign the display: inline-block; property display: inline-block; tag to the li tag display: inline-block; .

    What kind of doctype? If 4.01, try 5.

      It is time to love

       <div></div>

      who save from this and not just the kind of situations.

        and you accidentally did not forget to register in the head

         <meta name="viewport" content="width=device-width, initial-scale=1">

        when I forgot myself.