Solved

Css3pie not working in IE8

Posted on 2013-01-04
10
1,628 Views
Last Modified: 2013-03-08
Hello Everyone!
Okay, I've used CSS3PIE on several occaisions and I've gotten it to work by employing the fixes in regards to known issues.
I've added z-indexes and relative positioning. I'm using PIE.php so as to avoid the wrong Content-Type.
The rounded corners on the read more buttons and slider nav on this home page are showing up great on IE7 but not in IE8. I've checked in Browserstack.com and Adobe Browser Lab.

http://sandbox.intrepidrealist.com/lamaraheartwell

Also, can't get the rounded corners in IE7 or IE8 on this page:

http://sandbox.intrepidrealist.com/lamaraheartwell/events

Anyone see what I'm missing?

Thanks!
0
Comment
Question by:Alicia St Rose
  • 6
  • 4
10 Comments
 
LVL 7

Author Comment

by:Alicia St Rose
Comment Utility
Okay,
I did a search for all "PIE" in the CSS and added a forward slash in front for the path. That seems to have fixed the events page and the slider nav.
But the home page read more buttons still won't take the rounded corners...
0
 
LVL 42

Expert Comment

by:David S.
Comment Utility
It's very unusual that it works in IE7 but not in IE8.

Try upgrading to the latest version of PIE.

If that doesn't work try giving "display:inline-block" to "#utility-after-content .read-more-link" as well.

Did you realize that PIE.php is being loaded twice, once each from different directories? The ".ls-lamaracustom .ls-bottom-slidebuttons a" rule loads it from a different location.
0
 
LVL 7

Author Comment

by:Alicia St Rose
Comment Utility
Hmm..
Display inline-block didn't work.
But something peculiar just happened. I went into the custom skin style sheet in the LayerSlider plugin to add the forward slash to the PIE.php (this is where the ".ls-lamaracustom .ls-bottom-slidebuttons a" is hiding out) and the rounded corners on the nav disappeared. So I removed the slash and they reappeared.

So I removed the forward slash form the PIE.php file path in my style.css stylesheet and then the events page buttons lost their rounded corners.
This may be a path issue and I'm not sure how to fix it. I have PIE.php and PIE.htc in my root folder, in my subdomain folder and in the folder that houses the Wordpress site for lamaraheartwell. I think it got this way from troubleshooting various sites along the way. Maybe too many?
0
 
LVL 42

Expert Comment

by:David S.
Comment Utility
Yes, you don't need that many. Just keep one copy in the root of that subdomain.

Try giving both "overflow:hidden" and "position:relative" to ".read-more-wrapper".
0
 
LVL 7

Author Comment

by:Alicia St Rose
Comment Utility
Okay,
So I'm testing in Browserstack and I'm not getting any rounded corners on the homepage,
Then I refresh a couple of times and I get nav rounded corners, refresh a few more times and Now I get rounded corners on Read More buttons. Refresh again, and all corners disappear.

So I don't know if it's Browserstack or IE8 being tempermental...

Are you seeing the rounded corners on everything?
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 42

Expert Comment

by:David S.
Comment Utility
It's very strange. In IE8, if I reach the home page via the browser's back button, the rounded corners show up, otherwise they don't, including when I reload the page.

When I load a local copy of your page in IE8 (that uses a local copy of PIE.php) the rounded corners show up. Try adding this line to PIE.php after the first call to "header()":
header( 'Content-length: '.filesize('PIE.htc') );

Open in new window

I suggest you consider how the page looks when JavaScript is disabled. For example, why is "#primary-menu" absolutely positioned? When the JavaScript isn't enabled, the slideshow below it doesn't load, so the menu overlaps the content that follows it. Even when JS is enabled, it looks strange while the page is loading.
0
 
LVL 7

Author Comment

by:Alicia St Rose
Comment Utility
Hi Kravimir,
thanks for the suggestion regarding the Javascript. The menu is absolutely position because of the slider layout. Notice that Lamara's head breaks the line? I had to absolutely position the menu so it can be clickable. Can't remember the details but I think leaving it static forced it under the slider making it unclickable.
If you have another solution, I'm willing to open a new question for it.
Also, I think if I make the background transparent on the top menu items and wrap the slider with a div of min height, then they wouldn't look so funny on load...Just a thought.

And now I'm beginning to think that javascript from the Slider may be interfering with CSS3pie. Since it's not happening on the events page...
I might have to make oldschool photoshop buttons...
0
 
LVL 42

Expert Comment

by:David S.
Comment Utility
Did the change to PIE.php make any difference?

Yes, I can suggest an alternative solution for the menu. Since you offered to open a new question, please do. (If you don't have unlimited points, a 250 point question will be fine.)

Just a thought: Do websites need to look exactly the same in every browser?
0
 
LVL 7

Accepted Solution

by:
Alicia St Rose earned 0 total points
Comment Utility
Hi Kravimir,
Sorry about the long delay. I had some other projects that competed for my attention and won!

Okay, so I added the code to PIE.php and it looks like this:

header( 'Content-type: text/x-component' );
header( 'Content-length: '.filesize('PIE.htc') );
include( 'PIE.htc' );

Open in new window


Is that correct?
Didn't get any improvement. I'm now using the absolute path in the stylesheet.
0
 
LVL 7

Author Closing Comment

by:Alicia St Rose
Comment Utility
It turns out that this is a javascript issue. Finally, got an answer on the CSS3PIE forum. So closing out this question....
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Several part series to implement Internet Explorer 11 Enterprise Mode
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now