Margin in IE6. Not in FF

Hi,

Im creating a list that shows a photo and personal data of people.

It’s here:

http://tiregarfio.byethost17.com/web/frontend_dev.php/miembros

username: fer
password: m

When i load it with IE6 i can see the list, but between the photos there are little space. I FF there isn’t any space.

Any idea?

Regards

Javi

Hi,
You should be able to take care of IE6/7 by resetting the vertical-align for your images in the html.

Add this to your layout.css

img {vertical-align:bottom}

mmm…it didnt work…

This is my .css:

div.miembro {
overflow: hidden;
clear: both
}

div.fotografia {
float:left;
vertical-align:bottom
}


Yeah but what’s the HTML context for that CSS?

Who encloses whom?

Could you post a bit of both? And, do you have a doctype?

When I log in, I get redirected here for some reason.

*edit I tried again in FF and then it worked… then I tried checking in IE7 and I got some symphony project page, lawlz…

Ok, I still haven’t checked in IE6 yet but IE7 definitely shows what Rayzur is talking about.

You have


div.fotografia {
float:left;
vertical-align:bottom
}

You don’t put the vertical align on the fotografia because it’s a div (so a block) and it’s floated (still a block).

The image itself however is who needs the vertical-align: bottom… look closely at Rayzur’s code. It says
img {vertical-align: bottom;}

In IE7 you can clearly see a little gap between the bottom of the foto and the green border. FF is not showing this gap but it’s a natural gap. So by moving the vertical-align over to the image itself and not the containing div you’ll fix the small problem i n IE7.

Gonna check IE6 now.

Ok IE6 is really messed up, I see peekaboo bug and other stuff…

IE6 is showing the green line for me, but maybe not for you. IE6 is not enclosing the floated div fotografia. If miembro had Haslayout (a width, or something that triggers haslayout in IE6) then the box miembro would “stretch” down to completely include fotografia. Right now it only “sees” the text.

Then you also have overflow: hidden, which without Haslayout for IE6 I think is also cutting stuff off (depending on how I size my browser, sometimes the bottom image is cut off). After getting Haslayout on the miembro box, overflow: hidden might be ok for IE6, but if not, you can tell IE6

  • html #miembro {overflow: visible;}

I think you’re just getting hit by a few bugs all at once.

*edit2 here’s what I see: http://stommepoes.nl/miembros.jpg

This is where I get redirected in Opera when I use the username and password :slight_smile:

And no I did not select teh wrong link :slight_smile:

Ryan, that happened to me too… open a new tab, and try the url again, and it should work. I think there’s a goofy backend on that, but if you play around (also with the Back button) you’ll eventually get there.

I got the papge working in IE6. I have to leave for owrk now.

It’s just a whole bunch of issues caused by many elements not having haslayout :slight_smile:

.listamiembros, div.miembro, #cabecera, div.datos_y_acciones{zoom:1;}
div.datos {float:none;}

The first list is all the elements taht need the haslayout

The second is just to fix something in all browsers :slight_smile:

Just tested IE7 actually to help you. It works perfect.

Cheers :slight_smile:

Yeah I got that redirect also and had to play with it before I got to the page.

I viewed it in IE8 then went to IE7 mode and I could see the gaps under the images.

After I sign in, if I just select the URL in the address bar and hit enter again it loads fine for me

Just for anyone who is having trouble :slight_smile:

Ok, now works. Thanks both!