Solved

Css3pie not working in IE8

Posted on 2013-01-04
10
1,644 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
ID: 38745023
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.
ID: 38745090
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
ID: 38745176
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 42

Expert Comment

by:David S.
ID: 38745246
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
ID: 38745689
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
 
LVL 42

Expert Comment

by:David S.
ID: 38745936
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
ID: 38757122
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.
ID: 38757192
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
ID: 38783687
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
ID: 38965344
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Several part series to implement Internet Explorer 11 Enterprise Mode
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

820 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