Problem in IE7 with a floating element. Clearing it doesn’t work

HTML & CSS
1

Hi,

I have this page.

The register form should be on the right on the sign in form, but it doesn’t…

I added “clear:right” to the registering div, but it doesn’t work…

Any idea?

Regards

Javi

2

Why don’t you just float the right block into place.

e.g.


#contenedor_formularios {
  [B]  width: 836px;[/B]
    margin: 0 auto;
}
#formulario_registro {
    background:#fff;
    border:1px solid #B9B9B9;
  [B]  /*margin-left:525px;*/[/B]
    padding:9px 12px 29px 30px;
    width:346px;
 [B]   float:right;[/B]
}

Just make sure elements that follow the above are cleared.

Note that you seem to have duplicate rules for the above so make sure you tidy them up and only have the one rule.

3

http://stommepoes.nl/tirengarfio.png

I see this as reason enough for IE7 to bump the form on the right down. Other browsers may be allowing stuff to overflow, IE not.

4

Hi Javi,
without my own computer in front of my I had to wander around your multiple stylsheets to find the code : ) I notice you mention two of them twice. Why? You also have <br></br>… that’s not one of the tags you can do that with. it’s an “empty” element. <br> is all you need in HTML4. <br/> for XHTML.

Clearing a float means keeping the next element after the float (the one with “clear” on it) to act like the float is just another element and start a whole new line.

And I also saw this:

ul.radio_list{

display: inline-block; /* si quito esto, el div para el mensaje de error aparece en linea con */ 
                       /* los radio buttons y sus etiquetas, dada la regla de "ul.radio_list li". */

I’llk bet that’s just in IE that the messages appear along with the radio buttons, right? Display: inline-block triggers Haslayout in IE and often you don’t see any side effects.

Anyway, what I think I see you doing (hard because I’m skipping around stylesheets) is a centered page container, with a form container inside, with a form inside floated left, and the other form pushed to the right with a left margin. Maybe IE is not letting the second form ride up next to the floated form, but if that’s the case, I would do it differently.

I’d have the registration form come first, and floated right. Then the login form can be centered (in this copy of Firefox, it looks like the login form is “centered” in the remaining space after the registration form). Since they are not working together, I would not put the forms in a form container. Or any other container. Since you’re using the main page container to constrain the width and then center everything, when you don’t want registration centered, I’d ditch it. Or keep registration form completely out of it.

For now, you might want to add some ugly background colours to each form and form container, so you can see them. I’m on someone’s computer and they don’t have IE, so I’d have to take a look tomorrow if someone doesn’t beat me to it tonight. Is there going to be more on this page? Is what I see in this Firefox how the page is intended to look? (looks a little lopsided right now)
Go ahead and throw your page through the W3C HTML validator and change any errors it reports. Tomorrow I may be able to see better what you’re going for and which IE bug this is (though again, I think I would rewrite this if I were you).