Solved

IE7 floating issues with submit button and input field

Posted on 2012-03-15
2
426 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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
align Linkedin sign to the right page 5 37
is this a cms? 8 60
ms/access webbrowser address not valid  - 12 45
Bootstrap show icon when mobile text when computer or tablet 3 41
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

821 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