css fieldset borders - html

Question

Hello I have a problem with a fieldset in CSS.
I have this example
In this example you can see that left hand side the border
margin-left: 0px;
flushes exactly on one line/height with the dark frame. Right hand side you can see that the class fr has
margin-right: 0px;
But it does not flush with the frame border. I have tried to Google for it but I could not find anything on that. Is this phaenomenon normal or what am I doing wrong? are there some specific borders?
UPDATE
hello and thanks for answering this question. i tried to implement that code directly into my editor (dreamweaver cs6) and thought it used to be the same style as on jsfiddle. wrong. it seems like there is a problem with the editor because as a result i will get this:
it looks like there are automatically added tabs left hand side. so is there anybody who knows about that problem? thanks a lot.
UPDATE 2:
i had to reset the css default settings.

Answer 1

I would say the main one is that you have your labels set to 80px wide and your inputs are set to 180px wide.
Probably need them to be the same size. I'd also check your math to make sure it all adds up properly.

Answer 2

Add box-sizing: border-box to the inputs. (Also add -moz-box-sizing and -webkit-box-sizing for the relevant vendors)

Answer 3

use this instead, box-sizing:border-box causes the padding to be used from inside the input element rather than the outside.
#left #frame form fieldset ul input {
position:relative
color: #444444;
font-size: 10px;
width: 180px;
height: 18px;
padding-left: 5px;
outline:none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box
}

Answer 4

yes box-sizing:border-box; is a good solution but simply reduce the size of input-box 7 pixel{5px for left-side padding and 2px for border of both left and right side border} so now final width of input-box is 173px

Answer 5

It looks like you want to put some input fields (a form, perhaps?) into columns and just don't seem to know the best way to do it?
I am working on a form right now, actually- here's how i do it when I want to have two columns within a div.
<form>
<fieldset>
<legend>The form to fill out</legend>
<p> Any instructions for the form. Fields marked with <span class="red">Red</span> are required.</p>
<div class="columnA">
<label for="fname">Label 1</label>
<input type="text" name="fname" tabindex="1" />
</div>
<div class="columnB">
<label for="address1">Address:</label>
<input type="text" name="address1" tabindex="10" />
</div>
<div class="fullwidth">
<input type="submit" value="Register"/>
</div>
</fieldset>
</form>
Then, make sure that these things are set (minimally) in your CSS for each of the above classes:
margin
padding
width
(advice: I actually set these first within every piece of my CSS- it gives me a structure if I have my own order of elements for my CSS. I am not saying use mine, but adopt your own- it saves time when you're troubleshooting)
Remember, if you want the parent element (whatever div is containing the form) all child elements have to be floated as well.
Now, you might think to float columnA to the left and columnB to the right, with both set at a width that adds up to 50% once you add in margins and padding. However, I've found that unless my content demands that much real estate, you can actually float both to the left and you'll get a better look for the form as a whole.