Problem with a div in IE6/7. No problem in FF/IE8

HTML & CSS
1

Hi,

i have this page.

login: fer
password: m
Note: after login you will be redirected to another page. Then click again the link i mention.

In FF/IE8 it works OK, but in IE6/7 the panel “Amigos” goes down…

Any idea?

Regards

Javi

2

Not tested.

Old IEs have problems properly shrink-wrapping float elements. Try applying a width to the floats.

cheers,

gary

3

Hhi, you have a right float inside of a left float and iE doesn’t like that.

Chnge the float direction

#datos_lateral{float:left;}

Although you would need to re arrange your HTML because now the link will be on the left :slight_smile:

4

Thanks, but I want my link “Editar mi perfil” on the right (between the personal data and the panel “Amigos”)…:rolleyes:

5

You need to rethink you would would do it then. I’m just merely telling you the issue ;). You could have the container b e float right (you’d need to switch up the HTML source) that way it doesn’t succumb to the bug.

6

Hi Javi,

Give “datos” this div with approx 350px.

7

Ok, i finally put inside the same div, “Fernando Salgado Alonso” (float: left) and “Editar mi perfil” (float: right).

But know, when i add a “clear: both” for the div below, i get a big gap between “Fernando Salgado Alonso________Editar mi perfil” and “Fecha de nacimiento”.

Here you have the page again.

Check it using FF.

Any idea?

8

Hi, that’s because it’s clearing hte image (since you set clear:both).

You really only need to clear from the right floated element to get this working (clearing the left as well will trigger what you are seeing)

#fecha_de_nacimiento{clear:right;}
9

Thanks Ryan it works, but when i give a larger size to the font,


#nombre_apellidos {
	
	float:left;
	[B]font-size:larger;[/B]
}

“Fecha de nacimiento” moves again…

Check the link again if you want.

Javi

10

Nope. Same bug as before. You have a right floated element inside a left floated


#cabecera_derecha{float:left;}
11

Hi,

Remove the float from the left side text and change the html so that the right float comes first.

e.g.


<div id="datos">
            <div id="ultimo_logeo">2010-03-29 06:03:29</div>
            <div id="datos_personales">
              [B]  <div id="cabecera_derecha"> <a href="/rs/web/frontend.php/miembros/edit/id/1">Editar mi perfil</a> </div>[/B]
                <div id="nombre_apellidos"> Fernando Salgado Alonso </div>
                <div id="fecha_de_nacimiento"> Fecha de nacimiento </div>
                <div id="edad">1990-01-01                (20 a&#241;os)</div>
                Provincia
                <div id="provincia">Madrid</div>
                Localidad
                <div id="localidad">Alcorcon</div>
                <div id="actualizacion_perfil">Ultima vez que actualizaste tu perfil: 2010-03-29 06:03:29 </div>
            </div>
        </div>
    </div>

Then:


#nombre_apellidos {
[B]    /*float:left;*/[/B]
    font-size:larger;
}

#panel_perfil {
    float: left;
[B]    width:520px;/* ie6 needs a width here*/[/B]
}

That section of html is suffering badly from divitus and anonymous inline boxes.:slight_smile:

e.g.


<[B]div[/B] id="provincia">Madrid</[B]div[/B]>
[B] Localidad[/B]
[B]<div [/B]id="localidad">Alcorcon<[B]/div[/B]>

Everything should be in a suitable semantic container

e.g.


<p id="provincia">Madrid</p>
<p>Localidad</p>
<p id="localidad">Alcorcon</p>

Only use divs when there are no other suitable elements or you want to divide a page into logical divisions.

If you use appropriate elements you can often lose the classes and ids as you can target more specifically.

e.g.


<div id="nombre_apellidos"> Fernando Salgado Alonso </div>

or much better as this seems to be a heading:


<h3> Fernando Salgado Alonso </h3>

Hope that helps :wink:

12

Thanks again Ryan, but adding that, “Fecha de nacimiento” is not in its place..I have tried to solve it with


#fecha_de_nacimiento{
	
	clear:left;
}

but “Fecha de nacimiento” goes down again..

13

See my post above as it fixes this issue for you :slight_smile:

14

Thanks, works!

so the order of html can matter so much… any place where could i read something about that? :confused:

15

It’s just the way that floats work.:slight_smile:

They float from the position they find themselves in. They won’t rise up against block level content above it in the html (unless that is a float also). Only the following content wraps a float. Therefore if you want content to wrap a float then the float must come first (apart form inline content on the same line but IE less than 8 gets that wrong anyway so it’s best to say floats must come first).