After successfully positioning the buttons to the bottom left, I encountered an issue where one of the buttons disappeared when navigating back to the page. The missing button only appears after scrolling down. Can someone please assist with this problem?
HTML
<!Doctype html>
<html>
<head>
<title>Forsaken </title>
<link href="main.css" rel="stlesheet" type="text/css">
</head>
<body>
<a href="teams.html"><button><img class="#topleft" src="icon1.jpg " width="100%" alt="Teams" ></button></a>
<a href="store.html"><button><img class="#topright" src="icon2.jpg " width="100%" alt="store" ></button></a>
<a href="sponsors.html"><button><img class="#bottomleft" src="icon4.jpg " width="100%" alt="sponsors" ></button></a>
<a href="aboutus.html"><button><img class="#bottomright" src="icon3.jpg " width="100%" alt="aboutus" ></button></a>
</body>
</html>
CSS
#topleft {
position: fixed;
top: 0px;
left: 0px;
}
#topright {
position: fixed;
top: 0px;
right: 0px;
}
#left {
position: fixed;
left: 0px;
}
#right {
position: fixed;
right: 0px;
}
div {
border-style:solid;
border-width:0px;
border-color:#000000;
}
#yes {
border: none;
padding: 0;
background: none;
}
.flat {
border: none;
background: #222;
color: #FFF;
padding: 0px 0px;
font-size: 22px;
font-family: Palatino;
font-weight: bold;
}
.lighter {
background: #666;
}
#no {
border: none;
padding: 0;
background: none;
}
.flat {
border: none;
background: #222;
color: #FFF;
padding: 0px 0px;
font-size: 22px;
font-family: Palatino;
font-weight: bold;
}
.lighter {
background: #666;
}
p.s All buttons are functional except for the About Us button that is not displaying correctly.