Box model and inline form elements?

HTML & CSS
1

It’s funny, I spend so much time avoiding the box model, that when I have to compensate for it, I have to kick the dust off of my brain cells.

In this case, I am trying to style inline input/button elements.

The input has padding/border. The button is just a fixed width (no padding/borders).

Both are inline elements.

See code below.

Questions:

  1. Do I need to compensate for the IE box model for the input (even though it is inline)? As you can see, I added the * html hack to the input, but is it necessary?

  2. The below input and buttons are fitting inside of a 200px wide container… How can I make the input and button fit exactly into that width (with a little width between the two)?

170px + 24px = 194px

Based on above math, it seems like I could throw a 6px margin-right on the input and call it good! This, of course, does not work cross-browser.

Is there a fudge factor, between (contemporary + IE7/IE8) browsers, with inline elements? It appears that there is, that is why I put only a 2px right margin on the input (basically, I am trying to give some space between the input and the button. It would be nice for the two elements to fit exactly into its parent container).

I am thinking a   might be my best option (in other words, just go with the fudge factor, and stop trying to get these inline elements to fit perfectly).

Tips?

Thanks!
Micky

CSS:

#fm_search {
	margin: 0;
	padding: 0;
}
	#fm_search * { vertical-align: middle !important; }
	#fm_search label { color: #999 !important; }
	#fm_search input {
		width: 158px; /* 170px when you add it all up. */
		border: 1px solid #999;
		margin: 0 2px 0 0; /* Fudge factor */
		padding: 5px;
		-webkit-box-shadow: 0 0 3px #999;
		-moz-box-shadow: 0 0 3px #999;
		box-shadow: 0 0 3px #999;
	}
		* html #fm_search input { width: 170px; } /* Fix IE box model. */

form button.go {
	text-indent: -999em;
	border: none;
	background: #fff url(../images/template/btn-01.png) no-repeat;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
}
form button.go:hover,
form button.go:active { background-position: 0 -24px; }

HTML:

<form id="fm_search" action="./" method="get">
	
	<div>
		
		<label class="offjs" for="fm_search-q">Search...</label>
		<input id="fm_search-q" name="q" type="text" maxlength="50">
		<button id="fm_search-go" class="go" name="go" type="submit">Go</button>
		
	</div>
	
</form>

Note: Using JS to position label over input, so it has no affect on this demo.

2

Hi,

Float the inputs and labels and the white space between them completely collapses and you can set the dimensions exactly as you wish.


#fm_search input,#fm_search label,#fm_search button{float:left;}

Note that the button element and the submit elements use the old (broken) model and include padding and borders in the inside.

There is no need to do anything special for IE6

3

Hi Paul! Thanks so much for the reply and pro help! I really appreciate it. :slight_smile:

Floating sounds good to me… Just curious, does the box model behave the same on an inline input field? In other words, if I set a width on my inline input (like in my example which has border/podding) will I need to compensate for the broken box model in IE? I assume that I only need to worry about the broken box model on block elements?

Sorry if stupid question. :slight_smile:

Again, thanks for tip! I will float the elements.

Also, thanks for tips on submit and button elements, I did not know that. :slight_smile:

Have an excellent day!

Cheers,
Micky

4

Inputs are replaced elements like images and can have width and height defined unlike inline elements which do not take dimensions. Inputs and images behave like inline-block in most respects so there is no need to set them to display:block unless you want a line feed at the end.

In other words, if I set a width on my inline input (like in my example which has border/podding) will I need to compensate for the broken box model in IE? I assume that I only need to worry about the broken box model on block elements?

IE doesn’t have a broken box model :slight_smile:

Only IE5.x (or IE in quirks mode) use the broken box model. IE6 and upwards use the same box model as everyone else so unless you are supporting ie5.x then there’s no need to think about it at all.

Sorry if stupid question. :slight_smile:

No - all questions are valid if you don’t know the answers. :slight_smile:

5

Ah, that makes sense! Learn something new every day! :smiley:

Thanks for pointing this out! Heheh. :slight_smile:

LOL! Shows you how long it has been since I last dealt with IE and the box model… Thankfully, I dropped support for IE5 a while back (unless required by client).

You ROCK!

I have learned so much from you help and examples! Thanks a billion Paul!

Cheers,
Micky