CODEWITHSUNDEEP
htmlcssinternet-explorer-7internet-explorer-6
vince88
vince88

Reputation: 3299

IE 6/7 and floats

My forehead is bruised out of frustration over this issue. In the standards compliant browsers my layout looks fine but, of course, IE7 and IE6 like to make a hot mess of everything. I'm trying to make a simple header that has some text to the left and a form inline on the right. The header is 835px wide and centered using auto margins. Here is my code:

<div id="header"> 
    <span>Some Text</span>
        <div style="display: inline; float: right; margin-top: 6px; position: relative;">
            Jump to: <form ... style="display: inline;"> blah blah </form> 
        </div>
</div>

As far as I can tell IE6/7 are treating the div containing the form as a block element. It is correctly displayed on the right of the header div but gets pushed down. I have tried giving the inner div a width and absolute position but to no avail. I would actually like to avoid absolute positioning as well as conditional statements if possible. There has to be something I'm overlooking. Any suggestions?

UPDATE: Here is a screenshot from IE7 alt text http://vincentalcivar.com/ie7.png

Upvotes: 3

Views: 190

Answers (3)

Gert Grenander
Gert Grenander

Reputation: 17084

Change <span>Some Text</span> to <span style="float: left;">Some Text</span>.

Also, you might want to remove to remove margin-top: 6px; position: relative; from the DIV.

Edit: Here's the code.

<div id="header"> 
  <span style="float: left;">Some Text</span>
  <div style="display: inline; float: right;">
    Jump to: <form style="display: inline; margin: 0;"> blah blah </form> 
  </div>
  &nbsp;
</div>

Added a &nbsp; (and removed the overflow: auto;), since IE6 thinks that the line has no content after the floats.

Upvotes: 2

Jason McCreary
Jason McCreary

Reputation: 72971

I don't have access to IE6/7 at the moment. However, there are float bugs with each of those browsers. Adding CSS property of zoom: 1 will trigger hasLayout for these elements and help them render as expected.

Although you don't need to add this via a conditional stylesheet, I would recommend it as it is a browser specific fix.

It is possible that some of your other styles are conflicting. I am not sure if you were attempting to fix the issue, but display: inline shouldn't be necessary.

It may help to post a screenshot of how things look in IE6/7.

Upvotes: 0

Martin Bean
Martin Bean

Reputation: 39389

I'm not sure why you've marked up the elements like you have, but for some text to the left and a form to the right, I would have done the following:

<div id="header">
    <div id="text_holder">
        <p>Lorem ipsum dolor set amet.</p>
    </div>
    <form>
        ...
    </form>
</div>

And the following CSS:

#header {
    width: 835px;
    margin: 0 auto;
    overflow: auto;
}
#text_holder {
    float: left;
}
#header form {
    float: right;
}

Upvotes: 1

Related Questions