Forums
View unanswered posts | View active topics It is currently Fri Jul 25, 2014 12:45 am



Reply to topic  [ 11 posts ]  Go to page 1, 2  Next
 CSS3 PIE and HTML5 in IE8, seems it doesn't works!? 
Author Message

Joined: Tue Nov 15, 2011 9:55 pm
Posts: 5
Post CSS3 PIE and HTML5 in IE8, seems it doesn't works!?
AS we know IE8 dont support HTML5 tags, so I used this link -
Quote:
<!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->

, and it's ok
But if I apply CSS3 PIE.htc, as for example a simple rounded edges they'll appear only on a few seconds on page load, then they again 90deg. I did test.html:

Code:
<!DOCKTYPE html>
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->
<TITLE> TEST </TITLE>
<style>
/* Make HTML 5 elements display block-level for consistent styling */ 
header, nav, article, footer, address { 
    display: block; 
}
body {
 background: black;
 font-family: Tahoma,Arial,Sans-serif;
 }
.wrapper {
 position:absolute;
 width:10.2in;
 border-radius: 8px;
 behavior: url(css/PIE.htc);
 }
.content {
 margin: 10px;
 min-height: 500px;
 }
header {
 position: relative;
 width: 100%;
 height: 50px;
 float: left;
 margin: 0;
 border-radius: 8px;
 border:1px solid #c2c2c2;
 /* background: -moz-linear-gradient(bottom,#ccc,#000); */
 /* background: gradient(bottom,#ccc,#000); */
 z-index: 10;
 behavior(css/PIE.htc);
 }
header h2 {
 margin: 10px 10px 0 auto;
 color: white;
 float: right;
 }
