...

View Full Version : Keep text input field and submit button the same relative size.



tsclan
03-30-2009, 11:38 PM
Hi,
I am wanting to have a text field and submit button the same height as each other. I want to use em to size them up so that their sizes will be relative to the text size.
One thing I am finding hard to do is get both text field and submit button the same height no matter the text size. It seems that no matter what height I give them the submit button always grows faster.
Here is an example of what I have so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Same width and height test</title>
<style type="text/css">
#textField {
width:7em;
height:1em;
font-size:1em;
}
#submitButton{
width:1em;
height:1em;
font-size:1em;
}
body {
font-size: 1em;
}

</style>
</head>

<body>

<form method="post">
<input id="textField" name="Text1" type="text" /><input id="submitButton" name="Submit1" type="submit" value="submit" /></form>

</body>

</html>

Does anyone know how I can set them so that they have the same relative height to each other when the text size is changed.

Thanks

timgolding
03-31-2009, 12:56 AM
With submit buttons you have border and padding to contend with. You would need to set the submit buttons padding in terms of em and the default border on most browsers is a set size in pixels so you would still have the problem of those fex pixels staying the same. Unless your happy to scrap the border set as default by your browser and lose the nice rounded edges they provide. I can't remember if its line-height or height you need to set the height of your buttons? Have a play!

tsclan
03-31-2009, 01:47 PM
Thanks for your advice,
I have managed to create a text input field and submit button that maintain the same relative height and width when their text size is changed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
#sameSize {
width:2em;
height:1em;

font-size:2em;
line-height:2em;

border:0em;
padding:0em;
margin:0em;

background-color:red;
}

body {
font-size: 1em;
font-family: arial, verdana, helvetica, sans-serif;
}
</style>
</head>
<body>
<form method="post">
<input id="sameSize" name="Text1" type="text" /><br>
<input id="sameSize" name="Submit1" type="submit" value="submit" alt="GO" />
</form>
</body>
</html>

The problem comes when I convert the submit button to a input of type image e.g.

<input id="sameSize" name="Submit1" type="image" value="submit" alt="GO" />
The relative width then seems to break when the text size changes from medium in IE and I can't think of anything that could be causing it to behave in this way.

Any ideas how to make it behave like a submit button?

Thanks

timgolding
03-31-2009, 03:36 PM
Do you get the same effect if you set it in terms of %. Just a point about your code. you can only use an id once in your html. If your going to be reusing that css on more than one element then it should be a class not and ID. IDs are for one element only.

tsclan
03-31-2009, 04:17 PM
I had completely forgotten that I was using an id for more than one element. I was originally using two ids, one for each input. At the last minute I thought I should just use one for both to make sure both have the same CSS. Itís amazing what can get pas your mind when youíre zoned in on a different problem.

As for your advice in setting the dimensions as percentages like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.sameSize {
width:50%;
height:50%;

font-size:50%;
line-height:50%;

border:0%;
padding:0%;
margin:0%;

background-color:red;
}

body {
font-size: 100%;
font-family: arial, verdana, helvetica, sans-serif;
}
</style>
</head>
<body>
<form method="post">
<input class="sameSize" name="Text1" type="text" /><br>
<input class="sameSize" name="Submit1" type="image" value="submit" src="search_go.gif" alt="GO" />
</form>
<p>Text will change size</p>
</body>
</html>
Then the input wonít change when the text size is changed, only the text changes its size. This was the whole reason behind using em.

Any other ideas?

Excavator
03-31-2009, 04:25 PM
Then the input wonít change when the text size is changed, only the text changes its size. This was the whole reason behind using em.

Any other ideas?

Style the text size and input size the same? Like this -
<form method="post">
<input class="sameSize" name="Text1" type="text"><br>
<input class="sameSize" name="Submit1" value="submit" src="search_go.gif" alt="GO" type="image">
</form>
<p class="sameSize">Text will change size</p>

tsclan
03-31-2009, 04:41 PM
Thanks Excavator but that still doesn't help the fact that using percentages wont allow the resize of the input elements when the user changes the text size on their browser. Using em's worked but didnt maintain a relative size like when I used a submit button instead of an image button.

timgolding
04-04-2009, 04:48 PM
hmm i wonder whats the difference with image buttons to submit buttons. Do you know what would really help here is a list of all the default for all the tags for all browsers. Does such a thing exist? I'll have a quick search.

oesxyl
04-04-2009, 05:05 PM
Thanks Excavator but that still doesn't help the fact that using percentages wont allow the resize of the input elements when the user changes the text size on their browser. Using em's worked but didnt maintain a relative size like when I used a submit button instead of an image button.
try:


input[type=submit] #textfield {
height: 1.0em;
}

but be aware that attribute selectors is buggy in IE7.

best regards

