Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Aug 2003
    Location
    scotland, edinburgh
    Posts
    176
    Thanks
    5
    Thanked 1 Time in 1 Post

    Keep text input field and submit button the same relative size.

    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:
    Code:
    <!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

  • #2
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    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!
    You can not say you know how to do something, until you can teach it to someone else.

  • #3
    Regular Coder
    Join Date
    Aug 2003
    Location
    scotland, edinburgh
    Posts
    176
    Thanks
    5
    Thanked 1 Time in 1 Post
    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.
    Code:
    <!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.
    Code:
    <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

  • #4
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    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.
    You can not say you know how to do something, until you can teach it to someone else.

  • #5
    Regular Coder
    Join Date
    Aug 2003
    Location
    scotland, edinburgh
    Posts
    176
    Thanks
    5
    Thanked 1 Time in 1 Post
    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:
    Code:
    <!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?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by tsclan View Post
    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 -
    Code:
    <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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Aug 2003
    Location
    scotland, edinburgh
    Posts
    176
    Thanks
    5
    Thanked 1 Time in 1 Post
    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.
    Last edited by tsclan; 03-31-2009 at 03:43 PM.

  • #8
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    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.
    You can not say you know how to do something, until you can teach it to someone else.

  • #9
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by tsclan View Post
    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:
    Code:
    input[type=submit] #textfield {
       height: 1.0em;
    }
    but be aware that attribute selectors is buggy in IE7.

    best regards

  • #10
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    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"

    Code:
    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.

    Code:
    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
    Code:
    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/intern...rerdevtoolbar/tool and inspect unstyled elements with that.

    For Safari here the default CSS

    Code:
    /*
     * 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
    You can not say you know how to do something, until you can teach it to someone else.

  • #11
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Quote Originally Posted by timgolding View Post
    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

  • #12
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Ah ok
    You can not say you know how to do something, until you can teach it to someone else.

  • #13
    Regular Coder
    Join Date
    Aug 2003
    Location
    scotland, edinburgh
    Posts
    176
    Thanks
    5
    Thanked 1 Time in 1 Post
    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:

    Code:
    <!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>

  • #14
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    ah ok cool
    You can not say you know how to do something, until you can teach it to someone else.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •