Member Avatar for 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;
  }
  • 5 Contributors
  • 4 Replies
  • 232 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Anahit

Dani AI

Generated

Good start, — using border-radius is the right, simple solution for modern browsers. Keep it as your primary approach: current browsers implement border-radius reliably, so treat rounded corners as progressive enhancement rather than a layout hack. (developer.mozilla.org)

If old IE (IE6–8) must look identical, pick one of these pragmatic fallbacks rather than trying to force every browser to render CSS3 the same way:

  • Use a lightweight compatibility shim (common in 2010–2015): CSS3PIE (PIE.htc) can add border-radius support to IE6–8. It works, but has gotchas: the behavior: URL must be reachable (recommend an absolute/path relative to the page), affected elements often need position: relative and zoom: 1, and there are known z-index and filter conflicts. Test in real IE versions and read the known-issues notes before deploying. (hongkiat.com)

  • Server-side thumbnails (best cross-browser reliability): crop + render rounded corners when generating thumbnails (ImageMagick, GD, etc.). This gives pixel-perfect results in every browser and avoids JS/behavior workarounds.

  • Lightweight client fallbacks: a tiny JS plugin (what suggested) or image-corner overlays (what suggested) will work, but add runtime cost. Use feature detection (Modernizr) to only load fallbacks for browsers that lack border-radius. (modernizr.com)

A minimal, commonly used PIE example (for IE6–8 only) looks like:

/* apply only when you choose the PIE route */
.images {
  border-radius: 10px;
  position: relative;
  behavior: url(/scripts/PIE.htc);
  zoom: 1; /* helps IE6/7 */
}

Quick checklist before shipping: prefer server-side rounding for many thumbnails, test in real IE (not only emulators), ensure your PIE path is correct and avoid applying PIE to elements using complex filters. If appearance for legacy IE is non‑critical, rely on native border-radius and skip hacks — simpler and faster.

Recommended Answers

All 4 Replies

Member Avatar for 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...

Member Avatar for 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.

Edited by Kraai because: n/a
Member Avatar for 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.

Member Avatar for Anahit

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

Here is the corner.js.

<script type="text/javascript" src=""></script>
<script type="text/javascript">
$('.images').corner();

</script>

I think it will work.

/*!
 * jQuery corner plugin: simple corner rounding
 * Examples and documentation at: http://jquery.malsup.com/corner/
 * version 2.11 (15-JUN-2010)
 * Requires jQuery v1.3.2 or later
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * Authors: Dave Methvin and Mike Alsup
 */

/**
 *  corner() takes a single string argument:  $('#myDiv').corner("effect corners width")
 *
 *  effect:  name of the effect to apply, such as round, bevel, notch, bite, etc (default is round). 
 *  corners: one or more of: top, bottom, tr, tl, br, or bl.  (default is all corners)
 *  width:   width of the effect; in the case of rounded corners this is the radius. 
 *           specify this value using the px suffix such as 10px (yes, it must be pixels).
 */