timgolding
04-04-2009, 05:19 PM
Had a look in my firefox 3.0 installation directory and found these two files. res/forms.css and res/html.css that seems to be where firefox it getting its defaults from. There's some others there but that seems to be the main firefox defaults css. Heres the codes i found for input type="image"



input {
-moz-appearance: textfield;
/* The sum of border-top, border-bottom, padding-top, padding-bottom
must be the same here, for buttons, and for <select> (including its
internal padding magic) */
padding: 1px 0 1px 0;
border: 2px inset ThreeDFace;
background-color: -moz-Field;
color: -moz-FieldText;
font: -moz-field;
line-height: normal !important;
text-align: start;
text-transform: none;
word-spacing: normal;
letter-spacing: normal;
cursor: text;
-moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
text-indent: 0;
-moz-user-select: text;
}

input[type="image"] {
-moz-appearance: none;
padding: 0;
border: none;
background-color: transparent;
font-family: sans-serif;
font-size: small;
cursor: pointer;
-moz-binding: none;
-moz-appearance: none;
}


and for button if your using that.



input {
-moz-appearance: textfield;
/* The sum of border-top, border-bottom, padding-top, padding-bottom
must be the same here, for buttons, and for <select> (including its
internal padding magic) */
padding: 1px 0 1px 0;
border: 2px inset ThreeDFace;
background-color: -moz-Field;
color: -moz-FieldText;
font: -moz-field;
line-height: normal !important;
text-align: start;
text-transform: none;
word-spacing: normal;
letter-spacing: normal;
cursor: text;
-moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
text-indent: 0;
-moz-user-select: text;
}


button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
-moz-appearance: button;
/* The sum of border-top, border-bottom, padding-top, padding-bottom
must be the same here, for text inputs, and for <select>. For
buttons, make sure to include the -moz-focus-inner border/padding. */
padding: 0px 6px 0px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
color: ButtonText;
font: -moz-button;
line-height: normal !important;
white-space: pre;
cursor: default;
-moz-box-sizing: border-box;
-moz-user-select: none;
-moz-binding: none;
text-align: center;
}

button {
/* Buttons should lay out like "normal" html, mostly */
white-space: normal;
text-indent: 0;
}



Interestinly heres the css for inputs border


border: 2px inset ThreeDFace;

I guess you could use ThreeDFace to style other border similarly in firefox. Anyway Thats the defaults for firefox.

And for IE7 I think there default CSS is probably burried in some DLL or some rubbish. But you can download the IE developer http://channel9.msdn.com/wiki/internetexplorerdevtoolbar/tool and inspect unstyled elements with that.

For Safari here the default CSS




/*
* The default style sheet used by khtml to render HTML pages
* (C) Lars Knoll (knoll@kde.org) 2000
*
* Konqueror/khtml relies on the existence of this style sheet for
* rendering. Do not remove or modify this file unless you know
* what you are doing.
*/

@namespace "http://www.w3.org/1999/xhtml";

html {
display: block
}

/* The children of the <head> element all have display:none */

head {
display: none
}

meta {
display: none
}

title {
display: none
}

link {
display: none
}

style {
display: none
}

script {
display: none
}

/* generic block-level elements */

body {
display: block;
margin: 8px
}

p {
display: block;
margin: 1.0__qem 0px
}

div {
display: block
}

layer {
display: block
}

marquee {
display: inline-block;
overflow: marquee
}

address {
display: block
}

blockquote {
display: block;
margin: 1__qem 40px 1em 40px
}

q {
display: inline
}

q:before {
content: '"'
/* FIXME: content: open-quote; */
}

q:after {
content: '"'
/* FIXME: content: close-quote; */
}

center {
display: block;
/* special centering to be able to emulate the html4/netscape behaviour */
text-align: -khtml-center
}

hr {
display: block;
margin: 0.5em auto;
border-style: inset;
border-width: 1px
}

map {
display: inline
}

/* heading elements */

h1 {
display: block;
font-size: 2em;
margin: .67__qem 0 .67em 0;
font-weight: bold
}

h2 {
display: block;
font-size: 1.5em;
margin: .83__qem 0 .83em 0;
font-weight: bold
}

h3 {
display: block;
font-size: 1.17em;
margin: 1__qem 0 1em 0;
font-weight: bold
}

h4 {
display: block;
margin: 1.33__qem 0 1.33em 0;
font-weight: bold
}

h5 {
display: block;
font-size: .83em;
margin: 1.67__qem 0 1.67em 0;
font-weight: bold
}

h6 {
display: block;
font-size: .67em;
margin: 2.33__qem 0 2.33em 0;
font-weight: bold
}

/* tables */

table {
display: table;
border-collapse: separate;
text-align: -khtml-auto;
border-spacing: 2px;
border-color: gray
}

table[align="center"] {
margin-left: auto;
margin-right: auto
}

thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit
}

tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit
}

tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit
}

