Border Radius
Border Radius
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
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
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.
Note that IE9 supports border-radius.
Re: Border Radius
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
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
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:
But still if I use IE 8 it renders with sharp edges.
Any hints?
Daniel
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;
}
Any hints?
Daniel
Re: Border Radius
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.danst0 wrote:But still if I use IE 8 it renders with sharp edges.
Did you try with quotes? url("/uploads/border-radius.htc")
Last edited by Timbalu on Sun Aug 21, 2011 5:21 pm, edited 1 time in total.
Regards,
Ian
Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
Ian
Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
Re: Border Radius
You placed border-radius.htc in s9yroot/uploads?
Re: Border Radius
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 */
}
Regards,
Ian
Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
Ian
Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
Re: Border Radius
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.
- Attachments
-
- Screen Shot 2011-08-22 at 13.58.50.png (78.28 KiB) Viewed 10729 times
Re: Border Radius
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.
Give it a try and report.
Regards,
Ian
Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
Ian
Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
Re: Border Radius
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
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
- Attachments
-
- Safari version
- Screen Shot 2011-08-22 at 15.25.07.png (162.08 KiB) Viewed 10726 times
-
- IE version
- Screen Shot 2011-08-22 at 15.24.03.png (192.96 KiB) Viewed 10726 times
Re: Border Radius
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.
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.
Regards,
Ian
Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
Ian
Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
Re: Border Radius
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
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
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..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
Sorry I have no idea and time for the navi. Maybe you find something similar to PIE to render better.
Regards,
Ian
Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
Ian
Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian