adrian.s85 Posted August 1, 2009 Share Posted August 1, 2009 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 More sharing options...
dsonesuk Posted August 1, 2009 Share Posted August 1, 2009 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%;} Link to comment Share on other sites More sharing options...
adrian.s85 Posted August 1, 2009 Author Share Posted August 1, 2009 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 More sharing options...
Ingolme Posted August 2, 2009 Share Posted August 2, 2009 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 2, 2009 Share Posted August 2, 2009 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. Link to comment Share on other sites More sharing options...
adrian.s85 Posted August 2, 2009 Author Share Posted August 2, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.