Jump to content

Image Positioning


adrian.s85
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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 by Ingolme
Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...