IE7 and Firefox search input and button heights and widths

[JonnoW]

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

[RyanReese]

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

#crsSrch, #crsGoBtn{margin:0!important;}

That should align everything in every browser.

[JonnoW]

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!

[Paul O'B]

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.

[JonnoW]

Thanks for that Paul, I've managed to get it working now. I had no idea about the broken button box model!

Thanks again