Why won't my textbox and buttons be the same height?

**jweighell** · Jun 10, 2011 01:37

I'd like a search box with a button immediately butted up next to it, with both elements the same height... But I can't get them to be the same height across all browsers! It seems like a simple task, but it just won't work! This is how I'd like it to work, and I've tried all sort of different permutations...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style type="text/css">
			.searchtext { border:1px solid #000; border-right:none; padding:4px; margin:0px; }
			.searchbutton { border:1px solid #000; background:#fd0; vertical-align:top; padding:4px; margin:0px; }
		</style>
	</head>

	<body>
		<input type="text" class="searchtext" /><input type="submit" value="Search" class="searchbutton" />
	</body>
</html>

Can anyone help me please? Am I doing something dumb?!

Jonathan

**Paul O'B** · Jun 10, 2011 02:48

HI,

Hi, Welcome to Sitepoint

.

You'll need to do something like this although there is likely to be some differences across systems.

Code:

.searchtext {
    border:1px solid #000;
    border-right:none;
    padding:4px;
    margin:0px;
    float:left;
    height:16px;
    overflow:hidden;
    line-height:16px;
}
.searchbutton {
    border:1px solid #000;
    background:#fd0;
    vertical-align:top;
    padding:4px;
    margin:0;
    float:left;
    height:26px;
    overflow:hidden;
    width:5em;
    text-align:center;
    line-height:16px;
}

**jweighell** · Jun 10, 2011 03:18

Thanks for the reply - any explanation why what I was doing didn't work?

I did want to avoid setting the heights in pixels to allow for the font size to change...

**Paul O'B** · Jun 10, 2011 04:35

Originally Posted by jweighell

Thanks for the reply - any explanation why what I was doing didn't work?

The simple fact is that the inputs and submits are not the same size by default anyway. So adding padding and font-size is never going to make them equal for all browsers as they all have different methods of rendering these form elements. It's only when you fix the height that you can get some sort of accuracy although this can be risky if fonts are to be scaled.

Also the input button uses the normal box model but submit buttons use the alternative box model where padding and borders are included in the width and height of the element and not added to it.

The inputs are best floated to fix whitespace and margin gaps that will stop them butting up and aligning correctly (where pixel position isn't required then I wouldn't float them as I usually use display:inline-block for the label and having a float in the mix messes up the display and makes it harder to control).

I did want to avoid setting the heights in pixels to allow for the font size to change...

Although you could make then appear ok for one browser they would not be the same in other browsers because of the reason I mentioned above ad setting a height is the only sure way.

You could set em height so it scales with text size or you can remove some of the padding so the text can expand without over-running the inputs.

This example will allow scaling from 10px - to about 22px before it starts to overlap.

Code:

.searchtext {
    border:1px solid #000;
    border-right:none;
    padding:0 4px;
    margin:0px;
    float:left;
    height:24px;
    overflow:hidden;
    line-height:24px;
}
.searchbutton {
    border:1px solid #000;
    background:#fd0;
    vertical-align:top;
    padding:0 4px 3px;
    margin:0;
    float:left;
    height:26px;
    overflow:hidden;
    width:5em;
    text-align:center;
    line-height:24px;
}

Or you could use ems for the height but are likely to get rounding errors in various browsers thus breaking the display more than the pixel version would.

Form elements are always awkward and inconsistent. Sometimes its better to style the parent of the inputs (e.g. a parent span) and then make the input itself transparent with no borders or margins.

**jweighell** · Jun 10, 2011 04:47

Thanks for taking the time to explain Paul.

Bit of a shame, I'd assumed they'd both act as you'd expect in the normal box model, but unfortunately it seems not!

Jonathan

**Paul O'B** · Jun 10, 2011 04:56

Originally Posted by jweighell

Thanks for taking the time to explain Paul.

Bit of a shame, I'd assumed they'd both act as you'd expect in the normal box model, but unfortunately it seems not!

Jonathan

Unfortunately form elements are tied closely to each individual browser and formed with proprietary properties of which not many are available for styling which is why the best advice is usually to do nothing.

Submits and select boxes both use the alternative box model and so you have to account for this when designing although of course the select is virtually unstylable in IE.

**Candygirl** · Jun 10, 2011 05:25

Originally Posted by Paul O'B

Unfortunately form elements are tied closely to each individual browser and formed with proprietary properties of which not many are available for styling which is why the best advice is usually to do nothing.

If we know wich one is involved we're supposed to be able to reset it? In FF4 if you set (found there):

Code:

input[type="submit"]::-moz-focus-inner {border:0;padding:0;margin:0;}

Then the exemple above looks ok as in IE9, opera10, chrome. How about in Safari, does anyone know if we can use something like that ?

**Paul O'B** · Jun 10, 2011 05:52

Originally Posted by Candygirl

If we know wich one is involved we're supposed to be able to reset it? In FF4 if you set (found there):

Code:

input[type="submit"]::-moz-focus-inner {border:0;padding:0;margin:0;}

Then the exemple above looks ok as in IE9, opera10, chrome. How about in Safari, does anyone know if we can use something like that ?

Yes I've posted that code a number of times in the forums already and I do usually include this code in my reset.

Code:

input[type="submit"]::-moz-focus-inner{
  padding: 0;
  border: none;
}

However, generally I dislike fiddling with proprietary code for minor differences. Webkit does have its own rules and indeed you can change elements completely in webkit and moz.

Code:

-webkit-appearance:none;
-moz-appearance:none;

I also find that mac and PC are generally 1px out in text alignment of controls which usually precludes most pixel perfect fixes anyway.

A lot of these proprietary form behaviours are for things like the hover outlines on submit buttons and the depressed effect when clicked. Once you start removing things then you lose all these visual clues.

**EarlyOut** · Jun 10, 2011 06:19

Originally Posted by Paul O'B

A lot of these proprietary form behaviours are for things like the hover outlines on submit buttons and the depressed effect when clicked. Once you start removing things then you lose all these visual clues.

I've also found that it's often impossible to alter just one aspect of the appearance of something like a button. If you want to change one element of its appearance, you are now responsible for addressing all aspects of its appearance. In other words, you usually can't tell the browser, "Use your defaults for this, except for X."

**jweighell** · Jun 10, 2011 06:34

Code:

input[type="submit"]::-moz-focus-inner {border:0;padding:0;margin:0;}

I think that reset actually fixes most of the problems I was having! I'll go with that for now - it seems good enough :-)

User Tag List

Thread: Why won't my textbox and buttons be the same height?

Thread Tools

Display

Why won't my textbox and buttons be the same height?

Bookmarks

Bookmarks

Posting Permissions