header h2 a { color: #fff; }
h3 {
 margin: 10px 0 0 30px;
 color: white;
 }
.jairbag {
 width: 300px;
 float: left;
 height: 20px;
 margin: 10px;
 }
.jairbag ul {
 list-style: none;
 float: left;
 margin: 0;
 padding: 0;
 }
.jairbag ul li { float: left; }
aside {
 width: 200px;
 float: left;
 height: 100px;
 border: 1px solid #c2c2c2;
 border-radius: 8px;
 min-height: 370px;
 margin: 5px 0 0 0;
 background: #ccc;
 behavior: url(css/PIE.htc);
 }
aside ul { color: blue; }
aside ul a {
text-decoration: none;
font-size: 16px;
color: #9966FF; }
aside ul a:hover { color: #000; }
.seredina {
float: left;
width: 750px;
border: 1px solid #c2c2c2;
border-radius: 8px;
min-height: 370px;
margin: 5px 0 0 5px;
background: #ccc;
behavior: url(css/PIE.htc);
 }
.seredina p { margin: 10px; }
footer {
 width: 100%;
 height: 90px;
 float: left;
 border: 1px solid #c2c2c2;
 border-radius: 8px;
 margin: 5px 0 0 0;
/* background: -moz-linear-gradient(top,#ccc,#000);  */
 behavior: url(css/PIE.htc);
 }
footer p {
 float: right;
 margin: 40px 20px 0 auto;
 color: white;
 }
</style>
</HEAD>
<BODY>
<div align="center" class="wrapper">
<div align="left" class="content">
<header> <h2><a href="#"><i>TEST</i></a></h2> </header>
<aside>
 <h3>TEST</h3>
  <ul>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
  </ul>
</aside>
<div class="test">
 <p><BIG>test</BIG><p>
 <p>test</p>
 <p>test:</p>

</div>
<footer><p>test</p></footer>
</div> <!-- // END CONTENT -->
</div> <!-- // END WRAPPER -->
</BODY>
</HTML>


I hope it will help to solve this issue much quickly.


Thu Jan 05, 2012 6:45 am
Profile

Joined: Tue Nov 15, 2011 9:55 pm
Posts: 5
Post Re: CSS3 PIE and HTML5 in IE8, seems it doesn't works!?
*** SOLVED ***

With simple test.html seems all fine, but if i apply this on my hosting I need to use file path in css
Code:
.element {
  behavior: url(PIE.htc);
/*  behavior: url(css/PIE.htc);  WRONG WAY and file PIE.htc place ! */
 }


Thu Jan 05, 2012 7:26 am
Profile

Joined: Thu Nov 11, 2010 3:39 am
Posts: 2
Post Re: CSS3 PIE and HTML5 in IE8, seems it doesn't works!?
Have the similar issuse
I use html5.js for old ie, because i need support of html5 tags.
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


and if i include PIE.htc (through PIE.php, for right content type) conflict appears .
http://img7.imagebanana.com/img/xfy5o0s9/1_052.png

By experimental way, i understood that IF i include html BEFORE css, where i call PIE with behavior rule, it throw error (you can see at previous screen).
In case i include html5 script after css where i use PIE, PIE simpli do not work, so i see only not rounded corners.

There you can get source of html5.js
https://github.com/aFarkas/html5shiv/bl ... ml5shiv.js

Please describe how i can solve this problem.Thx


Fri Jan 13, 2012 4:19 am
Profile

Joined: Mon Jan 23, 2012 3:37 pm
Posts: 1
Post Re: CSS3 PIE and HTML5 in IE8, seems it doesn't works!?
Actually, I couldn't get rounded corners to work in IE 7 or 8, and thanks to this thread I realized it was because I needed to include the HTML5 shim JS before my CSS. I didn't encounter the browser crash that alokozam describes.

Thanks a lot!


Mon Jan 23, 2012 3:39 pm
Profile

Joined: Fri Mar 11, 2011 9:49 am
Posts: 8
Post Re: CSS3 PIE and HTML5 in IE8, seems it doesn't works!?
Yes I am getting the same problem,

using html 5 shiv https://code.google.com/p/html5shiv/

in combination with css3pie seems to cause problems in ie8 and inserts additional markup in the html (ie8 only) when trying to apply border-radius:7px 7px 0 0;

Code:
<background style="left: 0px; top: 0px; position: absolute;">
<group1>
<shape style="left: 0px; top: 0px; width: 632px; height: 34px; position: absolute; behavior: url(#default#VML);" fill="[object]">
<fill/>

<border style="left: 0px; top: 0px; position: absolute;">
<shape style="left: 0px; top: 0px; width: 632px; height: 34px; position: absolute; behavior: url(#default#VML);" fill="[object]">
<fill/>
<shape style="left: 0px; top: 0px; width: 632px; height: 34px; position: absolute; behavior: url(#default#VML);" fill="[object]"><fill/>


removing behavior: url(PIE/PIE.htc) from your css seems to remove the additional markup.

Anyone know of a work around?


Thu Jun 21, 2012 10:29 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: CSS3 PIE and HTML5 in IE8, seems it doesn't works!?
We use html5shiv in conjunction with PIE.htc on css3pie.com, with no issues.

Like others have said, make sure you include the shiv before your css.


Thu Jun 21, 2012 10:33 am
Profile

Joined: Fri Mar 11, 2011 9:49 am
Posts: 8
Post Re: CSS3 PIE and HTML5 in IE8, seems it doesn't works!?
Well it works in ie7 fine, just 8 i seem to be having a problem with? How do you explain the output above?

Found this that looked kind of interesting. Not sure if it is related.

http://css-tricks.com/html5-innershiv/

Good to know you are using it on your site though. Looking at your site it looks like you have included the shiv after:

Code:
<link rel="stylesheet" type="text/css" href="http://css3pie.com/wp/wp-content/themes/pie-wp-theme/css/common.css" />

    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->


Thu Jun 21, 2012 7:50 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: CSS3 PIE and HTML5 in IE8, seems it doesn't works!?
I don't have an explanation for that output. Nothing I know of in PIE or html5shiv would do that.

The only thing I can think is that you have some other script on your page that is trying to copy-modify-reinsert the page's innerHTML.


Thu Jun 21, 2012 8:12 pm
Profile

Joined: Fri Mar 11, 2011 9:49 am
Posts: 8
Post Re: CSS3 PIE and HTML5 in IE8, seems it doesn't works!?
Thanks Jason,

Okay, I think it is possible that there are two issues here.

Firstly, I have managed for the get this working in ie 8 by applying a z-index to a containing element. For some reason the background with rounded corners seemed to be hidden below a containing element, in this case a <nav> element.

Although working in ie 7, in order to get this working in ie 8, aswell as applying the following fixes, namely:

position: relative;
display: inline-block;
float: left;

I also benefited from adding a z-index to this containing element, in my case:

z-index: 1;

This had the desired affect and I could now see my styled ul background with rounded corners ok.

The second issue I believe is simply getting used to ie9. I am not used to seeing things like this using ie 9 developer tools:

Code:
<css3-container style="left: 10px; top: 0px; position: absolute; z-index: -1; direction: ltr;">
<background style="left: 0px; top: 0px; position: absolute;">
<group1>
<shape style="left: 0px; top: 0px; width: 632px; height: 34px; position: absolute; behavior: url(#default#VML);" fill="[object]">
<fill/>
<border style="left: 0px; top: 0px; position: absolute;">
<shape style="left: 0px; top: 0px; width: 632px; height: 34px; position: absolute; behavior: url(#default#VML);" fill="[object]">
<fill/>
<shape style="left: 0px; top: 0px; width: 632px; height: 34px; position: absolute; behavior: url(#default#VML);" fill="[object]">
<fill/>

<ul class="menu level-2 pie_first-child" _pieId="_25">


etc

I guess this is showing css3pie in action, something that is not viewable by simply viewing source?!

For the record, I am currently calling
Code:
   <!-- IE Fix for HTML5 Tags -->
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->


after both my styles and javascripts. Seems to be working fine, even in ie8. Many thanks.


Fri Jun 22, 2012 4:01 am
Profile

Joined: Fri Jul 20, 2012 3:17 pm
Posts: 2
Post Re: CSS3 PIE and HTML5 in IE8, seems it doesn't works!?
Actually I'm having the same problem. I am able to get rounded corners to work in IE7 but not 8. Example page: http://clients.werremeyer.com/testing/about/

The two search input fields should be rounded.

Any help would be greatly appreciated. Thanks in advance!


Fri Jul 20, 2012 3:21 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 11 posts ]  Go to page 1, 2  Next

Who is online

Users browsing this forum: Google [Bot] and 3 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:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.