float: right in IE7 dropping to a new line

Question

I've been stuck on a float issue for a little while so I am hoping the community can help me again. I have a new webform here. As usual it looks fine in everything but IE7 (or IE8 in compatibility).

For some reason some of the containers are ending up with the form field on a new line below the form text. CSS is not my strong point, otherwise I'd be able to fix this I am sure. Can anyone tell me what I am missing here?

I tried adding float: left to the form text but that ended up with a whole other mess.

score 76 · Accepted Answer · answered Jan 25 '11 at 19:12

76

Try to small change markup: place items with a float before items without it (from the same row). It should help.

answered Jan 25 '11 at 19:12

oryol

5,178
2
23
18

2

This helped me today, what a simple fix. Thanks! – Jeff Sheldon Mar 14 '12 at 17:44
Id depends.. But if we need to display page correctly in the IE we can't have ideal semantic. It's IE :) – oryol Aug 02 '12 at 16:21
2

Gotta say, I've seen "solutions" to this problem everywhere. None of them worked except this one, well played and thank you :D – Riveascore Sep 06 '13 at 15:53
We have to support IE6 due to certain government sectors still relying upon it and this really saved me; I spent ages trying to fix this before stumbling upon your answer. Thank you. – carbontwelve Nov 14 '14 at 15:46

score 2 · Answer 2 · answered Jul 12 '13 at 18:02

I know it's been a long time since this was posted, but I found a solution that I like for this. The gist is using 'expression' tag in your CSS for IE7 only to move the floated element to be the first element of the parent in the DOM. It will be semantically correct for all other browsers, but for IE7 we modify the DOM to move the floated element.

In my case, I have:

<div>
    <h1></h1>...<p>any other content...</p>
    <small class="pull-right"></small>
</div>

In my CSS for pull-right, I use:

.pull-right {
    float:right;
    *zoom: ~"expression( this.runtimeStyle.zoom='1',parentNode.insertBefore( this,parentNode.firstChild ))";
}

The result is that IE7 moves my <small> to be the first element of <div> but all other browsers leave the markup alone.

This might not work for everyone. Technically, it is modifying the markup but only in the DOM for IE7 and it's also a javascript solution.

Also, I understand there may be some performance issues with expression (it's slow), so perhaps it's not ideal there are a lot of floats like this. In my case, it worked well and allowed me to keep semantically correct HTML.

score 1 · Answer 3 · edited Dec 07 '12 at 10:31

If you float your .formText left, float your span.required left, and then float your inputs left as well you should be able to line them up on the same line.

I'd modify your markup a bit. your <span class="formText"> should really be a <label>

For example:

<P class=formRow>
<label for="FirstName">First Name<SPAN style="FLOAT: left" class=required>*</SPAN></label>
<INPUT id=FirstName class=formTextbox name=FirstName> 
</P>

and your css would be something like this:

.formRow {
  clear: both;
}
  .formRow label {
     float: left;
     width: 150px;
  }
  .formRow input {
     float: left;
  }

score 0 · Answer 4 · answered Jan 25 '11 at 19:09

You could try to make the span tags you have for the text a fixed width, float them left, and do the same for the input field you want to correspond with. I'd also recommend using a label tag instead of a span tag on forms. No real solid reason for it, it's just that a label was meant for exactly what you have the span tag doing.

score 0 · Answer 5 · answered Jan 25 '11 at 19:09

0

What you want to do is add a clear:both as the last sibling of your floated elements.

So something like:

<div style="float:left;">
  <!-- children of div here -->
</div>
<div style="clear:both;">
  <!-- leave empty -->
</div>

answered Jan 25 '11 at 19:09

Dave

6,141
2
38
65

float: right in IE7 dropping to a new line

5 Answers5

Linked