?
Solved

Css3pie not working in IE8

Posted on 2013-01-04
10
Medium Priority
?
1,707 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 8

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 43

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 8

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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
LVL 43

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 8

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 43

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 8

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 43

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 8

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 8

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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

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…
This is the conclusion of the review and tests for using two or more Password Managers so you don't need to rely on just one. This article describes the results of a lot of testing in different scenario's to reveal which ones best co-exist together.…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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…

590 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