title: Disable text-zooming
body: <p>I have one div tag at the very top of the site (Navigation bar). In it, I have another div tag which is an element to click on (takes 10% of the width). And in this div, there's a simple text.
  I have managed to make those two div's size stay as they are when zooming in or out. But just the text doesn't want to stay, it just gets bigger when zooming in. It also changes it's place.
  I want the text to permanently stay the same size no matter if you zoom in or out.</p>
  
  <p>Here's what I did:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  div.Navigation {
    background: #5555FF;
    height: 3%;
    line-height: 25px;
    margin-top: -8px;
    margin-left: -8px;
    margin-right: -8px;
    vertical-align: middle;
    font-family: Sans-serif;
  }
  
  div.button {
    background: rgba(0,0,255,0.3);
    width: 10%;
    height: 100%;
    text-align: center;
    color: #9999FF;
    font-size: 80%;
  }
  
  &lt;/style&gt;
  
  
  
  &lt;div class="Navigation"&gt;
    &lt;div class="button"&gt;TEXT&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://sf-community.forumotion.com/h18-test" rel="nofollow">EXAMPLE</a></p>
  
  <p>Can anyone help me prevent the text from getting bigger when zooming in?
  Maybe the best way would be using Javascript. I'm a beginner with Javascript so you might have to explain it thoroughly.
  Thanks in advance.</p>
  
  <p>PS: I have found many links of this topic but none of them really helped me out.</p>