Image Positioning

[adrian.s85]

Hi,i'm trying to create an image gallery for my website and so far it works nice in FF, Safari and Opera but it doesn't work in IE (I tested it in IE7).Could anyone help me make it work in IE as well? this is the gallery: www.adrian-schmidmeister.ch/gallery/world_gallery.phpand this is the CSS code for the gallery:

div.gallery {	width:700px;	margin-left:40px;	margin-bottom:20px;	padding-left:20px;	overflow:auto;}div.thumb {	display:table;	float:left;	height:120px;	width:120px;	margin:10px;	background-color:#222;}a.thumb {	display:table-cell;	text-align:center;	vertical-align:middle;}img.thumb {	max-height:100px;	max-width:100px;	border:solid 1px #999;	text-align:center;	vertical-align:middle;	margin-left:auto;	margin-right:auto;}

many thanks in advance.

[dsonesuk]

just looked at your code and noticed the # in front of some of the declarations, which i think will cause IE to fail processing these declarations, and also fails css validation because of these.div.thumb { display:table; float:left; height:120px; width:120px; margin:10px; text-align:center; vertical-align:middle; background-color:#222; #position: relative;}a.thumb { display:table-cell; text-align:center; vertical-align:middle; #position: absolute; #top: 50%; #left: 50%;}

Edited August 1, 2009 by dsonesuk

[adrian.s85]

just looked at your code and noticed the # in front of some of the declarations, which i think will cause IE to fail processing these declarations, and also fails css validation because of these.div.thumb { display:table; float:left; height:120px; width:120px; margin:10px; text-align:center; vertical-align:middle; background-color:#222; #position: relative;}a.thumb { display:table-cell; text-align:center; vertical-align:middle; #position: absolute; #top: 50%; #left: 50%;}

sorry...actually i figured it out thanks to an how-to on the internet how I can fix this and it is exactly with those # in front of some declarations (that only IE will read) that i managed to make it work for every browser!and yes, that way it doesn't validate anymore as CSS standard but at least until IE fixes it's issues it's a hack that works!thank you for the answer, I apreciate it.best regards.

[Ingolme]

sorry...actually i figured it out thanks to an how-to on the internet how I can fix this and it is exactly with those # in front of some declarations (that only IE will read) that i managed to make it work for every browser!and yes, that way it doesn't validate anymore as CSS standard but at least until IE fixes it's issues it's a hack that works!thank you for the answer, I apreciate it.best regards.

You might want to search on Google for "conditional comments".The technique you're using is called a "hack" and the big disadvantage of them is that at any moment they may unexpectedly cause other browsers to behave strangely. (for example, if they happened to receive an update).Also, CSS hacks give your code an unprofessional look, if you actually have plans on doing web developing as a job. Edited August 2, 2009 by Ingolme

[dsonesuk]

why not put below in an IE external style sheet such as IE.cssdiv.thumb { position: relative;}a.thumb {position: absolute; top: 50%; left: 50%;}and call it using

<!--[if IE]><link href="IE.css" rel="stylesheet" type="text/css" /><![endif]-->    

OR you could do this

<!--[if IE]><style type="text/css">div.thumb { position: relative;}a.thumb {position: absolute; top: 50%; left: 50%;}</style><![endif]-->    

it will produce the same result and also validate.

Edited August 2, 2009 by dsonesuk

[adrian.s85]

why not put below in an IE external style sheet such as IE.cssdiv.thumb { position: relative;}a.thumb {position: absolute; top: 50%; left: 50%;}and call it using

<!--[if IE]><link href="IE.css" rel="stylesheet" type="text/css" /><![endif]-->    

thanks guys, I think I will do the trick above with the conditional statement.thank you again for the help.