Input Field Sizing Problem

[svoltmer]

I have a site that uses a universal header within several templates. The problem is there are multiple style-sheets for each template and so, I believe the placeholder text for my “Search” field in the header, is not sized consistently across all the templates. I have been looking at this for some time and cannot find the issue. Could someone please look over my “Search” field and help me get a consistent size between my template pages? Thanks!!

You will see the differences when clicking from the homepage:
http://www.rose-hulman.edu/
To either “About”, “Admissions”, “Academics”, etc.
http://www.rose-hulman.edu/about.aspx
http://www.rose-hulman.edu/admissions-financial-aid.aspx
http://www.rose-hulman.edu/academics.aspx

[svoltmer]

The actual width of the input grows and shrinks depending on which page you are on. I’ve tried changing the width of the class .search on the home page to match the 135px assigned to the .search class on the Admissions page, but it pushes the “Go” button below it. Why can’t I get the same widths to respond the same on these pages. That is my question.
I am using Chrome.

[svoltmer]

Thanks! That fixed the input size and position. Could you tell me why the logo and the search box moves outward when I go to the “About” page?

[svoltmer]

Well I thought I had it until I looked at Firefox. Any Ideas about the search box?

[svoltmer]

One of the issues I solved. I hadn’t included -moz-box-sizing:border-box, but I will still have to look over the sizing of the “Go” button.

As far as the odd stylesheets, that was due to the way I had to roll out a new homepage design while still retaining some of the current page templates. The homepage template was redesigned with a foundation grid, but the child pages, could not be done at this time.

[svoltmer]

Got it, After some digging.
Apparently Firefox considers any input with “type=submit” as a button, so it adds padding and border around it. Here is the fix:

input::-moz-focus-inner /Remove button padding in FF/
{
border: 0;
padding: 0;
}

Thanks for your help earlier wolf!

[Author]

Posts