1 reply [Last post]
Beauford2018
Beauford2018's picture
Offline
newbie
Last seen: 39 weeks 5 days ago
Timezone: GMT-4
Joined: 2018-03-14
Posts: 1
Points: 2

Hi, I have a css menu with 4 main menu items and 4 submenu items. The submenu contains 26 links with letters from A to Z. What I want is to have the links wrap to the next line at the letter M. So 13 letters on the top and 13 on the bottom.

This only works in Chrome and Opera but not in IE or Firefox (the only 4 I tested so far).

If you go to the my site at http://netscan.ca/test.html in the various browsers you will see what I mean. This is only a test page and not what the production site will look like, which is not close to being ready to upload.

Thanks for any help.

Cheers Beauford

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 21 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9717
Points: 3793

Minimal test case

I have not dealt with your event handlers nor allowed for anything other than unstyled lists. This example automatically reflows to accommodate small view ports, e.g. phones. Technically, the BR elements are invalid between the LIs, but appears to be more robust. You might try using ::after content instead.

 <!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=
	    "width=device-width, height=device-height, initial-scale=1"
            name="viewport">
    <title>
      Test document
    </title>
    <style media="screen">
    /*<![CDATA[*/
 
    body {
        background-color: white;
        color: black;
        font: 100%/1.5 sanserif;
        margin: 0;
        padding: 1em;
    }
 
    p {
        font-size: 1em;
    }
 
    h1 {
	text-align: center;
	font-family: serif;
	margin-bottom: 0;
    }
 
    #main-menu {
	padding: 0;
	text-align: left;
    }
 
    #main-menu li {
	display: inline-block;
    }
 
    .sub-menu {
	padding: 0;
	text-align: justify;
    }
 
    .sub-menu li {
	display: inline-block;
	width: 3em;
    }
 
    .sub-menu li a {
	display: block;
	text-align: center;
    }
 
    .sub-menu br.init {
	display: block;
	height: 1px;
    }
 
    @media screen and (max-width: 45em) {
	.sub-menu br.init {
	    display: none;
	}
    }
 
    /*]]>*/
    </style>
  </head>
  <body>
    <h1>Create rows</h1>
 
    <ul id="main-menu">
      <li class="menu">Foo
	<ol class="sub-menu">
	  <li><a href="#">A</a></li>
	  <li><a href="#">B</a></li>
	  <li><a href="#">C</a></li>
	  <li><a href="#">D</a></li>
	  <li><a href="#">E</a></li>
	  <li><a href="#">F</a></li>
	  <li><a href="#">G</a></li>
	  <li><a href="#">H</a></li>
	  <li><a href="#">I</a></li>
	  <li><a href="#">J</a></li>		  
	  <li><a href="#">K</a></li>
	  <li><a href="#">L</a></li>
	  <li><a href="#">M</a></li><br class="init">
	  <li><a href="#">N</a></li>
	  <li><a href="#">O</a></li>
	  <li><a href="#">P</a></li>
	  <li><a href="#">Q</a></li>
	  <li><a href="#">R</a></li>
	  <li><a href="#">S</a></li>
	  <li><a href="#">T</a></li>
	  <li><a href="#">U</a></li>
	  <li><a href="#">V</a></li>
	  <li><a href="#">W</a></li>
	  <li><a href="#">X</a></li>
	  <li><a href="#">Y</a></li>
	  <li><a href="#">Z</a></li>
	</ol>
      </li>
      <li class="menu">Bar
	<ol class="sub-menu">
	  <li><a href="#">A</a></li>
	  <li><a href="#">B</a></li>
	  <li><a href="#">C</a></li>
	  <li><a href="#">D</a></li>
	  <li><a href="#">E</a></li>
	  <li><a href="#">F</a></li>
	  <li><a href="#">G</a></li>
	  <li><a href="#">H</a></li>
	  <li><a href="#">I</a></li>
	  <li><a href="#">J</a></li>		  
	  <li><a href="#">K</a></li>
	  <li><a href="#">L</a></li>
	  <li><a href="#">M</a></li><br class="init">
	  <li><a href="#">N</a></li>
	  <li><a href="#">O</a></li>
	  <li><a href="#">P</a></li>
	  <li><a href="#">Q</a></li>
	  <li><a href="#">R</a></li>
	  <li><a href="#">S</a></li>
	  <li><a href="#">T</a></li>
	  <li><a href="#">U</a></li>
	  <li><a href="#">V</a></li>
	  <li><a href="#">W</a></li>
	  <li><a href="#">X</a></li>
	  <li><a href="#">Y</a></li>
	  <li><a href="#">Z</a></li>
	</ol>
      </li>
    </ul>
  </body>
</html>

Let us know whether it breaks for you and under which conditions. I did not thoroughly test, by any means. The breakpoint I chose is related only to my machine, so test and choose your best point. I used em metrics so that it will self adjust for font sizes.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.