Forums
View unanswered posts | View active topics It is currently Tue Sep 02, 2014 3:17 pm



Reply to topic  [ 5 posts ] 
 IE8 div position incorrect with PIE 
Author Message

Joined: Sat May 19, 2012 3:48 pm
Posts: 3
Post IE8 div position incorrect with PIE
I have a div that is centered using css margin:0 auto; The div has rounded corners and box-shadow and uses PIE.

In every browser except IE8 the main div is centered correctly. If I remove the PIE from the CSS then it is centered correctly.

If I remove just the border-radius then the border is centered but the background is forced to the left.

If I remove just the box-shadow then it's all on the left still.

The CSS is:

Code:
#main{
   position:relative;
   margin: 0 auto 20px auto;
   width: 850px; /* 900 total with border & padding */
   border: 5px solid #709302;
   padding: 20px;
   text-align: center;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   -webkit-box-shadow: #666 3px 3px 5px;
   -moz-box-shadow: #666 3px 3px 5px;
   box-shadow: #666 3px 3px 5px;
   background: #FFF;
   behavior: url(PIE.htc);
}


With the full page currently here: http://maft.co.uk/wip/sallyb/

Any ideas if this is something I can fix with CSS/HTML or is it a PIE /IE bug?

Thanks in advance

MaFt


Wed May 23, 2012 6:16 pm
Profile

Joined: Mon Apr 11, 2011 4:54 pm
Posts: 53
Post Re: IE8 div position incorrect with PIE
It all looks fine to me in IE8 (i.e. it looks much like it does in Firefox; in Chrome, the list bullets on the testimonials are way the hell over by the border)

Maybe load an image somewhere with annotations of what is wrong so that we can see it.


Thu May 24, 2012 2:15 am
Profile

Joined: Sat May 19, 2012 3:48 pm
Posts: 3
Post Re: IE8 div position incorrect with PIE
I'm on a Mac so can only base it on what I see using this rendering site: http://netrenderer.com/index.php

Using the URL I gave before it shows correctly in IE6, 7, 9 and 10. But in IE8 the main div is pushed over to the left.

Here's the screenshots showing what I see:

IE7
http://maft.co.uk/wip/sallyb/gfx/ie7.png

IE8
http://maft.co.uk/wip/sallyb/gfx/ie8.png

IE9
http://maft.co.uk/wip/sallyb/gfx/ie9.png

As you can see, it shows the main div pushed to the left in IE8. However if I take off the pie then it is correctly centered - leading me to believe it could be a bug with PIE.

MaFt

PS - not too fussed about the UL element at the moment, it was a simple copy and paste. not really styled at all yet!


Thu May 24, 2012 4:47 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: IE8 div position incorrect with PIE
NetRenderer it notoriously unreliable for testing with PIE. See this thread for some good info on more reliable ways to test: viewtopic.php?f=4&t=1206

Personally I find VMs the best solution (I work on a Mac as well.) In my IE8 VM your site renders just fine.


Thu May 24, 2012 10:06 am
Profile

Joined: Mon Apr 11, 2011 4:54 pm
Posts: 53
Post Re: IE8 div position incorrect with PIE
@MaFt if you don't want to run Windows locally in your own VM, you can buy time on Rackspace. I did this for a short while for IE9 (I run Linux and use VMs for IE but didn't have a legit Windows 7 license) and it's a bit painful for animated pages (image carousels etc.) but otherwise a very good solution. You can get by with the lowest Windows 2008 Server instance for $0.08 per hour which probably means just a few bucks a month for IE8 testing -- see new post on the IE testing thread (in a couple of minutes). Don't mess about with something that just takes snapshots in time, because CSS3PIE makes size and position adjustments after the page load event occurs.


Thu May 24, 2012 4:12 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 5 posts ] 

Who is online

Users browsing this forum: Baidu [Spider], Exabot [Bot], Yahoo [Bot] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.