The Serendipity Handbook

You can now read the (german) handbook here: PDF - https://github.com/s9y/Book (LaTeX source).

Forum-Information

Before posting about errors, make sure that the answer cannot already be found in our FAQ or by searching this forum!
Posting is restricted to registered users (registering is free and simple!) due to recent spam attacks. When having trouble with this board, contact garvin(-at)s9y(-dot)org.

Board index Themes Border Radius

Skinning and designing Serendipity (CSS, HTML, Smarty)
danst0
Regular
 
Posts: 197
Joined: Tue Jul 13, 2004 10:50 am

Postby danst0 » Sat Aug 20, 2011 3:53 pm

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

User avatar
onli
Regular
 
Posts: 1044
Joined: Tue Sep 09, 2008 10:04 pm

Postby onli » Sat Aug 20, 2011 4:47 pm

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.

User avatar
yellowled
Regular
 
Posts: 4883
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany

Postby yellowled » Sat Aug 20, 2011 6:06 pm

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
Regular
 
Posts: 197
Joined: Tue Jul 13, 2004 10:50 am

Postby danst0 » Sun Aug 21, 2011 12:23 pm

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

User avatar
Timbalu
Regular
 
Posts: 2556
Joined: Sun May 02, 2004 3:04 pm

Postby Timbalu » Sun Aug 21, 2011 12:54 pm

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")
Last edited by Timbalu on Sun Aug 21, 2011 5:21 pm, edited 1 time in total.
Regards,
Ian

User avatar
onli
Regular
 
Posts: 1044
Joined: Tue Sep 09, 2008 10:04 pm

Postby onli » Sun Aug 21, 2011 2:02 pm

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

danst0
Regular
 
Posts: 197
Joined: Tue Jul 13, 2004 10:50 am

Postby danst0 » Mon Aug 22, 2011 10:03 am


User avatar
Timbalu
Regular
 
Posts: 2556
Joined: Sun May 02, 2004 3:04 pm

Postby Timbalu » Mon Aug 22, 2011 10:44 am

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

danst0
Regular
 
Posts: 197
Joined: Tue Jul 13, 2004 10:50 am

Postby danst0 » Mon Aug 22, 2011 2:08 pm

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
Screen Shot 2011-08-22 at 13.58.50.png (78.28 KiB) Viewed 1549 times

User avatar
Timbalu
Regular
 
Posts: 2556
Joined: Sun May 02, 2004 3:04 pm

Postby Timbalu » Mon Aug 22, 2011 3:09 pm

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.
Regards,
Ian

danst0
Regular
 
Posts: 197
Joined: Tue Jul 13, 2004 10:50 am

Postby danst0 » Mon Aug 22, 2011 3:34 pm

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
Attachments
Screen Shot 2011-08-22 at 15.25.07.png
Safari version
Screen Shot 2011-08-22 at 15.25.07.png (162.08 KiB) Viewed 1546 times
Screen Shot 2011-08-22 at 15.24.03.png
IE version
Screen Shot 2011-08-22 at 15.24.03.png (192.96 KiB) Viewed 1546 times

User avatar
Timbalu
Regular
 
Posts: 2556
Joined: Sun May 02, 2004 3:04 pm

Postby Timbalu » Tue Aug 23, 2011 11:00 am

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.
Regards,
Ian

danst0
Regular
 
Posts: 197
Joined: Tue Jul 13, 2004 10:50 am

Postby danst0 » Tue Aug 23, 2011 3:50 pm

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:
viewtopic.php?f=5&t=17930

User avatar
Timbalu
Regular
 
Posts: 2556
Joined: Sun May 02, 2004 3:04 pm

Postby Timbalu » Tue Aug 23, 2011 5:33 pm

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:
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.
Regards,
Ian



Return to Themes

Who is online

Users browsing this forum: No registered users and 1 guest

cron