Firefox not rendering css hexagonal objects correctly

June 29, 2022

The question I have is can anyone see why Firefox does not render this css code correctly?

It renders, in all other browsers that I have tried. This is probably not the best way of rendering hexagonal objects today, but rather than re-coding an old page I would like to reuse it if possible.

#hex {
  padding: 0;
  margin: 0 auto;
  list-style: none;
  width: 335px;
}

#hex li {
  display: block;
  float: left;
  width: 106px;
  margin-right: 4px;
  height: 120px;
}

#hex li.p1 {
  padding-left: 54px;
}

#hex li.p2 {
  margin-top: -26px;
}

#hex li a {
  text-decoration: none;
  color: #000;
  cursor: pointer;
}

#hex li a b {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
  border-bottom: 30px solid #a6c9e2;
  border-left: 52px dotted transparent;
  border-right: 52px dotted transparent;
}

#hex li a span {
  display: block;
  width: 106px;
  height: 60px;
  line-height: 59px;
  text-align: center;
  background: #a6c9e2;
  font-size: 15px;
  font-family: arial, veradana, sans-serif;
}

#hex li a em {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
  border-top: 30px solid #a6c9e2;
  border-left: 52px dotted transparent;
  border-right: 52px dotted transparent;
}

#hex li a.inner b {
  border-bottom-color: #477AB8;
}

#hex li a.inner span {
  background: #477AB8;
}

#hex li a.inner em {
  border-top-color: #477AB8;
}

#hex li a:hover {
  white-space: normal;
  color: #fff;
}

#hex li a:hover b {
  border-bottom-color: #4297d7;
}

#hex li a:hover span {
  background: #4297d7;
}

#hex li a:hover em {
  border-top-color: #4297d7;
}

#hex li a.inner:hover b {
  border-bottom-color: #377D9F;
}

#hex li a.inner:hover span {
  background: #377D9F;
}

#hex li a.inner:hover em {
  border-top-color: #377D9F;
}

<html>

<body>
  <!-- the menu -->
  <ul id="hex">
    <li class="p1"><a href="#"><b></b><span>Hex1</span><em></em></a></li>
    <li><a href="#"><b></b><span>Hex2</span><em></em></a></li>
    <li class="p2"><a href="#"><b></b><span>Hex3</span><em></em></a></li>
    <li class="p2"><a class="inner" href="#"><b></b><span>Hex4</span><em></em></a></li>
    <li class="p2"><a href="#"><b></b><span>Hex5</span><em></em></a></li>
    <li class="p1 p2"><a href="#"><b></b><span>Hex6</span><em></em></a></li>
    <li class="p2"><a href="#"><b></b><span>Hex7 </span><em></em></a></li>
  </ul>
</body>

</html>

In Firefox it renders like this as per the snippet:

>Solution :

Changing the border from dotted to solid apparently does the job (tested on Chrome 103, Firefox 101 and Safari 15.5)

#hex {
  padding: 0;
  margin: 0 auto;
  list-style: none;
  width: 335px;
}

#hex li {
  display: block;
  float: left;
  width: 106px;
  margin-right: 4px;
  height: 120px;
}

#hex li.p1 {
  padding-left: 54px;
}

#hex li.p2 {
  margin-top: -26px;
}

#hex li a {
  text-decoration: none;
  color: #000;
  cursor: pointer;
}

#hex li a b {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
  border-bottom: 30px solid #a6c9e2;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
}

#hex li a span {
  display: block;
  width: 106px;
  height: 60px;
  line-height: 59px;
  text-align: center;
  background: #a6c9e2;
  font-size: 15px;
  font-family: arial, verdana, sans-serif;
}

#hex li a em {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
  border-top: 30px solid #a6c9e2;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
}

#hex li a.inner b {
  border-bottom-color: #477AB8;
}

#hex li a.inner span {
  background: #477AB8;
}

#hex li a.inner em {
  border-top-color: #477AB8;
}

#hex li a:hover {
  white-space: normal;
  color: #fff;
}

#hex li a:hover b {
  border-bottom-color: #4297d7;
}

#hex li a:hover span {
  background: #4297d7;
}

#hex li a:hover em {
  border-top-color: #4297d7;
}

#hex li a.inner:hover b {
  border-bottom-color: #377D9F;
}

#hex li a.inner:hover span {
  background: #377D9F;
}

#hex li a.inner:hover em {
  border-top-color: #377D9F;
}

<html>

<body>
  <!-- the menu -->
  <ul id="hex">
    <li class="p1"><a href="#"><b></b><span>Hex1</span><em></em></a></li>
    <li><a href="#"><b></b><span>Hex2</span><em></em></a></li>
    <li class="p2"><a href="#"><b></b><span>Hex3</span><em></em></a></li>
    <li class="p2"><a class="inner" href="#"><b></b><span>Hex4</span><em></em></a></li>
    <li class="p2"><a href="#"><b></b><span>Hex5</span><em></em></a></li>
    <li class="p1 p2"><a href="#"><b></b><span>Hex6</span><em></em></a></li>
    <li class="p2"><a href="#"><b></b><span>Hex7 </span><em></em></a></li>
  </ul>
</body>

</html>