CSS3 PIE Forums

Difference between local and online site
Page 1 of 1

Author:  ScyDark [ Tue Sep 07, 2010 7:41 am ]
Post subject:  Difference between local and online site


I used CSS3 Pie for some buttons and boxes on a website. I always first work with a local server and everything was going well.
But when I put the site online, the CSS3 Pie behavior does not work anymore on Internet Explorer (6, 7 and 8).

There is absolutely no difference between online and local CSS and HTML code.

Can you please tell me what's happening ?

I do not know which information can help you.

My doctype is :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

My button CSS is :
a.button {
   border:1px solid #d7d7d7;
   background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#d7d7d7));
   background: -moz-linear-gradient(#ffffff, #d7d7d7);
   -pie-background: linear-gradient(#ffffff, #d7d7d7);
   color:#494949; font-weight:bold; font-size:13px;

After looking at the known issues, I added
AddType text/x-component .htc

to my .htaccess file but the problem is still here

When I remove "www." from my URL, some behaviors work but the others completely disappear

Author:  jason [ Tue Sep 07, 2010 7:18 pm ]
Post subject:  Re: Difference between local and online site

Do you have a public URL you can share? It's tough to help otherwise.

I do notice you're referencing the file as "pie.htc", whereas the file in the distribution is "PIE.htc" ... some servers are case-sensitive while others aren't, could that be the problem?

Author:  ScyDark [ Wed Sep 08, 2010 1:59 am ]
Post subject:  Re: Difference between local and online site

The URL is password protected and I may not give this password to unauthorized person.

Thank you for your answer. Renaming the file into PIE.htc (and changing link in the CSS file) solved a part of the problem. The result is now the same in the "www." and the "non-www." URL. My button is now correctly displayed but the boxes are completely hidden (before renaming, the boxes were displaying but with no rounded corners).

And, VERY GOOD, the problem now appears only in Internet Explorer 8 (6 and 7 are now OK).

My boxes have 2 CSS classes :
div.rightBox {
   border-left:2px solid #d0cfc7;
   border-right:2px solid #d0cfc7;
   border-bottom:2px solid #d0cfc7;
   padding:10px; margin:0 0 20px;
   border-radius:0 0 5px 5px;
   -moz-border-radius:0 0 5px 5px;
   -webkit-border-radius:0 0 5px 5px;

I attached a screenshot showing the online version (on the left) and the local version (on the right).

css3pie.jpg [62.72 KiB]
Downloaded 588 times

Author:  jason [ Wed Sep 08, 2010 9:41 am ]
Post subject:  Re: Difference between local and online site

In that screenshot, are you saying that both the online and the local version are viewed in the same IE8 browser? It looks like they have to be different browsers, not just because PIE is behaving differently but because the appearance of the <select> dropdown is different.

If they are the same browser, maybe there's a difference in the doctype or in the browser's compatibility mode settings that's putting one in compat mode but the other in standards mode?

BTW, disappearing background are almost always due to the z-index issue; see the top of the Known Issues documentation page.

Author:  ScyDark [ Thu Sep 09, 2010 2:47 am ]
Post subject:  Re: Difference between local and online site

This was exactly the same IE8 browser. It seems to behave differently in local and internet mode. When I press the "Compatibility mode" button, every problem disappears.

Anyway, the z-index issue was the solution to the remaining problem.
Thank you for your answer.

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group