SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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;
    }

  3. #3
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jweighell View Post
    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.

  5. #5
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jweighell View Post
    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.

  7. #7
    SitePoint Member
    Join Date
    May 2008
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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 ?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Candygirl View Post
    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.
    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.

  9. #9
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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."

  10. #10
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :-)


Bookmarks

Posting Permissions

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