message shown for outdated browsers

You can show this style to your visitors when you do not support their browser version

by heriberto perez

HTML

<div class="noti">
  <h2 class="whatnow">
    <b>Su navegador no está actualizado. Descargue uno de estos excelentes navegadores, gratuitos y actualizados:</b>
    </h2>
  <table class="logos">
    <tbody>
    <tr>
      <td class="b bf">
        <a class="l" href="http://www.mozilla.com/firefox/" target="_blank"    onmousedown="countBrowser('f')"><span class="bro">Firefox</span>
          <span class="vendor">Mozilla Foundation</span></a>
      </td>
      <td class="b bo">
        <a class="l" href="http://www.opera.com/?utm_medium=roc&amp;utm_source=team23_de&amp;utm_campaign=browser-update_org" target="_blank" onmousedown="countBrowser('o')"><span class="bro">Opera</span>
          <span class="vendor">Opera Software</span> </a>
      </td>
      <td class="b bc">
        <a class="l" href="https://www.google.com/chrome/browser/desktop/" target="_blank" onmousedown="countBrowser('c')"><span class="bro">Chrome</span>
        <span class="vendor">Google</span> </a>
      </td>
      <td class="b bs">
        <a class="l" href="https://itunes.apple.com/es/app/os-x-yosemite/id915041082?mt=12" target="_blank" onmousedown="countBrowser('s')"><span class="bro">Safari</span>
          <span class="vendor">Apple</span> </a>
      </td>
    </tr>
    </tbody>
  </table>
  <p></p>
  <h2 class="whatnow">
    Para más <a href="#security">seguridad</a>, <a href="#speed">velocidad</a>, <a href="#comfort">comodidad</a> y <a href="#fun">diversión</a>.</h2>
</div>

CSS

.noti {
    margin: 47px 0;
    border: 1px solid #777;
    box-shadow: 0 0 8px #888;
    background: #FFF4F4;
}

.whatnow {
    text-align: center;
    margin: 13px 25px;
}

.logos {
    width: 100%;
    border: none;
}

.logos td {
    vertical-align: top;
    padding: 10px;
    border: none;
    background: none;
    width: 25%;
}

a.l {
    display: block;
    padding: 4px;
    padding-top: 110px;
    background-repeat: no-repeat;
    background-position: center top;
    text-decoration: none;
    text-align: center;
}

.bf a {
    background-image: url("https://browser-update.org/img/big/ff.png");
}

.bo a {
    background-image: url("https://browser-update.org/img/big/op.png");
}

.bc a {
    background-image: url('https://browser-update.org/img/big/ch.png');
}

.bs a {
    background-image: url('https://browser-update.org/img/big/sa.png');
}

a.l .bro {
    white-space: nowrap;
    text-decoration: underline;
    font-size: 19px;
}

.noti a {
    color: #3bafda;
}

a .vendor {
    color: #aaa;
    text-align: center;
    font-size: 10px;
    display: block;
}
table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0.8em;
    clear: both;
}