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


      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.