Search code examples
htmlcssformsblueprint-css

Fieldset breaks the grid?

I just started with Blueprint, so don't bash me :-) Here's my code, a simple two columns layout:

<body>
  <div class="container showgrid">
    <div class="span-24 last">
      <h1 >Logo Here</h1>
    </div>
    <div class="span-16">SlideShow</div>
    <div class="span-8 last">
      <form>
        <fieldset >
          <label for="email">Email</label>
          <input type="text" id="email" name="email" class="title">
        </fieldset>
      </form>
    </div>
  </div>
</body>

You can see the result here (on Firefox 3):

http://img600.imageshack.us/i/screenwr.png/

As you can see, the fieldset breaks the grid. If i drop the fieldset, the form gets better, altough it's still one pixel wider. What am I doing wrong? Thanks for the help.

Solution

  • It's just that the text field is too long. In blueprint, it's set to 300px. Just use CSS to override the text field width and it should be fixed. For example:

    .span-8 input.text, .span-8 input.title { width: 275px; }