[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Css3pie not working in IE8

Posted on 2013-01-04
10
Medium Priority
?
1,678 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 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
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.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…
Suggested Courses

650 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