I am encountering browser problems, as well as issues when using the same browser on a different computer.
The links on my website are not positioned correctly over the background. When viewing with Firefox, the opacity and positioning features are not functioning as expected.
You can view the site at this link: www.haelu.co.nf
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Haelu</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<a id="button1" href="https://soundcloud.com/haelu">
<img src="images/Button1.png" border="0"></a>
<a id="button2" href="/videos.html">
<img border="0" src="images/Button2.png" ></a>
</body>
</html>
And here is the external CSS code:
html {
background: url(images/WebBack1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@font-face {
font-family: webfont;
src: url(thinnyness.ttf);
src: local('Delicious'), local(Delicious'),
url(thinnyness.ttf) format('truetype');
}
body {
font-family:Webfont;
align: center;
}
#button1 {
position: absolute;
top: 364px;
left: 557px;
opacity:0.1;
}
#button1:hover {
position: absolute;
top: 364px;
left: 557px;
opacity:1.0;
}
#button2 {
position: absolute;
top: 292px;
left: 648px;
opacity:0.1;
}
#button2:hover {
position: absolute;
top: 292px;
left: 648px;
opacity:1.0;
}
.center {
margin: 0 auto;
width: 500px;
}
#container {
position: absolute;
top: 50%;
margin-top: -130px;/* half of #content height*/
left: 0;
width: 100%;
}