Solved

IE7 floating issues with submit button and input field

Posted on 2012-03-15
2
428 Views
Last Modified: 2012-06-27
Hi,

I am working on a website for someone and i am trying to float the search elements left, or right, not really worried right now, but when i do it fails to appear correct in IE7. I thought i had cleared the floats but obviously either in the wrong place or totally wrong.

As it stands i have changed them by removing both float styles and just have them display:inline blocks, however this still didnt work.

Can anyone shine any light on the following address:

http://www.bluebean.org.uk/sites/tracynewman/

Thanks,

Andrew
0
Comment
Question by:Andy6350
2 Comments
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 37726538
The problem appears to be that there just isn't enough room for them side-by-side and I suspect it has something to do with the word "SEARCH" being in a text input element. IE has it's own algorithm for determining the automatic width of an input element. Try giving the one with "SEARCH" in it a fixed width with no left or right padding, centered, and see if that helps.
0
 

Author Comment

by:Andy6350
ID: 37727140
ah yes, thank you, i have been changing width and padding on everything but the input button.

Thank you, works a charm.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question