SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 and Firefox search input and button heights and widths

    Hi,

    I've been working on the following page: http://www2.hull.ac.uk/files/homepag...iHomepage.html

    It is so nearly there, however if you take a look at the search bars and corresponding buttons in IE7 (or compatibility mode) or Firefox you will notice that they do not line up correctly. I've tried various ideas, removing all the padding/margins from the button does not work at all. I've been told not to use height for either of the elements, but I'm pretty stuck now. What's going on with it?

    I've also noticed in IE that there's a small amount of space between the left hand side of the Find a Course box and the course search box within it - although, again, there is no padding or margins on either.

    Finally, can anyone explain why when I view the same exact page in Firefox 10, Chrome 16, IE 7, and IE8 the Find a Course box appears to have a different width throughout. Ideally I'd like it to be like one seamless button/search box, I.E no gap in between the two elements. Is the box model different in all four browsers or have I just missed something obvious?

    Thank you very much,

    Jonno

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, as for the search bar and the logo not lining up right, it's because floated elements always rise up as high as they can go. You need to remove the floats from that entire header section and set vertical-align:bottom to the span containing the inputs.

    As for teh different spacing between the dropdown and the course bar, add this
    Code:
    #crsSrch, #crsGoBtn{margin:0!important;}
    That should align everything in every browser.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Ryan. Unfortunately that has not resolved the issue. It looks ok if I have no padding either element and set the font size to anything less than 1em :S

    It looks ok when I define a height, is there any reason I should not use a height to get them the same size?

    http://www2.hull.ac.uk/files/homepag...iHomepage.html

    Chrome:
    chromesearch.png


    Firefox:
    firefoxsearch.png

    IE7:
    ie7search.png



    The code that is styling these elements is as follows:
    CSS:
    /*Search box code*/

    .sbox {
    float:right;
    padding-top:10px;
    padding-right:20px;
    }


    span.sbox input, #goBtn {
    border: 0;
    }

    #srch_fld, #goBtn {
    background-color:#eeeeee;
    padding:7px 5px;
    font: italic 1.1em Georgia, "Times New Roman", Times, serif;
    }

    #srch_fld {
    width:200px;
    color:#a8a8a8;
    padding-left:10px;
    float:left;
    }

    #goBtn {
    width:40px;
    color:#fff;
    cursorointer;
    background-color:#76201c;
    }




    HTML:

    <span class="sbox">
    <input type="search" id="srch_fld" placeholder="Site search..." />
    <input type="button" id="goBtn" title="Go" value="Go" />
    </span>


    This is driving me nuts!

    Thanks!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    If you want it exact then you'll need to use width and heights to match up bearing in mind that the submit button uses the broken box model and the input uses the standard box model.

    Here's an example that works on most machines at standard settings on PC and Mac but will likely have issues at different dpi and various other settings. There is no one size that fits all because inputs are treated so differently cross browser.

    However the example above works for 99% of users and will still allow text to be resized within reason because it doesn't use vertical padding but line-height which allows the text to grow without pushing the element wider. You could instead create the background and borders with spans and then just make the inputs transparent with no borders/padding and then minor browsers differences won't be noticed. I don't really like adding extra code though especially when only a few people get a design that is a pixel or so out.

    The best advice is not to try and match form elements up and they will never be the same. Even if you just use padding and line-height then rounding errors will come into play and less likely to fit than using specific heights/widths. Also note that some elements such as selects and file inputs can hardly be styled at all is some browsers. In IE7 and under selects will not take height or padding.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Paul, I've managed to get it working now. I had no idea about the broken button box model!

    Thanks again


Tags for this Thread

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
  •