During my work on the test website, I encountered an issue. I've included all of my code as I'm unsure where the problem lies. View the jsfiddle here. As shown in the jsfiddle, the top section of text on the website is unselectable. I'm seeking clarification on the source of this problem. Could someone please explain the error?
Here's the HTML code in question:
.button {
text-decoration: none;
color: #ffffff;
background: rgba(143, 152, 191, 0.4);
color: #999;
line-height: 3em;
display: block;
float: left;
padding-left: 10px;
padding-right: 10px;
font-family: courier new;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}
.button2 {
text-decoration: none;
color: #ffffff;
background: rgba(143, 152, 191, 0.4);
color: #999;
line-height: 3em;
display: block;
float: left;
padding-left: 10px;
padding-right: 10px;
font-family: courier new;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}
...
<body background="pictures/spacexwall.jpg">
<div class="menuu">
<div class="mainn">
<a class="button" href="SpaceX.html"> Home </a>
<a class="button2" href="founder.html"> Founder </a>
...
</body>