<form> element stuff

...especially sizing

[Emperor]

Hi guys,

Here is the CSS:

div.box {
width: 100px;
margin: 0;
padding: 0;
border: none;
}
input {
width: 50px;
margin: 0;
padding: 0;
border: none;
}

I set everything explicitly just to be safe. Now here is the HTML:

<form>
<div class="box">
<input type="text" /><input type="text" />
</div>
</form>

...but it doesn't fit on one line like it should.

Maybe I shouldn't be messing with the dimensions of <input> elements? Also, as a side note, I hate how I have to put the <form> statement outside of the <div>.

Also, sometimes the buttons look messed up, especially the bottom chrome part, I think it has to do with the background; does anybody know about that?

Take care,
Emperor

[gohankid77]

That looks just fine in both Firefox 1.0PR and IE6. Perhaps you could try making div.box bigger? If that doesn't work, we might need to see your page in action.

[sonjay]

As a guess, you might try "display:inline" for the input declaration.

AFAIK, you can put the form tags inside the div if you want -- as long as both the opening and closing forms tags are inside the div:
<div>
<form>
<input><input>
<submit>
</form>
</div>

[Emperor]

Hi guys,

I tried some more stuff out.

Well, In IE6 if you specify a border for an <input type="text"> then the width is exact, but you have to specify at least a one pixel border. It also adds two pixels to the overall height, as if there is a one pixel margin on top and bottom, even with margin: 0.

About the <form> inside the <div>, it does function fine but makes a line break that way; it does the same thing with tables, I remember I use to put the <form> tag just before the <table>, so I guess it's not even CSS related.

Take care,
Emperor

[sonjay]

form {
margin:0;
padding:0;
}

[gohankid77]

form {
display: inline;
}