Gallery thumbnails and rounded corners

[george61]

My idea is to create a gallery in which the thumbnails have rounded corners. This works in every browser except IE because it won't support CSS3. Is there any hack for creating rounded corners for thumbnails in IE? Of course I'm not sure my HTML/CSS is good enough so take a look and give ideas for improvements. Best regards.

<div class="content">
	<div class="rowone">
		<ul class="listing">
			<li><a href="imgs/eli.jpg" class="lightbox"><img src="imgs/eli.jpg" width="150" height="100" class="images" /></a></li>
			<li><a href="imgs/ggallin.jpg" class="lightbox"><img src="imgs/ggallin.jpg" width="150" height="100" class="images" /></a></li>
			<li><a href="imgs/jontarata.jpg" class="lightbox"><img src="imgs/jontarata.jpg" width="150" height="100" class="images" /></a></li>
			<li><a href="imgs/macka s tatuirovki.jpg" class="lightbox"><img src="imgs/macka s tatuirovki.jpg" width="150" height="100" class="images" /></a></li>
			<li><a href="imgs/mk7.jpg" class="lightbox"><img src="imgs/mk7.jpg" width="150" height="100" class="images" /></a></li>
			<li><a href="imgs/P5010345.jpg" class="lightbox"><img src="imgs/P5010345.jpg" width="150" height="100" class="images" /></a></li>
		</ul>
  </div>
	<div class="rowtwo">
		<ul class="listing">
			<li><a href="imgs/P6300679.jpg" class="lightbox"><img src="imgs/P6300679.jpg" width="150" height="100" class="images" /></a></li>
			<li><a href="imgs/pederast.jpg" class="lightbox"><img src="imgs/pederast.jpg" width="150" height="100" class="images" /></a></li>
			<li><a href="imgs/photoshop pedal.jpg" class="lightbox"><img src="imgs/photoshop pedal.jpg" width="150" height="100" class="images" /></a></li>
			<li><a href="imgs/SANY1755.jpg" class="lightbox"><img src="imgs/SANY1755.jpg" width="150" height="100" class="images" /></a></li>
			<li><a href="imgs/SANY1761.jpg" class="lightbox"><img src="imgs/SANY1761.jpg" width="150" height="100" class="images" /></a></li>
			<li><a href="imgs/eli.jpg" class="lightbox"><img src="imgs/eli.jpg" width="150" height="100" class="images"/></a></li>
		  </ul>
	</div>
  </div>

and the CSS

.content{
  width: 1150px;
  height: 400px;
  margin: 0 auto;
  margin-top: 100px;
  }
  .listing{
  margin-top: 100px;
  display: inline;
  }
  li{
  display: inline;
  margin-left: 15px;
  }
  .images{
	border: 5px solid white;
	border-radius: 10px;
	-moz-border-radius: 5px;
  }
  .images:hover{
  border: 5px solid yellow;
  }
  .rowtwo{
  margin-top: 20px;
  }

[shaya4207]

There's a way to do it with images for the corners (kinda like having a .png with the 'corner' part transparent, and the extra part the same as your background), google it.

That said, using CSS3 at this point is probably not the best idea...

[Kraai]

Hi

Hopefully, IE9 will be more friendly to CSS3.

But, there is a hack for now, how good it actually work, you will only find out once you have done it.

But first, your CSS above is:

.images{
	border: 5px solid white;
	border-radius: 10px;
	-moz-border-radius: 5px;
  }

Also ad there

-webkit-border-radius: 5px;
-khtml-border-radius: 5px;

Above is for Chrome/Safari and Konquerer browsers.

For the IE hack, go to this web page: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

and scroll down to the part for IE browsers.

[floatingDivs]

Silly question, but if this is a hard-coded site, would you be up for using external services?

For instance, http://roundpic.com/ is a fantastic option because all you do is upload an image and specify the rounded-pixel size as well as which sides.

[Anahit]

Hi.
I suggest using jquery for rounding the corners.
You just include it in your part.

Here is the corner.js.

I think it will work.