Firefox 3.5.7: how to fix the defect of the rounded edges of an image

Sometimes you just move an item, changing the point of view, to solve a problem seems insurmountable. When one has to do with compatibility between browsers and CSS, inventing solutions "spectacular" (stunts would say) is on the agenda. , per Safari e Google Chrome. What I show you an easy way to apply rounded corners to images using -moz-border-radius , which is available for Mozilla FireFox and -webkit-border-radius , Safari and Google Chrome.
Normally, these CSS attributes are applied to containers such as div :

1
2
3
4
5
6
7
8
div # box {
100px ; width: 100px;
100px ; height: 100px;
; -Moz-border-radius: 16px;
; -Webkit-border-radius: 16px;
#eee ; background: # eee;
1px solid #666 ; border: 1px solid # 666;
}

With HTML code like this:

1
"box" >< / div > < div id = "box"> </ div >

Obtaining:

Wanting to do the same thing on a picture, you realize that the result is partially done! Using a CSS like this:

1
2
3
4
5
6
{ # img {border-round
; -Moz-border-radius: 8px;
; -Webkit-border-radius: 8px;
#eee ; background: # eee;
1px solid #666 ; border: 1px solid # 666;
}

On an HTML formatting like this:

1
"round-border" src = "images/undolog.png" alt = "Round Image Test" / > < img id = "round-border" src = "images / undolog.png" alt = "Image Test Round" />

Safari and Google Chrome respond well:

While FireFox surprising showing:

As you can see from the screenshot above, FireFox 3.5.7 on the edge "rounded" but the image seems to have remained square!
A simple device - useful in specific cases - allows you to easily solve the problem:

1
2
3
4
5
6
div # box {
; -Moz-border-radius: 8px;
; -Webkit-border-radius: 8px;
url ( http://dominio.com/images/undolog.png ) no-repeat ; background: url (http://dominio.com/images/undolog.png) no-repeat;
1px solid #666 ; border: 1px solid # 666;
}

– impostando il suo sfondo con l'immagine che vogliamo visualizzare con i bordi arrotondati. In practice, instead of directly using the tag img , we use a container any - in this case a div - setting its background with the image we want to see with rounded edges.
This solution obviously has a number of drawbacks:

  1. ), di conseguenza nel DOM html non esiste nessuna immagine, il ché significa che eliminando i fogli di stile la nostra immagine scompare We lost the tag img (with its attribute alt ), so there is no html in the DOM image, which means that eliminating the stylesheets our image disappears
  2. Having to define a container (in our case a div ) using style sheets, we must know its size at the start

As I have written several times on this blog would be just the case that the "standard" CSS (2 or 3 that is) change its name to "everyone does what he wants" ...

One Response to "Firefox 3.5.7: how to fix the defect of the rounded edges of an image"

  1. January 21, 2010 vik :

    everyone does what he pleases

    lol
    Nothing is more true and the sad thing is that with the CSS 3 "separation" is increasing. On the other hand I would not give all the blame on the creators of the browser, some standards set by W3C are very vague.

    Reply Quote

Leave a comment

XHTML TAG PERMIT: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE: 
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL


Stop SOPA