|
piretrus
Joined: Thu Jan 20, 2011 8:42 am
Posts: 40
|
 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!!
|
Forums
