Hi scafcedric

Thank you for bringing this issue to our attention. To amend add the following to the end of your templates template.css (../templates/j51_horizon/css/template.css)

[code type=css]img.frame-2 {
background: -moz-linear-gradient(center top , #666666, #444444) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(99%,#444444)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #666666 0%,#444444 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #666666 0%,#444444 99%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #666666 0%,#444444 99%); /* IE10+ */
}[/code]
Ciarán

Hi Ciaran,

Thank you for your response, but this code is the same as I got :S
To be sure, I give you in attachement the template.css file I have.
By the way, the lines of code you gave here seems to concern the Opera, FF, Safari and IE 10+. But the problem occured with IE 9, and maybe the earlier versions.

It is strange that this problem does not occured with the frame-1...

Thanks for your help !
Scafcedric

Hi again,

I didn't realize that the fact that the colors was set with 3 numbers in place of 6 can do a difference...
So ok, I set the 666666 and 444444 and so on, it is better but not quite...

Here is in attachement the result in IE 9, you will see that the rounded corners appear on top of squared corners.

Thanks for your help !
Cédric

Sorry to say this is caused by the way IE handles border-radius and padding. To enable the radius in IE you would have to add the following CSS however this would be at the loss of the gradient border and drop shadow in all browsers..

[code type=css]img.frame-2 {
box-shadow:0px 0px 0px 5px #666666;
padding:0px;
}[/code]
Ciarán

Hi Ciaran,

Thank you for the feedback, for sure, something will never change, IE is a f.... browser :sick: :laugh:

kr,
Scafcedric