Question

I am trying to make a banner. The banner is made with the width and a percentage of the height. When the body is loaded, it should look good in all resolutions. But, my code does not seem to work. If anyone could take a look at it, it would be greatly appreciated.

  <script>
    function load()
    {

      document.write("Available Width: " + Math.round((screen.availWidth)/5));

      a=document.getElementById('banner');
      a.style.width=Math.round((screen.availWidth));
      a.style.height=Math.round((screen.availHeight)/5);
    }
  </script>

Answer 1

You need to specify the units for the style properties.

a.style.width = … + 'px';

Also, use the var statement for the a variable so that you prevent a from leaking to the global scope (if it’s not intended).

Update: Also try removing the document.write call.