Solved

Css3pie not working in IE8

Posted on 2013-01-04
10
1,654 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 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 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 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 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 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 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 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

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.

707 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