I'm writing a simple website and have pretty much the same issue as described in these two posts:
The issue is aparent when testing in Brave Browser, not for example in Edge. Although I have not used any <form> tag in my site..
Anyway, I can resolve this issue as described in those posts by putting a <script> </script> into the footer. My problem is, that I have a bad habit of letting VS Studio format my code with CTRL-K + CTRL + D, which will delete the space between the script tags. Also, copying the footer to a new file will do the same, thus I quite often have to resolve the same issue again and again.
Question now is: Since the linked posts are quite old therefore this issue has been known for quite a long time, is there another - better - way to resolve it?
Transition Code in Question:
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: 100px;
}
nav ul {
position: absolute;
bottom: 0;
width: 70%;
list-style: none;
padding: 0 15%;
display: flex;
margin: 0;
}
nav li {
width: 125px;
text-align: center;
}
.navunderline {
width: 125px;
height: 0;
margin: 5px 0 0 0;
background-color: #DAD9D7;
transition: 500ms;
}
nav a {
color: #DAD9D7;
}
nav a:hover {
text-decoration: none;
}
nav li:hover .navunderline {
height: 5px;
margin: 0;
}
#selected .navunderline {
height: 5px;
margin: 0;
} <nav>
<ul>
<li><a href="content/unternehmen.html">Unternehmen</a><div class="navunderline"></div></li>
<li><a href="content/leistungen.html">Leistungen</a><div class="navunderline"></div></li>
<li><a href="content/referenzen.html">Referenzen</a><div class="navunderline"></div></li>
<li><a href="content/news.html">News</a><div class="navunderline"></div></li>
<li><a href="content/kontakt.html">Kontakt</a><div class="navunderline"></div></li>
</ul>
</nav>