Question

Hi I am teaching myself some backbone from tutorials, and I want to create a table like display element using spans.

So I added a width element into my span in the template. (I know it isn’t the best place to put it, but it should take priority over stylesheet properties, and is just to get an idea during development).

<script type="text/template" id="loadedwith-template">
  <span  style="width:100" class="library"><%= library.name  %></span>
  <input style="width:100" class='input' type="text" />
  <button class="delete_lw" >delete</button>
</script>

However when I look at it in the browser, the element shows up as before without the width setting applied.

“Inspect element” in Chrome shows the width property, but is disabled (has a line like html strikethrough on it). This is the last thing shown in element styles before the computed styles section.

There is another stylesheet referencing the span. Is there anything causing the width to be disabled? The other stylesheet is as follows (borrowed from the backbone tutorial). (The span is inside a list).

    a { color: #2929FF; }
    a:visited { color: #777; }
    a:hover {
      color: #8F8FFF;
      text-decoration: none;
    }
    body, button { font: 100%/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; }
    body {
      background: #FFF;
      color: #444;
      padding: 25px 50px;
    }
    button, .delete, .swap {
      border: 0;
      border-radius: 5px;
      color: #FFF;
      cursor: pointer;
      font-weight: bold;
      line-height: 1;
      text-align: center;
      text-transform: uppercase;
    }
    button:hover, .delete:hover, .swap:hover { opacity: 1; }
    button {
      background: #2929FF;
      font-size: 0.75em;
      padding: 7px 12px;
      opacity: .75;
    }
    h1 {
      font-size: 1.25em;
      letter-spacing: -0.5px;
    }
    p {
      color: #777;
      font: italic 0.75em/1.2 "Georgia", Palatino, "Times New Roman", Times, serif;
    }
    span {
      display: inline-block;
      margin-right: 10px;
    }
    ul { padding-left: 0; }
    .delete, .swap {
      font-size: 0.625em;
      opacity: .25;
      padding: 3px 10px;
      position: relative;
      top: -3px;
    }
    .delete { background: #FF29D0; }
    .swap { background: #FF6529; }

Answer 1

You need to specify a unit of measurement

Specifying CSS units is a requirement for non-zero values. Browsers may try to guess what you meant, but it would still be a broken stylesheet according to the standard.

I.e. there is no “default unit” in CSS, it’s just that the browser may try to help you out, although it may as well just ignore your statement that doesn’t specify units as an invalid one.

Try style="width:100px"