Search code examples
htmlcssdouble-quotes

Float:right property not producing desired results in CSS3


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.


Solution

  • 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.