Text inside li navigation bar on two lines in Chrome/ Safari but one line in Firefox

Question

I'm not sure why, but past a certain font size the text inside my navigation bar shows up on two lines. The box size isn't being updated for some reason in Chrome and Safari but still works fine in Firefox.

Firefox

Chrome

What would be the difference between these web browsers that would have such an effect on my code?

<nav id="topTab">
    <a href="#" id="mobNav"></a>
      <ul>
          <li><a href="http://www.example.org/" title="morning delight">page1</a></li>
          <li><a href="http://www.example.org/" title="yesterday">page2</a></li>
          <li><a href="http://www.example.org/" title="accelaaaa">page3</a></li>
      </ul>

  <div>
      <h1>
      <b href="http://localhost:8000/home.html" title="Home">Example1</b></h1> 
  </div>

</nav>

CSS:

@media only screen and (min-width : 1024px) {

a {
background: #fcfcfc;
color: #000;
text-align: center;
text-decoration: none;
font-family: 'Gloria Hallelujah';
}

#topTab{
position:relative;
}

nav#topTab {
    float: left;
    width: 100%;
    overflow: hidden;
}

nav#topTab ul {
    float: left;
    clear: left;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    left: 50%;
}

nav#topTab ul li {
    display: block;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    right: 50%;
}

nav#topTab ul li a {
    display: block;
    padding: 0 5% 0 5%;
    margin: 0 15% 0 3%;
    font-size: 2.2em;
}

nav#topTab ul li a:hover {
    background: #000;
    color: #fff;
} 

h1 {
position: relative;
text-align: center;
top: 20%;
}

h1 b {
    font-size: 2.3em;
text-decoration: none;
color: black;
font-weight: bold;
font-family: 'Caveat Brush';
}
}

score 0 · Accepted Answer · answered Mar 27 '17 at 02:43

0

Your unordered list is floated. Floating an element removes it from the "natural" flow of the document and as a consequence, your text is trying to adjust to this "unnatural" flow.

You have to clear your floats to restore the flow again. This can be done by adding an element with clear: both style attached to it. In this case, you would add clear both to your div wrapping the heading tag.

div {clear: both}

answered Mar 27 '17 at 02:43

DSofa

554
3
14

Thanks! That was a huge help. Any idea why my nav text still on two lines instead of one? – J.D. Munn Mar 27 '17 at 03:45
I am not exactly sure what do you mean by nav text. Your menu links (unordered list items) are displaying in one row, both in Chrome v56 and Firefox v52. The example text is squished somewhere below page3 link, due to the reason I explained above. Are you trying to display example text next to the menu? Maybe you could post a picture how it should it look like so I can get a better idea of what are you trying to achieve? – DSofa Mar 27 '17 at 04:25
I included two images above. The box for whatever reason isn't fitting correctly to the text. – J.D. Munn Mar 27 '17 at 06:19
Oh I see now. Your original code had one word links so your issue wasn't visible. I see if I add multiple words to links, they automatically wrap to a new line. It appears the issue comes from using percentage values for padding. Chrome for some reason automatically turns on word wrapping if you're using percentage values for padding. You can force disable word wrap by adding `white-space: nowrap` property under `nav#topTab ul li a` selector. It still wont be perfect but that's because you have other issues with your code. Here's an example of a working menu: http://codepen.io/anon/pen/JWaoEL – DSofa Mar 27 '17 at 07:25
That answered a lot of my questions. I just have one more for you. Why did your code center the nav bar? Was it just that text align in the nav tag? – J.D. Munn Mar 27 '17 at 21:05
Yes, correct, as to why, there are couple of reasons. Firstly, `
` tag is a `block` level element which defaults to having the width of its container, in this case, width of the ``, which is 100%. Secondly, the list elements `
` are defined as `inline-block` elements. An `inline` element takes its width from the size of its content text. `text-align:center` tells the text to position itself centrally in the element and this works because the width of `
` elements is smaller than the width of `
`. Here's a better explanation: http://stackoverflow.com/a/7757048/6484612
– DSofa Mar 28 '17 at 02:46
You've been a huge help! Thanks again. – J.D. Munn Mar 30 '17 at 03:58

Text inside li navigation bar on two lines in Chrome/ Safari but one line in Firefox

1 Answers1