Forums
View unanswered posts | View active topics It is currently Wed Jul 30, 2014 1:17 pm



Reply to topic  [ 1 post ] 
 Problem with Navigation using UL/LI 
Author Message

Joined: Mon Jun 24, 2013 4:44 pm
Posts: 1
Post 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!


Mon Jun 24, 2013 4:52 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

Users browsing this forum: No registered users and 4 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.