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

Problem with Navigation using UL/LI
http://css3pie.com/forum/viewtopic.php?f=3&t=2083
Page 1 of 1

Author:  fizzgig [ Mon Jun 24, 2013 4:52 pm ]
Post subject:  Problem with Navigation using UL/LI

I have a list style navigation using the following styles. I am using the javascript version of PIE. For some reason the css for "menu" isn't working. All other elements are working fine for me. Any idea what's wrong?

Code:
#menu {
   clear: both;
   float: left;
   list-style: none; /*Remove to create tab effect*/
   width:100%; /*If tab effect is not being used, this will define how long the bottom border will be*/
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   padding-left: 0px;
   padding-right: 0px;
   position: relative;
   zoom: 1;
}
#menu li {
   display: inline;
   list-style: none;
   position: relative;
   zoom: 1;
}
#menu li a {
   text-align: center;
   margin-right:6px;
   color: #36528F;
   display: block;
   float:left;
   text-decoration: none;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   line-height: 14px;
   font-weight: bold;
   padding-top: 8px;
   padding-right: 10px;
   padding-bottom: 8px;
   padding-left: 10px;
   min-width: 90px;
   -moz-border-radius: .5em .5em 0 0;
   -webkit-border-radius: .5em .5em 0 0;
   -khtml-border-radius: .5em .5em 0 0;
   border-radius: .5em .5em 0 0;
   -pie-border-radius: .5em .5em 0 0;
   background: #DBDDE3;
   
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEFF2), to(#DBDDE3));
background: -webkit-linear-gradient(top, #EEEFF2, #DBDDE3);
background: -moz-linear-gradient(top, #EEEFF2, #DBDDE3);
background: -ms-linear-gradient(top, #EEEFF2, #DBDDE3);
background: -o-linear-gradient(top, #EEEFF2, #DBDDE3);
background: linear-gradient(top, #EEEFF2, #DBDDE3);
-pie-background: linear-gradient(top, #EEEFF2, #DBDDE3);

   border-top-width: 1px;
   border-right-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: solid;
   border-left-style: solid;
   border-top-color: #88A2D2;
   border-right-color: #88A2D2;
   border-left-color: #88A2D2;
   position: relative;
   zoom: 1;
}
#menu li.sel a {
   color: #FFF;
   background: #36528F;

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#748EC1), to(#36528F));
background: -webkit-linear-gradient(top, #748EC1, #36528F);
background: -moz-linear-gradient(top, #748EC1, #36528F);
background: -ms-linear-gradient(top, #748EC1, #36528F);
background: -o-linear-gradient(top, #748EC1, #36528F);
background: linear-gradient(top, #748EC1, #36528F);
-pie-background: linear-gradient(top, #748EC1, #36528F);

   border-top-width: 1px;
   border-right-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: solid;
   border-left-style: solid;
   border-top-color: #36528F;
   border-right-color: #36528F;
   border-left-color: #36528F;
   position: relative;
   zoom: 1;
}


using this JS:

Code:
<script type="text/javascript">
$(function() {
    if (window.PIE) {
        $('.button, .actionBox, .actionDropdown, .tabtest, #menu').each(function() {
            PIE.attach(this);
        });
    }
});
</script>


Here is my menu HTML:

Code:
<ul id="menu">               
           <li><a href="#">Accounts</a></li>
           <li><a href="#">On Hold</a></li>
           <li class="sel"><a href="#">Published</a></li>
           <li><a href="#">Archived</a></li>
         </ul>


I'd really appreciate any answers. Thanks!

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