0

So we have recently changed our browser support policy to IE 8 / 9, Firefox, Chrome & Safari on Windows 7, all of which support box-sizing: border-box; in some form or another (some require a prefix, for example -moz-). This enables us to create a form with width 45em, using labels of width 21em with 1em margin-right (to create a bit of space between the label and associated input / select) and then set the selects / text inputs to 23em. Textareas are 45em and we use a div with text-align right to right align a button. The form lines up perfectly, with no browser-specific tweaks required!

However I got stuck on a problem last night when I started a new project. I used this technique but couldn't get it to work. The inputs were all dropping down to the next line. I finally figured out what the source of the problem was, but can't find a way (that I like) to fix it. This is the markup I am using:

<div class="input-pair">
    <label for="mainBackgroundColor">Background Colour</label>
    <input type="text" id="mainBackgroundColor" name="mainBackgroundColor" class="text color">
</div>

It turns out that the carriage return and tabs I am using to make it easier to read are being translated to a space. So the actual total width of the label and input is 21em + 1em + 23em + a space, in other words 45em + a space, but the container is only 45em. I have tried different values for white-space in CSS, with no luck. I really don't want to put the label and input on the same line in the code - it would look horrible and not as easy to read. Does anyone have any idea how to stop this new line, and the tabs, from being replaced with a space?

tckmn
  • 57,719
  • 27
  • 114
  • 156
ClarkeyBoy
  • 4,934
  • 12
  • 49
  • 64

1 Answers1

1

Here is a nice article about that: Fighting the Space Between Inline Block Elements.

darthmaim
  • 4,970
  • 1
  • 27
  • 40
  • Thanks. I hadn't connected the dots enough to realise it was just inline-block elements. There's loads of articles out there about this, but all the solutions seem a little hacky to me. I'd like the code to be neat, not with empty HTML comments, missing closing tags or anything like that. :( Guess I'll just have to choose one. – ClarkeyBoy Mar 23 '13 at 14:14
  • Here is also another SO question about those whitespaces: [Ignore whitespace in HTML](http://stackoverflow.com/questions/2628050/ignore-whitespace-in-html) – darthmaim Mar 23 '13 at 14:26