I have some HTML5/CSS3 code, in which I want to float the #rightodwnblock
image right. I have added the float: right
property to the code but for some reason the image still floats to the left. I can see nothing within the code that would cause this to happen, so I'm wondering if the issue might be server-side? It's up for testing here:
http://www.orderofthemouse.co.uk/JavascriptTesting4Client/index.html
The in-progress code is shown below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<link rel="stylesheet" type="text/css" href="/style.css" />
<title>The End.</title>
<style style="text/css">
.marquee {
height: 1024px;
overflow: hidden;
position: relative;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
font:120pt Verdana,Arial;
/* Starting position */
-moz-transform:translateY(100%);
-webkit-transform:translateY(100%);
transform:translateY(100%);
/* Apply animation to this element */
-moz-animation: scroll-up 20s linear infinite;
-webkit-animation: scroll-up 20s linear infinite;
animation: scroll-up 20s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-up {
0% { -moz-transform: translateY(100%); }
100% { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes scroll-up {
0% { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(-100%); }
}
@keyframes scroll-up {
0% {
-moz-transform: translateY(100%); /* Browser bug fix */
-webkit-transform: translateY(100%); /* Browser bug fix */
transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%); /* Browser bug fix */
-webkit-transform: translateY(-100%); /* Browser bug fix */
transform: translateY(-100%);
}
#rightodwnblock {
top: 100px;
float: right;
}
</style>
</head>
<body>
<audio autoplay>
<source src="<!--#exec cmd="/web/stuff/bin/randfile \*.mp3 music/mp3" -->" type="audio/mpeg" autoplay="autoplay" preload="auto" />
<source src="<!--#exec cmd="/web/stuff/bin/randfile \*.ogg music/ogg" -->" type="audio/ogg" autoplay="autoplay" preload="auto" />
<redacted>
</audio>
<div class="marquee">
<p>Blackness.</p>
</div>
<img id=”rightodwnblock” height=”100px” width=”100px” src="littlelogo.png" title="Do Not Click Here" alt="Do Not Click Here"></div>
</body>
</html>
Update: I have added a float-right class to the code, so the img tag properties read as follows:
<img class="float-right submit-button" id="rightodwnblock" height="100px" width="100px" src="littlelogo.png" title="Do Not Click Here" alt="Do Not Click Here"></div>
This hasn't helped either. The revised code has been uploaded to the server.
Update 2: I have altered the quote tags as suggested in one of the answers below and updated the code above to reflect this change. It hasn't solved the original issue.
Your problem appears to be that your text editor is not inserting quotation marks in a web-standard format. So instead of this:
<img id=”rightodwnblock” ...></div>
Which the browser interprets as this:
<img id="”rightodwnblock”" ...></div>
When you should be using this:
<img id="rightodwnblock" ...></div>
Another problem is that you have not "ended" your css blocks; you are missing a }
at the end right here:
@keyframes scroll-up {
0% {
-moz-transform: translateY(100%); /* Browser bug fix */
-webkit-transform: translateY(100%); /* Browser bug fix */
transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%); /* Browser bug fix */
-webkit-transform: translateY(-100%); /* Browser bug fix */
transform: translateY(-100%);
}
} /* <-- RIGHT HERE */
#rightodwnblock {
top: 100px;
float: right;
}
This caused the #rightodwnblock
style to be ignored by the browser.