Page 1 of 1
Border Radius
Posted: Sat Aug 20, 2011 3:53 pm
by 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
Re: Border Radius
Posted: Sat Aug 20, 2011 4:47 pm
by 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.
Re: Border Radius
Posted: Sat Aug 20, 2011 6:06 pm
by 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
Re: Border Radius
Posted: Sun Aug 21, 2011 12:23 pm
by 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
Re: Border Radius
Posted: Sun Aug 21, 2011 12:54 pm
by Timbalu
danst0 wrote: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")
Re: Border Radius
Posted: Sun Aug 21, 2011 2:02 pm
by onli
You placed border-radius.htc in s9yroot/uploads?
Re: Border Radius
Posted: Mon Aug 22, 2011 10:03 am
by danst0
Re: Border Radius
Posted: Mon Aug 22, 2011 10:44 am
by 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 */
}
Re: Border Radius
Posted: Mon Aug 22, 2011 2:08 pm
by 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.
Re: Border Radius
Posted: Mon Aug 22, 2011 3:09 pm
by 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.
Re: Border Radius
Posted: Mon Aug 22, 2011 3:34 pm
by 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
Re: Border Radius
Posted: Tue Aug 23, 2011 11:00 am
by 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.
Re: Border Radius
Posted: Tue Aug 23, 2011 3:50 pm
by 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
Re: Border Radius
Posted: Tue Aug 23, 2011 5:33 pm
by Timbalu
danst0 wrote: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.