CSS3 PIE Forums
http://css3pie.com/forum/

PIE not working for me and i have positioning
http://css3pie.com/forum/viewtopic.php?f=3&t=285
Page 1 of 1

Author:  mattyung [ Mon Nov 29, 2010 6:27 pm ]
Post subject:  PIE not working for me and i have positioning

Hello,

I create 3 sites. I had success using PIE on one of them, but subsequent websites i have been unsuccessful.

The first site at least has rounded corners in Internet Explorer:

http://www.mattyung.ca/rainmaker

the follow subsequent sites I could not get them working with PIE to create rounded corners in the navigation bar.

http://www.mattyung.ca/spectrumwindowcoverings

Code:

#nav {
   position:absolute;
   bottom:0px;
   right:0px;
   padding: 7px 6px 0;
   line-height: 100%;
   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    background: #8b8b8b; /* for non-css3 browsers */
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#baa69d', endColorstr='#836a57'); /* for IE */
   background: -webkit-gradient(linear, left top, left bottom, from(#baa69d), to(#836a57)); /* for webkit browsers */
   background: -moz-linear-gradient(top,  #baa69d,  #836a57); /* for firefox 3.6+ */
   border: solid 1px #372619;
   behavior: url(PIE.htc);
}
#nav li {
   padding: 0 0 8px;
   float: left;
   list-style: none;
}
/* main level link */
#nav a {
   position:relative;
   font-weight: bold;
   color: #e7e5e5;
   text-decoration: none;
   display: block;
   padding:  8px 20px;
   margin: 0;
   -webkit-border-radius: 1.6em;
   -moz-border-radius: 1.6em;
   text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
   behavior: url(PIE.htc);
}
/* main level link hover */
#nav .current, #nav li a:hover {
   position:relative;
   background: #372619; /* for non-css3 browsers */
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#372619', endColorstr='#836a57'); /* for IE */
   background: -webkit-gradient(linear, left top, left bottom, from(#372619), to(#836a57)); /* for webkit browsers */
   background: -moz-linear-gradient(top,  #372619,  #836a57); /* for firefox 3.6+ */
   color: #FFF;
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
   -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
   box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
   behavior: url(PIE.htc);
}


http://www.mattyung.ca/codesofhope

Code:
#Nav {
   position:absolute;
   bottom:0px;
   right:-180px;
}
#Nav ul {
   margin:0px;
   padding:0px;
   list-style: none;
}
#Nav li {
   display:inline;
}
#Nav li a {
   position:relative;
   display:block;
   width:99px;
   float:left;
 font-family:"Franklin Gothic Medium" font-size:25px;
   font-weight:bold;
   color:#000000;
   text-align:center;
   text-decoration:none;
   background:#FFFFFF;
   padding:8px 10px 4px 10px;
   border-right:1px dotted #4F4F4F;
   -moz-border-radius-topleft: 15px;
   -moz-border-radius-topright: 15px;
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
   behavior: url(PIE.htc);
}
#Nav li a:hover {
   background:#4F4F4F;
   color:#FFFFFF;
   text-decoration:none;
   border-right:1px dotted #000000;
}
#Nav li .current {
   background:#4F4F4F;
   color:#FFFFFF;
}


I read that whenever you use PIE that you have to include the position in the CSS so I added position relative but still no luck.

Are there any experts that can tell me where I went wrong?

Cheers,
Matt
Code:

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/