Forums
View unanswered posts | View active topics It is currently Thu Dec 14, 2017 8:45 pm



Reply to topic  [ 1 post ] 
 border-radius is not working at nested ul 
Author Message

Joined: Thu Jan 20, 2011 8:42 am
Posts: 40
Post border-radius is not working at nested ul
Hi, I have a menu width rounded borders. In this menu I have a ul structure with menu and submenu.

Code:
<div id="sectionBorderTab menuLocal">
<h3>blablabla</h3>
<ul>
  <li id="sec1">
    <a href="#">blabla</a>
    <ul class="menuLocal_submenu">
      <li id="sec1_submenu"><a href="#"></a></li>
    </ul>
  </li>
<ul>
</div>


The problen begins when I try to put rounded borders at the last section, for example #sec1_submenu a, that is inside the second <ul> element.
If the section isn't into second <ul> element the rounded borders working , but if the element is inside second <ul> not.

This problem happen in IE8, IE7 and IE6.

Does someone has any idea?

This is the CSS code:

Code:

.sectionBorderTab{
    position:relative;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border:3px solid #ccc;
    behavior: url(../js/PIE.htc);   
}

.sectionBorderTab h3{
   color: #fff!important;
   background: #990; /* Old browsers */
   background: -moz-linear-gradient(top, rgba(189,189,91,1) 51%, rgba(153,153,0,1) 51%, rgba(153,153,0,1) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,rgba(189,189,91,1)), color-stop(51%,rgba(153,153,0,1)), color-stop(100%,rgba(153,153,0,1))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, rgba(189,189,91,1) 51%,rgba(153,153,0,1) 51%,rgba(153,153,0,1) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, rgba(189,189,91,1) 51%,rgba(153,153,0,1) 51%,rgba(153,153,0,1) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, rgba(189,189,91,1) 51%,rgba(153,153,0,1) 51%,rgba(153,153,0,1) 100%); /* IE10+ */
   background: linear-gradient(top, rgba(189,189,91,1) 51%,rgba(153,153,0,1) 51%,rgba(153,153,0,1) 100%); /* W3C */
   -pie-background: linear-gradient(top, rgba(189,189,91,1) 51%,rgba(153,153,0,1) 51%,rgba(153,153,0,1) 100%);/* IE */
   font:normal 1.6em/1.2em DTLProkyonTMediumRegular, Verdana;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
   padding:9px 10px 12px;
   behavior: url(../js/PIE.htc);
}

/********* menu local ************************************************/

.menuLocal ul{
   width:100%;
   list-style:none;
   position:relative;
}
.menuLocal ul li{
   width:100%;
   position:relative;
}

.menuLocal ul li a{
   padding:8px 10px;
   border-bottom:1px solid #EEE;
   display:block;
   font:normal 1.2em/1.3em verdana;
   color:#666!important;
   *zoom:1;
   text-decoration:none!important;
}

.menuLocal ul li a:hover{
   text-decoration:underline!important;
}

.menuLocal ul li.pulsado a{
   background-color:#f0f0f0;
   color:#000;
   text-decoration:none!important;
}

.menuLocal ul li a span{
   float:right;
   width:12px;
   height:6px;
   position:relative;   
   overflow:hidden;
   top:7px;
   cursor:pointer;
   background: url(../../images/VuelingBase/global_sprite.png) -80px -57px no-repeat;
}

.menuLocal ul li.pulsado a span{
   background-position: -80px -69px;
}

.menuLocal ul li a .menuLocal_submenu{
   display:none;
}
.menuLocal ul li.pulsado a .menuLocal_submenu{
   display:block;
}

.menuLocal ul ul{
   position:relative;
}

.menuLocal ul li li a{
   background-color:#fff!important;
   text-decoration:none;
   position:relative;
}

.menuLocal ul li li a:hover{
   text-decoration:underline!important;
}

.menuLocal ul li li a.pulsado{
   background-color:#999!important;
   color:#fff!important;
   text-decoration:none!important;
   position:relative;
}

.menuLocal ul ul li a span{
   float:left;
   width:4px;
   height:9px;
   position:relative;   
   overflow:hidden;
   top:3px;
   margin-right:5px;
   cursor:pointer;
   background: url(../../images/VuelingBase/global_sprite.png) -99px -57px no-repeat!important;   
}

.menuLocal ul ul li a.pulsado span{
   background-position: -99px -69px!important;
}

.menuLocal .last{
   position:relative;
   border-bottom:none;
   -webkit-border-radius: 0 0 8px 8px;
    -moz-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
   behavior: url(../js/PIE.htc);      
}




[/code]


Thanks!!


Sat Oct 29, 2011 12: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 5 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:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.