You just have to think big 
Thanks Paul, I will definitely have a look through the earlier tests.
I find a new way to get the result, just 1 px bug, I think it’s the border:1px solid #000; problems. because firefox, ie or other browser have not the same solution.
Hi Bill 1983 well done and don’t worry about the 1px bug as we can live with that You have a correct solution and is the method used by all so far.
Well done
I also have a solution from Simon (zcorpan) that is very neat but unfortunately only works in Opera (surprise surprise) but thanks anyway:)
PM sent. Haven’t actually been able to test it in IE6 or IE7, but it should probably work. But who knows for sure with those browsers, hehe. (And I feel kinda dirty about my solution )
Well done Johan that was the solution that we were looking for and works fine in IE6 and 7
There may indeed be a cleaner solution that doesn’t add extra mark-up and SgtLegend has an entry that works in IE8+ without extra mark up but fails in Opera.
Well done to both of you and thanks for taking the time out to play:)
Hey Paul, I can’t figure out the solution but I have a question.
The solution I provided (using background images) was obviously wrong for this assignment, but as a developer that does the backend as well as frontend programming I was wondering if there is a downside to the usage of background images compared to img tags.
Basically I’m wondering if for my own projects if I run into this ‘issue’ if I should go for the (I guess) more complicated method or with the background images (maybe including img’s for SEO’s sake but hiding them from the user).
Hi,
The answer is really the same for any image in your page. If the image is important to the content then it should be in the html. If the image is purely decoration then it should be in the background.
Obviously for a gallery the content is the images themselves so they really should be in the html.
However for ease of use if needed you could use an image replacement technique instead and supply text content to keep seo and screen readers happy and then use background images instead.
There never is one answer as requirements, situations and practicality always differ.
Was a good challenge but without adding those extra elements it was basically impossible, I did have fun and learned a lot so i do look forward to the next challenge as i am starting to get the hang of understanding these small riddles in the challenges
Anyone else struggling?
I’ll throw some clues out if anyone has tried but failed. The quiz will stay open for a couple of days more yet to let any stragglers have a go.
I have a solution for ie8+ (and opera) that doesn’t require any extra mark up (IE6 and 7 need one extra element added though).
Solution Time:
Ok time to wrap this little quiz up. Thanks for all the entries they were all great.
We had entries from the following:
ahmedij, lungcollapse, zcorpan, bill_1983, SgtLegend and cletus_spuckler.
The winner is ahmedij Well done.
Most entries followed the same idea so well done to all.
Solution
The solution to the problem is too think big as I mentioned in an earlier clue. It is quite easy to horizontally and vertically center an element of unknown height within a fixed height container but as we didn’t know the maximum height of the images how could we do this nicely?
The secret was to insert a div and to give it a height and width bigger than any image you could ever expect. There are browsers limits with large numbers but for my example I assumed 10,000px would be enough for any image. If you have bigger images than that then give up and take up something else
The div was placed inside a container with overflow:hidden so that it didn’t stick out and then it was positioned so that it was central. We know the width and height of the parent so its just a matter of positioning the div upwards and to the left by the required amount.
This leaves us with a container that can hold any size image (within reason) and then we use the old inline-block method of vertical centering as shown in the link above.
Here was my first attempt using the methods mentioned above.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.gallery {
margin:0;
padding:0;
list-style:none;
}
.gallery li {
width:200px;
height:200px;
overflow:hidden;
position:relative;
border:1px solid #000;
float:left;
margin:10px;
display:inline;
}
.gallery li div {
width:10000px;/* bigger than any image - can be any large number*/
height:10000px;/* bigger than any image - can be any large number*/
position:absolute;
top:-4900px;/* so that the 200px by 200px widnow is central within the 10000px div */
left:-4900px;
text-align:center;
white-space:nowrap;
}
.gallery li b {
display:inline-block;
vertical-align:middle;
width:1px;
height:10000px;
overflow:hidden;
}
.gallery li img {
display:inline;
vertical-align:middle;
border:1px solid #000;
}
</style>
</head>
<body>
<ul class="gallery">
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img1.gif" alt="test" width="200" height="200" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img2.gif" alt="test" width="110" height="110" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img3.gif" alt="test" width="300" height="200" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img4.gif" alt="test" width="900" height="1200" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img5.gif" alt="test" width="400" height="100" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img6.gif" alt="test" width="400" height="600" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img7.gif" alt="test" width="175" height="125" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img8.gif" alt="test" width="225" height="325" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img9.gif" alt="test" width="150" height="150" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img10.gif" alt="test" width="125" height="175" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img11.gif" alt="test" width="425" height="155" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img12.gif" alt="test" width="155" height="455" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img13.gif" alt="test" width="1550" height="1455" /></div>
</li>
<li>
<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img14.gif" alt="test" width="130" height="190" /></div>
</li>
</ul>
</body>
</html>
As you can see its pretty straight forward and will work right back to ie6 and possibly ie5.
The downside is that extra mark up needs to be added to achieve the effect so I made another solution that works without extra mark up but needs an expression fix for ie7 and under.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/* works in IE8+ - ie6 and 7 need the expression */
.gallery {
margin:0;
padding:0;
list-style:none;
}
.gallery li {
width:200px;
height:200px;
overflow:hidden;
position:relative;
border:1px solid #000;
float:left;
margin:10px;
display:inline;
text-align:center;
white-space:nowrap;
}
.gallery li:after{
content:" ";
display:inline-block;
width:1px;
margin-right:-10000px;
position:relative;
}
.gallery li img {
display:inline;
vertical-align:middle;
border:1px solid #000;
margin-top:-9800px;
overflow:hidden;
}
.gallery li:before{
content:" ";
width:1px;
margin-left:-10000px;
vertical-align:middle;
position:relative;
display:inline-block;
height:10000px;
overflow:hidden;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.gallery li img {
font-size:10px;
position:relative;
top:-5437px;
display: block;
left: 1000%;
margin:0 0 0 -2000%;
}
.gallery li {
font-size:10000px;
vertical-align:middle;
zoom:expression( runtimeStyle.zoom=1, insertAdjacentHTML('afterBegin', '<b></b>') );
}
</style>
<![endif]-->
</head>
<body>
<ul class="gallery">
<li><img src="http://www.pmob.co.uk/temp/images/css-img1.gif" alt="test" width="200" height="200" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img2.gif" alt="test" width="110" height="110" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img3.gif" alt="test" width="300" height="200" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img4.gif" alt="test" width="900" height="1200" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img5.gif" alt="test" width="400" height="100" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img6.gif" alt="test" width="400" height="600" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img7.gif" alt="test" width="175" height="125" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img8.gif" alt="test" width="225" height="325" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img9.gif" alt="test" width="150" height="150" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img10.gif" alt="test" width="125" height="175" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img11.gif" alt="test" width="425" height="155" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img12.gif" alt="test" width="155" height="455" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img13.gif" alt="test" width="1550" height="1455" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img14.gif" alt="test" width="130" height="190" /></li>
</ul>
</body>
</html>
If you don’t like the expression then adding one extra element would see it working in all browsers. I’ll leave you to work out how the above works
Most of the entries followed my first example and will follow shortly. Before I post the other entries there was one interesting entry from Simon (zcorpan) that only worked in opera but only required one line of css and no change to the html!!
zcorpan Opera only
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.gallery {
margin:0;
padding:0;
list-style:none;
}
.gallery li {
width:200px;
height:200px;
overflow:hidden;
border:1px solid #000;
float:left;
margin:10px;
display:inline;
}
.gallery li img {
border:1px solid #000;
}
/* http://dev.opera.com/articles/view/css3-object-fit-object-position/*/
.gallery li img { -o-object-fit:none; overflow:hidden; width:200px; height:200px }
</style>
</head>
<body>
<ul class="gallery">
<li><img src="http://www.sitepoint.com/forums/images/css-img1.gif" alt="test" width="200" height="200" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img2.gif" alt="test" width="110" height="110" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img3.gif" alt="test" width="300" height="200" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img4.gif" alt="test" width="900" height="1200" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img5.gif" alt="test" width="400" height="100" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img6.gif" alt="test" width="400" height="600" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img7.gif" alt="test" width="175" height="125" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img8.gif" alt="test" width="225" height="325" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img9.gif" alt="test" width="150" height="150" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img10.gif" alt="test" width="125" height="175" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img11.gif" alt="test" width="425" height="155" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img12.gif" alt="test" width="155" height="455" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img13.gif" alt="test" width="1550" height="1455" /></li>
<li><img src="http://www.sitepoint.com/forums/images/css-img14.gif" alt="test" width="130" height="190" /></li>
</ul>
</body>
</html>
Now wouldn’t that be easy if all supported it?
Here follow the other entries:
ahmedij:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.gallery {
margin:0;
padding:0;
list-style:none;
}
.gallery li {
width:200px;
height:200px;
overflow:hidden;
border:1px solid #000;
float:left;
margin:10px;
display:inline;
position:relative;
}
.gallery li div
{
height: 2000px;
width: 2000px;
left: -900px;
top: -900px;
line-height: 1995px;
overflow: hidden;
position: absolute;
text-align: center;
}
.gallery li img {
border:1px solid #000;
vertical-align:middle;
}
</style>
<!--[if lt IE 8]><style>
.gallery li div span {
display: inline-block;
height: 100%;
vertical-align:middle;
}
</style><![endif]-->
</head>
<body>
<ul class="gallery">
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img1.gif" alt="test" width="200" height="200" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img2.gif" alt="test" width="110" height="110" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img3.gif" alt="test" width="300" height="200" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img4.gif" alt="test" width="900" height="1200" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img5.gif" alt="test" width="400" height="100" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img6.gif" alt="test" width="400" height="600" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img7.gif" alt="test" width="175" height="125" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img8.gif" alt="test" width="225" height="325" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img9.gif" alt="test" width="150" height="150" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img10.gif" alt="test" width="125" height="175" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img11.gif" alt="test" width="425" height="155" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img12.gif" alt="test" width="155" height="455" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img13.gif" alt="test" width="1550" height="1455" /></div></li>
<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img14.gif" alt="test" width="130" height="190" /></div></li>
</ul>
</body>
</html>
lungcollapse:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sitepoint: Test Your CSS Skills Number 40 - Dead Centre</title>
<!--
What the task requires is that all images be centred horizontally and vertically within the 200px x 200px square which means that
small images will be centred nicely and very large images will just show the centre portion of the image which in most cases is likely
to be the important part of the image rather than just a flash of sky at the top. You cannot change the size of the image either by html
or css so the solution must work for an image at the size the image is.
http://www.andrewleeart.com/crosslinks/sitepoint/sitepoint-css40.html
-->
<style type="text/css">
/*
this method works as long as the image does not exceed 10,0000px
*/
.gallery {
margin:0;
padding:0;
list-style:none;
}
.gallery li {
width:200px;
height:200px;
overflow:hidden;
border:1px solid #000;
float:left;
margin:10px;
display:block;
position:relative;
}
.gallery div {
position:absolute;
height:10000px;
width:10000px;
top:-4900px;
left:-4900px;
line-height:0;
}
.gallery span {
display:table-cell;
height:10000px;
width:10000px;
vertical-align:middle;
text-align:center;
line-height:0;
}
</style>
<!-- handle alignment in IE 6 and IE 7 -->
<!--[if lt IE 8]>
<style type="text/css">
.gallery div {
position:absolute;
height:auto;
width:auto;
top:50%;
left:50%;
}
.gallery span {
display:block;
position:relative;
height:auto;
width:auto;
top:-50%;
left:-50%;
vertical-align:baseline;
}
</style>
<![endif]-->
</head>
<body>
<ul class="gallery">
<li>
<div>
<span><img src="sitepoint-css40/css-img1.gif" alt="test" width="200" height="200" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img2.gif" alt="test" width="110" height="110" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img3.gif" alt="test" width="300" height="200" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img4.gif" alt="test" width="900" height="1200" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img5.gif" alt="test" width="400" height="100" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img6.gif" alt="test" width="400" height="600" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img7.gif" alt="test" width="175" height="125" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img8.gif" alt="test" width="225" height="325" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img9.gif" alt="test" width="150" height="150" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img10.gif" alt="test" width="125" height="175" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img11.gif" alt="test" width="425" height="155" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img12.gif" alt="test" width="155" height="455" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img13.gif" alt="test" width="1550" height="1455" /></span>
</div>
</li>
<li>
<div>
<span><img src="sitepoint-css40/css-img14.gif" alt="test" width="130" height="190" /></span>
</div>
</li>
</ul>
</body>
</html>
bill_1983:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.gallery {
margin:0;
padding:0;
list-style:none;
}
.gallery li {
width:200px;
height:200px;
border:1px solid #000;
float:left;
margin:10px;
display: inline;
}
.container * {
vertical-align: middle;
}
/*\\*//*/
.container {
display: block;
}
.container span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
.container1 {
width:200px;
height:200px;
overflow:hidden;
display:block;
position: relative;
}
.container {
height: 2000px;
width: 2000px;
overflow:hidden;
display: block;
vertical-align: middle;
text-align:center;
position: relative;
line-height:2000px;
left:-900px;
top:-902px;
}
</style>
<!--[if lt IE 8]><style>
.container span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
</head>
<body>
<ul class="gallery">
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img1.gif" alt="test" width="200" height="200" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img2.gif" alt="test" width="110" height="110" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img3.gif" alt="test" width="300" height="200" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img4.gif" alt="test" width="900" height="1200" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img5.gif" alt="test" width="400" height="100" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img6.gif" alt="test" width="400" height="600" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img7.gif" alt="test" width="175" height="125" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img8.gif" alt="test" width="225" height="325" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img9.gif" alt="test" width="150" height="150" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img10.gif" alt="test" width="125" height="175" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img11.gif" alt="test" width="425" height="155" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img12.gif" alt="test" width="155" height="455" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img13.gif" alt="test" width="1550" height="1455" /></div>
</div>
</li>
<li>
<div class="container1">
<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img14.gif" alt="test" width="130" height="190" /></div>
</div>
</li>
</ul>
</body>
</html>
SgtLegend: - not working in opera and uses expression for <ie8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unknown image centering using CSS!</title>
<style type="text/css">
<!--
.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
border: 1px solid #000;
float: left;
height: 200px;
margin: 10px;
overflow: hidden;
position: relative;
text-align: center;
width: 200px;
}
.gallery li img {
*display: block;
left: 1000%;
margin-left: -2000%;
margin-top: -1911.5%;
*margin-top: expression(( 200 - this.height ) / 2);
position: relative;
top: 1000%;
*top: 0;
vertical-align: middle;
}
/* Opera hack */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.gallery li img {
left: 0;
margin-left: 0;
margin-top: 0;
top: 0;
}
}
-->
</style>
</head>
<body>
<ul class="gallery">
<li><img src="http://www.pmob.co.uk/temp/images/css-img1.gif" alt="test" width="200" height="200" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img2.gif" alt="test" width="110" height="110" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img3.gif" alt="test" width="300" height="200" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img4.gif" alt="test" width="900" height="1200" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img5.gif" alt="test" width="400" height="100" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img6.gif" alt="test" width="400" height="600" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img7.gif" alt="test" width="175" height="125" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img8.gif" alt="test" width="225" height="325" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img9.gif" alt="test" width="150" height="150" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img10.gif" alt="test" width="125" height="175" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img11.gif" alt="test" width="425" height="155" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img12.gif" alt="test" width="155" height="455" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img13.gif" alt="test" width="1550" height="1455" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img14.gif" alt="test" width="130" height="190" /></li>
</ul>
</body>
</html>
cletus_spuckler:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.gallery {
margin:0;
padding:0;
list-style:none;
}
.gallery li {
width:200px;
height:200px;
overflow:hidden;
border:1px solid #000;
float:left;
margin:10px;
display:inline;
position: relative;
}
.gallery li img {
border:1px solid #000;
display: inline;
vertical-align: middle;
}
.gallery span {
display: block;
height: 2000px;
left: -900px;
position: absolute;
text-align: center;
top: -900px;
vertical-align: middle;
width: 2000px;
}
.gallery b {
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
}
</style>
</head>
<body>
<ul class="gallery">
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img1.gif" alt="test" width="200" height="200" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img2.gif" alt="test" width="110" height="110" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img3.gif" alt="test" width="300" height="200" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img4.gif" alt="test" width="900" height="1200" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img5.gif" alt="test" width="400" height="100" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img6.gif" alt="test" width="400" height="600" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img7.gif" alt="test" width="175" height="125" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img8.gif" alt="test" width="225" height="325" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img9.gif" alt="test" width="150" height="150" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img10.gif" alt="test" width="125" height="175" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img11.gif" alt="test" width="425" height="155" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img12.gif" alt="test" width="155" height="455" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img13.gif" alt="test" width="1550" height="1455" /></span></li>
<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img14.gif" alt="test" width="130" height="190" /></span></li>
</ul>
</body>
</html>
Once again thanks for your support of these quizzes and keep an eye out for the next one. I’ll let you have a couple of weeks break first to recharge before the next one.
(If I missed anyone please shout as my computer died and my original list went missing.)
I see a very similar pattern occurring with those helper elements, this was fun nether the less
Thanks Chris
I’ll let you have a break for a couple of weeks and then I’ll set some more dastardly puzzles for you.
If you want to be able to use this cross-browser you should bug the other browser vendors to implement this already.
That would be like telling IE users to switch to Google Chrome, sure it may not be funny to IE users but it shares the same concept
I don’t see how that’s the same at all.
Hey, i would like to use that solution for a website
But i wondered, what if i want other size for the div than 200x200 ? what changes excactly needed to be done?
And how can i add a few lines of text below of each image?
and last question what are the spans in ahmedij are needed for? because when i removed them nothing changed (in firefox at least)
It all depends on what size you make the inner div as you just drag it upwards and left until the viewable div is central.
e.g. Here I said we’d start with an element that is 10000px x 10000px to cover any possible image size. The div in which the image is viewed is only 200px x 200px so we have to drag the big element upwards and to the left by 4900px so that the 200px window is now at the center.
.gallery li div {
width:10000px;/* bigger than any image - can be any large number*/
height:10000px;/* bigger than any image - can be any large number*/
position:absolute;
top:-4900px;/* so that the 200px by 200px window is central within the 10000px div */
left:-4900px;
text-align:center;
white-space:nowrap;
}
If the viewable window was only 100px x 100px then the negative margin in the above code would be 4950px. i.e. 4950 + 100 + 4950 = 10000. If the viewable div was 300x 300 then you would need to use 4850px. (4850 + 300 + 4850 = 10000)
And how can i add a few lines of text below of each image?
I don’t think that would make much sense in the context of the above and the text would probably need to be underneath the 200px x 200px window. Otherwise it would look a little odd with the text at various heights.
and last question what are the spans in ahmedij are needed for? because when i removed them nothing changed (in firefox at least)
The spans were for IE7 and under as could be noticed from the conditional comments:)
The spans were for IE7 and under as could be noticed from the conditional comments
haha, sorry didn’t notice that IF 
Thanks for your answer