Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    43
    Thanks
    2
    Thanked 0 Times in 0 Posts

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

    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
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    The w3c validator (see link in my sig) reports 89 errors on your page.

    How do you know that the problem is not caused by one of these errors?

    My advice is never try to fix layout problems before you have eliminated all validation errors.

    Michael.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #3
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    Well actually you are partially correct, the thing is the structure and styles..

    Code:
    #formulario_registro  {
    background:none repeat scroll 0 0 white;
    border:1px solid #B9B9B9;
    /*clear:right;
    margin-left:525px;*/ <--- margin that sets off your div way to the right
    padding:9px 12px 29px 30px;
    width:346px;
    Heres' the HTML structure that I made for you.. I moved the <p> inside the containng div of inicio_sesion.. for grouping purposes..
    Code:
    <div id="contenedor_formularios">
          <div id="contenedor_formulario_inicio_sesion">
          <div id="formulario_inicio_sesion">
          Entra
          </div>
          <p><a href="#">¿Has olvidado tu contraseña?</a></p>
          </div>
           <div id="formulario_registro">Regístrate</div>
    </div>
    Here's the style
    Code:
    #contenedor_formulario_inicio_sesion{width:200px; float:left;}
    #formulario_inicio_sesion{border:#010000 1px solid;}
    #formulario_registro{width:400px; float:left; border:#010000 1px solid;}
    Just copy the form tables inside the divs.. and adjust your width to your liking.. of course the sum of the widths of your divs should not be greater than the containing div contenedor_formularios.. cause that will case the last div which is formulario_registro to be pushed down..

    Hope it helps..

  • #4
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    The following additions will give you a better layout (for all browsers):

    Code:
    <!-- modifications -->
    <style type="text/css">
    #contenedor_formularios {
    width:700px;
    }
    #contenedor_formulario_inicio_sesion {
    float:left;
    }
    #formulario_registro {
    float:right;
    margin-left:0;
    }
    </style>
    <!-- end modifications -->
    However it would be better to modify your existing stylesheets, rather than make these additions.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •