CODEWITHSUNDEEP
htmlcssstylesborder
bonny
bonny

Reputation: 3247

css fieldset borders

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:

cs6 fieldset

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.

Upvotes: 0

Views: 3235

Answers (5)

Melanie Sumner
Melanie Sumner

Reputation: 180

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.

Upvotes: 0

Melanie Sumner
Melanie Sumner

Reputation: 180

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.

Upvotes: 1

Manish Sharma
Manish Sharma

Reputation: 1720

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

Upvotes: 0

Matt Hintzke
Matt Hintzke

Reputation: 7994

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
}

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

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

Upvotes: 0

Related Questions