Home/ Questions/Q 7992883
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T13:41:53+00:00

This works (i.e. the input sliders are correct width): <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML

  • 0

This works (i.e. the input sliders are correct width):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css" media="screen">

      div {
        margin-bottom: 1em;
      }

      code {
        color: gray;
      }

      .slider {
        width: 250px;
        height: 25px; 
      }
    </style>
  </head>
  <body>

    <div>
      <code>/qc/lfo/1</code><br />
      <input class="slider" id="/qc/lfo/1" type="range" />
    </div>

    <div>
      <code>/range/1-3</code><br />
      <input class="slider" type="range" value="0" min="0" max="100" onchange="send('/range/1', parseInt(this.value))" /><br />
      <input class="slider" type="range" value="0" min="0" max="100" onchange="send('/range/2', parseInt(this.value))" /><br />
      <input class="slider" type="range" value="0" min="0" max="100" onchange="send('/range/3', parseInt(this.value))" />
    </div>
  </body>
</html>

However when I load the CSS from an external file the width styling is lost (but not the other styles):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link  rel="stylesheet" type="text/css" media="screen" href="websocket.css" /> 
  </head>
  <body>

    <div>
      <code>/qc/lfo/1</code><br />
      <input class="slider" id="/qc/lfo/1" type="range" />
    </div>

    <div>
      <code>/range/1-3</code><br />
      <input class="slider" type="range" value="0" min="0" max="100" onchange="send('/range/1', parseInt(this.value))" /><br />
      <input class="slider" type="range" value="0" min="0" max="100" onchange="send('/range/2', parseInt(this.value))" /><br />
      <input class="slider" type="range" value="0" min="0" max="100" onchange="send('/range/3', parseInt(this.value))" />
    </div>


  </body>
</html>

With CSS stylesheet file:

div {
   margin-bottom: 1em;
}

code {
  color:maroon;
  font-family: Geneva
}

.slider {
  width: 200 px;
  height: 25px;
}

The sliders are not correct width, yet the other styles colour; font & margin are correct. Previewing in Coda 1.7 Coda 2.0 and Safari — all incorrect width. Have tried making parent element wider and a bunch of other random things… what am I not getting here?

Oh dear could it be the space between “200” and “px” I;ve retyped this CSS code many times I couldn’t have kept doing same mistake could I?

Another thing that was tricking me was the times I did have the CSS right (no space before ‘px’), it was not updating in Safari when I hit Cmd+Opt+”B” in Coda. Only when I reloaded the page (Cmd+”R” in Safari did it look correct).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    just write

    width: 200px;

    instead of 

    width: 200 px;
    • 0