Border Radius

[danst0]

Hallo,

just a short question on IE and the border-radius css tag. Well, I just realized that this is not supported in IE 8 and below (which sadly is the largest part of my visitors).

I tried the explanation here: http://dimox.net/cross-browser-border-r ... d-corners/

But I don't know where to put the border-radius.htc file (it doesn't work when I put it in my template folder).

Daniel

[onli]

When linking it like in the blog-post, it should be in the root-directory of s9y, where the index.php is located.

Note that IE9 supports border-radius.

[yellowled]

Also note that there is absolutely no reason why a design should have to look the same in any browser. While this can not be applied to any CSS feature, it is usually not an issue with border-radius – so what if a box usually has rounded borders but doesn't in IE<9? border-radius degrades gracefully without any further assistance.

There is just one group of people who compares web pages in different browsers and even different browser versions: Web designers.

YL

[danst0]

Hi,

thanks for the input.
@yellowled: I understand your point, but without border-radius, my page really looks ugly and since the IE <9 has a high percentage I think I should support it.

On the topic:
Right now I have this code in my style.css:

Code: Select all

div.serendipity_Entry_Date {
    padding-left: 15px;
    width: auto;
    background-color: #F0F0E5;
    border: 1px solid #E0E0D0;
    border-radius: 9px 9px 9px 9px;
    background-clip: padding-box;
    behavior: url(http://test.scrmblog.com/uploads/border-radius.htc);
    margin: 0 0 10px;
    padding: 10px;
    width: auto;
}

But still if I use IE 8 it renders with sharp edges.
Any hints?

Daniel

[Timbalu]

But still if I use IE 8 it renders with sharp edges.

Maybe you don't see the right ones. IE versions "sometimes" do not show these corners, while they are overlayed by a background color of a following div.
Did you try with quotes? url("/uploads/border-radius.htc")

[onli]

You placed border-radius.htc in s9yroot/uploads?

[danst0]

yes, you can check it out: http://test.scrmblog.com/uploads/border-radius.htc

Daniel

[Timbalu]

Just try to downsize the problem and copy the htc to root and use this instead of div.xxx

Code: Select all

.serendipity_Entry_Date {
  	border: 1px solid #E0E0D0;
  	-moz-border-radius: 9px;
  	-webkit-border-radius: 9px;
  	-khtml-border-radius: 9px;
  	border-radius: 9px;
  	behavior: url(border-radius.htc); /* MSIE fix */
}

[danst0]

This does not mitigate the problem, yet. FF and Safari still look good, IE just ignores it (see attachment). I also tried using quotes for the url without success.

[Timbalu]

There were others having this problem too. http://www.codingforums.com/showthread.php?t=204522 Some resolved it by removing position: elements, some by removing the background color of the upper level div, some by using http://jquery.malsup.com/corner/ and some by using http://css3pie.com/
Give it a try and report.

[danst0]

ok, PIE works.
But it sucks so much that I really don't know which event will be first me being finished with the IE adaptation or an IE 9 adoption rate of 90%...

Does anyone have IE related hints why my IE version does not look like my Safari one, or should I open a new thread?;-(

Daniel

[Timbalu]

I still think this is futile!
You second picture is IE8 mode, which cannot handle different background colors set this way. In this case by #mainborder and #mainpane. Disable their background-color settings and you will see PIE working. Maybe having the colors in classes will help, but this does not help you still having other problems to solve for different IE versions. IE9 has a "F12 Developertools", which is giving you some of the possibilities you can have with FF Firebug.

[danst0]

Ok, you convinced me: IE is the suckiest stinking browser one could find. I really hope for my readers that those 40 percent still using it are forced to do so, and not doing it by choice.

Only 10 percent of the IE users are on version 9 yet (so 4 percent overall), that's just sad!

But of course while playing with the IE 8 I found that my new drop down menu does not work like planned as well, so if you have any suggestions let me know in my other thread:
http://board.s9y.org/viewtopic.php?f=5&t=17930

[Timbalu]

Ok, you convinced me: IE is the suckiest stinking browser one could find. I really hope for my readers that those 40 percent still using it are forced to do so, and not doing it by choice.

Only 10 percent of the IE users are on version 9 yet (so 4 percent overall), that's just sad!

But of course while playing with the IE 8 I found that my new drop down menu does not work like planned as well, so if you have any suggestions let me know in my other thread:
http://board.s9y.org/viewtopic.php?f=5&t=17930

Well, thats life. Without MS & IE no web4all, without IEs bad parsing no other browsers, without their improve no IE9/10. To be continued. Its up to the webmasters to tell their visitors better browsers are alive, how to find a way to use them, like portable versions not beeing overruled by Systemadministrators etc..
Sorry I have no idea and time for the navi. Maybe you find something similar to PIE to render better.