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



Reply to topic  [ 5 posts ] 
 Pie.HTC doesn't show properly in IE8 
Author Message

Joined: Tue Nov 30, 2010 2:39 pm
Posts: 2
Post Pie.HTC doesn't show properly in IE8
First of all, this is great! If I could get it work it would be awesome as well.

I have a Drupal site and the layout is such that I have two columns ---
column 1 and column 2

Within Column 1 there's the article body div which includes a box. That box is further split up in three divs and I have given it another class called Rounded Corners

Code:
<div class="divmain rounded-corners">
<div class="div1"><div class="field field-type-text field-field-fieldname">
<h3 class="field-label1">Field Label</h3>
              <div class="field-items"><ol>
              <?php code here?>
                       <div class="field-items odd">
                       <li><?php print item code here ?> </li>
                        </div>
               </ol> </div>
</div></div>
<div class="div2">
<?php code here?>
</div>
<div class="div3"><div class="field field-type-text field-field-field2">
          <h3 class="field-label1">
                       Field Name</h3>
           <div class="field-item">
           <?php print code here?>
           </div>
</div> </div>
</div>


The Css code follows for all these divs
Code:
div.divmain{
border-style: solid;
border-width: 5px;
border-color: #070355;
margin-bottom: 5px;
margin-top: 5px;
overflow: hidden;
float:left;
background: url("/local-images/image.png")  no-repeat left center #070355;
width: 625px;
-moz-box-shadow: #666 2px 2px 10px 2px;
-webkit-box-shadow: #666 2px 2px 10px 2px;
box-shadow: #666 2px 2px 10px 2px;
}

div.div1{
padding-left: 5px;
padding-top: 5px;
width: 190px;
height: 130px;
float: left;
border-style: solid;
border-width: 0px 5px 0px 0px;
border-color: #070355;
color: #999;
}
.div1 ol {
margin-bottom: 1.0em;
margin-top: 1.0em;
font-weight: bolder;
}
.div1 li {
display: list-item;
}

div.div2 {
padding-left: 2px;
padding-right: 2px;
padding-top: 15px;
padding-bottom: 10px;
width: 180px;
height:110px;
float: left;
background-color: #ffffff;
line-height: 1%;
}

div.div3{
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
width: 225px;
height: 130px;
float: right;
border-style: solid;
border-width: 0px 0px 0px 5px;
border-color: #070355;
background-color: #5c0700;
color: #999999;
}
.div3 p{
margin-top: 0.5em;
margin-bottom: 0.25em;
text-align: left;
}

h3.field-label1 {
color: #ffffff;
font-family: cambria,georgia,serif;
font-weight: bold;
font-size: 14pt;
letter-spacing: -1px;
line-height: 1.2em;
text-align: center;
margin-bottom: 5px;
text-decoration: underline;
}

.rounded-corners {
     -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
   border-radius: 7px;
 /*  behavior: url(/css/PIE.htc); */
}


It looks great in Firefox.. I get a small box with three columns, perfectly rounded corners, nice shadow.. the border works fine, everything looks as I want it to look. I put that in IE8 and everything gets broken. If I run IE8 in IE7 compatibility mode, everything looks great again.

Can anyone help me figure this out please?

Thanks in advance


Tue Nov 30, 2010 2:59 pm
Profile

Joined: Tue Nov 30, 2010 2:39 pm
Posts: 2
Post Re: Pie.HTC doesn't show properly in IE8
Ok.. too quick to post the issue here.. should have tried some workarounds first.

Adding a
position: relative

to divmain (because it had a background image) solved my problem. Now the box looks pretty in IE8 and running IE8 in IE7 mode as well.

Thanks and sorry guys.. couldn't figure out how to delete my topic so.. posting a reply instead.


Tue Nov 30, 2010 3:12 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Pie.HTC doesn't show properly in IE8
Glad you figured it out. :)


Tue Nov 30, 2010 3:15 pm
Profile

Joined: Mon Dec 20, 2010 4:11 pm
Posts: 1
Post Re: Pie.HTC doesn't show properly in IE8
8-) Thanks for posting your fix, I was having the same problem.


Mon Dec 20, 2010 4:12 pm
Profile

Joined: Mon Dec 20, 2010 4:18 pm
Posts: 4
Post Re: Pie.HTC doesn't show properly in IE8
Okay, this may be helpful when trying to resolve the IE8 issues that keep popping up for people...

  • It seems if you use the "gradient" option, you need to use "Position: Relative" as well (just like when you use a bg image) for them to work in IE8
  • TD tags work when the style is applied to them in IE7, but not IE8 (where it shows no gradient, shadow or curved corners) - Use DIV's or spans instead
  • Inside SharePoint, the HTC behaviour functionality does not seem to "stick" if you have the file in the "Style Library" (or anywhere else on the site) when applying it to Div's - put it in the Layouts folder and reference it using "/_layouts/<YourCustomThemeFolder>/pie.htc"... Again, IE8-specific behaviour
  • If you are applying the pie style to the TD tag, it shows the colour (no Gradient or curved corners) - but this time, only if it IS in a SharePoint Library
  • Had some odd javascript behaviours which caused ribbon problems when trying to edit the content through the browser - It looks like Pie.HTC fires too early - Normally in SharePoint you use the
    Code:
    _spBodyOnLoadFunctionNames.push('[FunctionName]');
    function to push the normal "OnLoad" JavaScript functions onto a "SharePoint-Friendly" Javascript stack. Not sure what the answer is here - could not find where the OnLoad property fires in the htc file... using the -pie-lazy-init did not work either... and the JS works fine if you are using TD's (but then you have an inconsistent experience in IE8 as above)

--UPDATE--
It looks like you can work around SharePoint's idiosyncrasies relating to javascript and the way pie does the css3 magic - don't have hidden (commented) controls in the SharePoint page as this will cause the page load events to not fire correctly when used in conjunction with pie.


Mon Dec 20, 2010 5:48 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 5 posts ] 

Who is online

Users browsing this forum: Baidu [Spider], Exabot [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.