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/rainmakerthe follow subsequent sites I could not get them working with PIE to create rounded corners in the navigation bar.
http://www.mattyung.ca/spectrumwindowcoveringsCode:
#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);
}
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
Forums
