Issue with aligning CSS in Internet Explorer 7

Everything looks great on Firefox and IE8, but on IE 7 the middle "search input text field" is not aligned properly with the other two fields. It seems to be dropping down slightly.

Here is the code - thank you for your help:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>CSS IE 7 Issue</title>
        <style type="text/css">
        .search{
        background:#000000;
        width:700px;
        border:3px solid #000;

        }
        .inputWrap, .buttonWrap, .selectWrap {float:right; border:0px solid #000;} input[type="text"], input[type="button"],select {height:1.5em; line-height:1.5em; font-size:100%; border-width:0; padding:0;} /* ie7- specific css */ .search .textfield {float:right; display:inline;}
        </style>
    </head>
    <body>
        <div class="search">
            <form id="searchForm" action="#" method="post">
                <div class="buttonWrap"><input type="button" value="Go" /></div>
                <div class="inputWrap"><input type="text" value="Search .." /></div>
                <div class="selectWrap">
                    <select>
                      <option value="Company">Company</option>
                      <option value="Profession">Profession</option>
                      <option value="People">People</option>
                    </select>
                </div>
            </form>
            <br style="clear:both"/>
        </div>
    </body>
</html>

Answer №1

  • Check out this DEMO:
.search {
  text-align: right;
  background: #000000;
  width: 700px;
  border: 3px solid #000;
}
form {
  vertical-align: middle;
  padding: 5px;
  margin: 0;
}
form div {
  display: inline;
  border: 0;
  margin: 0 5px 0 0;
  padding: 0;
}
input, select {     
  vertical-align: middle;
  margin: 0;
  padding: 0
}

Answer №2

To ensure consistency, set the width of all elements and their parent on the same level explicitly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Animate the Bootstrap carousel from top to bottom instead of the traditional left to right movement

Is there an option available in the bootstrap carousel to animate it from top to bottom and bottom to top, rather than from right to left and left to right? jsFiddle link <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval=" ...

Conceal / Modify / Incorporate a picture

My ultimate goal is to have a hidden box and image that will be revealed based on the result of other functions. The box should change its background color, display an image, and switch images depending on the function called. I am facing two issues with ...

Tips for eliminating the default margin without using a float

Exploring the world of divs and buttons led me to an interesting discovery: removing a float creates a natural margin. Upon entering this styling: body { background: gray; } button { font-size: 17px; color: white; margin-l ...

What is the proper way to showcase the hover effect on a nested ul list item in the DOM?

In an attempt to create a menu, I have written the following code: var sheet_nav = document.createElement('style'); sheet_nav.innerHTML = "nav{ margin: 100px auto; text-align: center;}"; document.head.appendChild(sheet_nav); var sheet_nav_ul = ...

Can the orientation of the card reveal be customized in Materializecss?

Exploring the card-reveal feature in the materializecss framework on this page: https://codepen.io/JP_juniordeveloperaki/pen/YXRyvZ with official documentation located at: In my project, I've rearranged the <div class="card-content"> to display ...

Adjusting element placement on collapsed navbar using Bootstrap

I've been developing a navbar for a webpage and have successfully aligned the data left and right with the Brand in the center. However, when the navbar collapses, the alignment shifts to Left (over) Brand (over) Right. I want the Brand to remain at t ...

Ways to display or conceal various divs by employing an if/else statement?

I am aiming to conditionally display various divs based on certain criteria: Show the "x" div if it's not already visible Display the "y" div only if the "x" div is already being displayed Show the "z" div only if both the "x" and "y" divs are alrea ...

Unable to apply a border to the button

I'm having trouble adding a border to my button on the website. I've tried setting the color, which works fine for the font color within the button, but the border properties are not working. Despite trying some highly rated solutions, none of th ...

What is causing my anchor tags not to reflow properly?

I've been working on my new website and I'm facing a challenge that I just can't seem to solve. Here's the link: When I resize my browser to "mobile width", making it narrower than the row of oval "Tags" below my site menu, I want the ...

Tips for anchoring a row to the bottom of a Bootstrap webpage

After working with bootstrap, I am looking to position the last row of the page at the bottom in a fixed and responsive size manner. ...

Remove the empty space between lines of images

Is there a way to remove the horizontal and vertical space between the squares? <div class="first"> <ul> <li><img src="http://dummyimage.com/40x40/111111/000000.jpg"/></li> <li><img src="http://dummyimage ...

Altering the display attribute cancels out any opacity transitions

When using JavaScript to change the opacity of an element with transition: opacity 1s, the expected duration of one second is met, as demonstrated here: onload = e => { var p = document.getElementsByTagName("p")[0]; p.style.opacity = 1; }; p { ...

Creating a Gradient Effect for Partial Next Slide on Slick Slider using Bootstrap 4

I am currently designing a responsive carousel using Bootstrap-4 and slick.js. With the center-mode enabled, I noticed that it shows a partial next slide. I am interested in adding a gradient to this partial next-slide, but I am uncertain about how to acco ...

CSS Resizing the screen leads to misalignment of the footer layout

I am currently working on a page located at However, I have encountered an issue where the footer is not displayed properly when the screen size is changed. Below is the CSS code for the footer: #footer_1 { background: url("../images/bgfooter2.png") ...

In my Ionic/Angular project, I'm attempting to showcase two columns side by side in a row. However, the layout seems to be stacking them on top of each other with the

I am having some trouble arranging two columns in a row for my Ionic/Angular project. It seems like the content is stacking on top of each other instead of side by side. Here's the CSS I'm using: <ion-grid class="rewards-container&q ...

Why won't hover over function properly in separate divs for two items?

My goal is to show text when hovering over a logo, but the text and logo are in different divs. Despite trying various solutions like using display: none and display: block, I still can't get it to work. import styles from '../styles/Float.module ...

How can I adjust the regular font size within a paragraph or link using bootstrap?

Looking at the fs-* classes can be very helpful, you can find them here: https://i.sstatic.net/l1Y22.png The issue I'm facing is that these classes only work for h1 to h6 headings, and not for smaller text. For example, I am unable to adjust the fo ...

The surprising height discrepancy in the li element while using the jQuery sortable plugin

After implementing this plugin, everything was running smoothly except for one minor bug that I encountered - the li element was displaying an unexpected height. To replicate this issue, follow these steps: 1. Open the sortable demo in Internet Explorer an ...

The functionality of Bootstrap Mobile css is most effective when navigating by scrolling downwards

I am experiencing a strange issue. I am using Ajax to load the Search form. The CSS is being applied correctly, but there is an unusual problem with the bottom margin. The bottom margin only appears when you scroll down in mobile view. When you load the f ...

div that adjusts its max-width to always perfectly match the width of its contents

Check out this jsfiddle for more information: http://jsfiddle.net/tN6QE/2/ The CSS code we are using is as follows: div { display: inline-block; border: solid 1px black; padding: 10px; max-width: 200px; } We are dealing with two scenarios here. ...