;(function($) { 

var style = document.createElement('div').style,
    moz = style['MozBorderRadius'] !== undefined,
    webkit = style['WebkitBorderRadius'] !== undefined,
    radius = style['borderRadius'] !== undefined || style['BorderRadius'] !== undefined,
    mode = document.documentMode || 0,
    noBottomFold = $.browser.msie && (($.browser.version < 8 && !mode) || mode < 8),

    expr = $.browser.msie && (function() {
        var div = document.createElement('div');
        try { div.style.setExpression('width','0+0'); div.style.removeExpression('width'); }
        catch(e) { return false; }
        return true;
    })();

$.support = $.support || {};
$.support.borderRadius = moz || webkit || radius; // so you can do:  if (!$.support.borderRadius) $('#myDiv').corner();

function sz(el, p) { 
    return parseInt($.css(el,p))||0; 
};
function hex2(s) {
    var s = parseInt(s).toString(16);
    return ( s.length < 2 ) ? '0'+s : s;
};
function gpc(node) {
    while(node) {
        var v = $.css(node,'backgroundColor'), rgb;
        if (v && v != 'transparent' && v != 'rgba(0, 0, 0, 0)') {
            if (v.indexOf('rgb') >= 0) { 
                rgb = v.match(/\d+/g); 
                return '#'+ hex2(rgb[0]) + hex2(rgb[1]) + hex2(rgb[2]);
            }
            return v;
        }
        if (node.nodeName.toLowerCase() == 'html')
            break;
        node = node.parentNode; // keep walking if transparent
    }
    return '#ffffff';
};

function getWidth(fx, i, width) {
    switch(fx) {
    case 'round':  return Math.round(width*(1-Math.cos(Math.asin(i/width))));
    case 'cool':   return Math.round(width*(1+Math.cos(Math.asin(i/width))));
    case 'sharp':  return Math.round(width*(1-Math.cos(Math.acos(i/width))));
    case 'bite':   return Math.round(width*(Math.cos(Math.asin((width-i-1)/width))));
    case 'slide':  return Math.round(width*(Math.atan2(i,width/i)));
    case 'jut':    return Math.round(width*(Math.atan2(width,(width-i-1))));
    case 'curl':   return Math.round(width*(Math.atan(i)));
    case 'tear':   return Math.round(width*(Math.cos(i)));
    case 'wicked': return Math.round(width*(Math.tan(i)));
    case 'long':   return Math.round(width*(Math.sqrt(i)));
    case 'sculpt': return Math.round(width*(Math.log((width-i-1),width)));
    case 'dogfold':
    case 'dog':    return (i&1) ? (i+1) : width;
    case 'dog2':   return (i&2) ? (i+1) : width;
    case 'dog3':   return (i&3) ? (i+1) : width;
    case 'fray':   return (i%2)*width;
    case 'notch':  return width; 
    case 'bevelfold':
    case 'bevel':  return i+1;
    }
};

$.fn.corner = function(options) {
    // in 1.3+ we can fix mistakes with the ready state
    if (this.length == 0) {
        if (!$.isReady && this.selector) {
            var s = this.selector, c = this.context;
            $(function() {
                $(s,c).corner(options);
            });
        }
        return this;
    }

    return this.each(function(index){
        var $this = $(this),
            // meta values override options
            o = [$this.attr($.fn.corner.defaults.metaAttr) || '', options || ''].join(' ').toLowerCase(),
            keep = /keep/.test(o),                       // keep borders?
            cc = ((o.match(/cc:(#[0-9a-f]+)/)||[])[1]),  // corner color
            sc = ((o.match(/sc:(#[0-9a-f]+)/)||[])[1]),  // strip color
            width = parseInt((o.match(/(\d+)px/)||[])[1]) || 10, // corner width
            re = /round|bevelfold|bevel|notch|bite|cool|sharp|slide|jut|curl|tear|fray|wicked|sculpt|long|dog3|dog2|dogfold|dog/,
            fx = ((o.match(re)||['round'])[0]),
            fold = /dogfold|bevelfold/.test(o),
            edges = { T:0, B:1 },
            opts = {
                TL:  /top|tl|left/.test(o),       TR:  /top|tr|right/.test(o),
                BL:  /bottom|bl|left/.test(o),    BR:  /bottom|br|right/.test(o)
            },
            // vars used in func later
            strip, pad, cssHeight, j, bot, d, ds, bw, i, w, e, c, common, $horz;
        
        if ( !opts.TL && !opts.TR && !opts.BL && !opts.BR )
            opts = { TL:1, TR:1, BL:1, BR:1 };
            
        // support native rounding
        if ($.fn.corner.defaults.useNative && fx == 'round' && (radius || moz || webkit) && !cc && !sc) {
            if (opts.TL)
                $this.css(radius ? 'border-top-left-radius' : moz ? '-moz-border-radius-topleft' : '-webkit-border-top-left-radius', width + 'px');
            if (opts.TR)
                $this.css(radius ? 'border-top-right-radius' : moz ? '-moz-border-radius-topright' : '-webkit-border-top-right-radius', width + 'px');
            if (opts.BL)
                $this.css(radius ? 'border-bottom-left-radius' : moz ? '-moz-border-radius-bottomleft' : '-webkit-border-bottom-left-radius', width + 'px');
            if (opts.BR)
                $this.css(radius ? 'border-bottom-right-radius' : moz ? '-moz-border-radius-bottomright' : '-webkit-border-bottom-right-radius', width + 'px');
            return;
        }
            
        strip = document.createElement('div');
        $(strip).css({
            overflow: 'hidden',
            height: '1px',
            minHeight: '1px',
            fontSize: '1px',
            backgroundColor: sc || 'transparent',
            borderStyle: 'solid'
        });
    
        pad = {
            T: parseInt($.css(this,'paddingTop'))||0,     R: parseInt($.css(this,'paddingRight'))||0,
            B: parseInt($.css(this,'paddingBottom'))||0,  L: parseInt($.css(this,'paddingLeft'))||0
        };

        if (typeof this.style.zoom != undefined) this.style.zoom = 1; // force 'hasLayout' in IE
        if (!keep) this.style.border = 'none';
        strip.style.borderColor = cc || gpc(this.parentNode);
        cssHeight = $(this).outerHeight();

        for (j in edges) {
            bot = edges[j];
            // only add stips if needed
            if ((bot && (opts.BL || opts.BR)) || (!bot && (opts.TL || opts.TR))) {
                strip.style.borderStyle = 'none '+(opts[j+'R']?'solid':'none')+' none '+(opts[j+'L']?'solid':'none');
                d = document.createElement('div');
                $(d).addClass('jquery-corner');
                ds = d.style;

                bot ? this.appendChild(d) : this.insertBefore(d, this.firstChild);

                if (bot && cssHeight != 'auto') {
                    if ($.css(this,'position') == 'static')
                        this.style.position = 'relative';
                    ds.position = 'absolute';
                    ds.bottom = ds.left = ds.padding = ds.margin = '0';
                    if (expr)
                        ds.setExpression('width', 'this.parentNode.offsetWidth');
                    else
                        ds.width = '100%';
                }
                else if (!bot && $.browser.msie) {
                    if ($.css(this,'position') == 'static')
                        this.style.position = 'relative';
                    ds.position = 'absolute';
                    ds.top = ds.left = ds.right = ds.padding = ds.margin = '0';
                    
                    // fix ie6 problem when blocked element has a border width
                    if (expr) {
                        bw = sz(this,'borderLeftWidth') + sz(this,'borderRightWidth');
                        ds.setExpression('width', 'this.parentNode.offsetWidth - '+bw+'+ "px"');
                    }
                    else
                        ds.width = '100%';
                }
                else {
                    ds.position = 'relative';
                    ds.margin = !bot ? '-'+pad.T+'px -'+pad.R+'px '+(pad.T-width)+'px -'+pad.L+'px' : 
                                        (pad.B-width)+'px -'+pad.R+'px -'+pad.B+'px -'+pad.L+'px';                
                }

                for (i=0; i < width; i++) {
                    w = Math.max(0,getWidth(fx,i, width));
                    e = strip.cloneNode(false);
                    e.style.borderWidth = '0 '+(opts[j+'R']?w:0)+'px 0 '+(opts[j+'L']?w:0)+'px';
                    bot ? d.appendChild(e) : d.insertBefore(e, d.firstChild);
                }
                
                if (fold && $.support.boxModel) {
                    if (bot && noBottomFold) continue;
                    for (c in opts) {
                        if (!opts[c]) continue;
                        if (bot && (c == 'TL' || c == 'TR')) continue;
                        if (!bot && (c == 'BL' || c == 'BR')) continue;
                        
                        common = { position: 'absolute', border: 'none', margin: 0, padding: 0, overflow: 'hidden', backgroundColor: strip.style.borderColor };
                        $horz = $('<div/>').css(common).css({ width: width + 'px', height: '1px' });
                        switch(c) {
                        case 'TL': $horz.css({ bottom: 0, left: 0 }); break;
                        case 'TR': $horz.css({ bottom: 0, right: 0 }); break;
                        case 'BL': $horz.css({ top: 0, left: 0 }); break;
                        case 'BR': $horz.css({ top: 0, right: 0 }); break;
                        }
                        d.appendChild($horz[0]);
                        
                        var $vert = $('<div/>').css(common).css({ top: 0, bottom: 0, width: '1px', height: width + 'px' });
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.