col {
display: table-column
}

colgroup {
display: table-column-group
}

tr {
display: table-row;
vertical-align: inherit;
border-color: inherit
}

td, th {
display: table-cell;
vertical-align: inherit
}

th {
font-weight: bold
}

caption {
display: table-caption;
text-align: -khtml-center
}

/* Lists */

ul, menu, dir {
display: block;
list-style-type: disc;
margin: 1__qem 0 1em 0;
-khtml-padding-start: 40px
}

ol {
display: block;
list-style-type: decimal;
margin: 1__qem 0 1em 0;
-khtml-padding-start: 40px
}

li {
display: list-item
}

ul ul, ol ul {
list-style-type: circle
}

ol ol ul, ol ul ul, ul ol ul, ul ul ul {
list-style-type: square
}

dd {
display: block;
-khtml-margin-start: 40px
}

dl {
display: block;
margin: 1__qem 0 1em 0
}

dt {
display: block
}

ol ul, ul ol, ul ul, ol ol {
margin-top: 0;
margin-bottom: 0
}

/* form elements */

form {
display: block;
margin: 0__qem 0 1em 0
}

legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: none
}

fieldset {
display: block;
margin-left: 2px;
margin-right: 2px;
padding: 0.75em 0.625em;
border: 2px groove ThreeDFace
}

button {
display: inline-block;
border: 2px outset ButtonFace;
background-color: ButtonFace;
color: ButtonText;
padding: 2px 2px 2px 2px;
cursor: default
}

button:active {
border-style: inset
}

input, textarea {
text-align: -khtml-auto
}

/* If we support for CSS2 system fonts, then we won't have to hard code Lucida Grande here. */
input, textarea, select, button {
margin: 0__qem;
font: 11px 'Lucida Grande';
color: initial
}

input[type="hidden"] {
display: none
}

input[type="radio"], input[type="checkbox"] {
margin: 3px 0.5ex;
-khtml-user-select: element
}

select, button, input[type="button"], input[type="image"], input[type="submit"], input[type="reset"], img {
-khtml-user-select: element
}

option, optgroup, area, param {
display: none
}

/* inline elements */

u, ins {
text-decoration: underline
}

strong, b {
font-weight: bolder
}

i, cite, em, var, address {
font-style: italic
}

tt, code, kbd, samp {
font-family: monospace
}

pre, xmp, plaintext {
display: block;
font-family: monospace;
white-space: pre;
margin: 1__qem 0
}

big {
font-size: larger;
}

small {
font-size: smaller;
}

s, strike, del {
text-decoration: line-through
}

sub {
vertical-align: sub;
font-size: smaller
}

sup {
vertical-align: super;
font-size: smaller
}

nobr {
display: inline;
white-space: nowrap
}

wbr {
white-space: normal
}

/* End Inline Elements */

:focus {
outline: auto 3px #1f5ccf
}

html:focus, body:focus {
outline: none
}

a:-khtml-any-link {
color: -khtml-link;
text-decoration: underline;
-khtml-user-select: element
}

a:-khtml-any-link:active {
color: -khtml-activelink
}

/* Bidirectionality settings */

bdo[dir="ltr"] {
direction: ltr;
unicode-bidi: bidi-override
}

bdo[dir="rtl"] {
direction: rtl;
unicode-bidi: bidi-override
}

/* End bidi settings */

/* other elements */

noframes {
display: none
}

frameset, frame {
display: block
}

/* noscript is handled internally, as it depends on the html settings */



Not sure about opera. I might make a web page with all this info on at some point. But that enough research for now :D

Fisher
04-04-2009, 05:33 PM
I guess you could use ThreeDFace to style other border similarly in firefox. Anyway Thats the defaults for firefox.

Unfortunately, I don't think trying to add back default styling works anymore in Firefox 3. I tried to do it with submit buttons in the past. Came upon this thread: revert to default style (http://www.sitepoint.com/forums/showthread.php?p=3920666)

timgolding
04-04-2009, 05:38 PM
Ah ok :)

tsclan
04-04-2009, 09:12 PM
Hi all,

I managed to fix this problem with the help of someone else where.
I simply needed to specify the body font size as 100% like so:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.sameSize {
width:4em;
height:2em;

font-size:1em;
line-height:2;

border:0;
padding:0;
margin:0;

background-color:red;
}

body {
font-size: 100%;
font-family: arial, verdana, helvetica, sans-serif;
}
</style>
</head>
<body>
<form method="post">
<input class="sameSize" name="Text1" type="text" title="Enter detail" /><br>
<input class="sameSize" name="Submit1" type="submit" value="Submit" title="GO" /><br>
<input class="sameSize" name="Submit1" type="image" value="Submit" src="images/submit.jpg" title="GO" />
</form>
</body>
</html>

timgolding
04-04-2009, 10:19 PM
ah ok cool



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum