Problem with border-radius in hover and active event
Hi all, I have a problem with rounded edges in a navigation menu for Hover and Active event, my CSS code is as follows:
#menu li a{
background:#2BB8D6;
display:block;
text-align:center;
text-decoration:none;
color:#fff;
line-height:30px;
padding:0px 25px;
margin-right:20px;
-Webkit-border-radius:4px;
-Moz-border-radius:4px;
border-radius: 4px;
behavior:url(PIE.htc);
position:relative;
}
#menu li a:hover{
color:#FFFFFF!important;
background-color:#1267BC!important;
display: block;
-Webkit-border-radius:4px;
-Moz-border-radius:4px;
border-radius: 4px;
behavior:url(PIE.htc);
position:relative;
}
#menu li.active a{
color:#FFFFFF!important;
background-color:#1267BC!important;
display: block;
-Webkit-border-radius:4px;
-Moz-border-radius:4px;
border-radius: 4px;
behavior:url(PIE.htc);
position: relative;
}
It works perfect in Chrome and Mozilla but not in Internet Explorer, Internet Explorer only works in idle status with rounded edges but when mouse over the corners become straight and the state "active" also remains with square corners.
If you import the menu into something I am applying in Joomla.
Thank you very much everyone for your answers, soon.
(Original text in Spanish translated by
http://translate.google.com.co)
--------
Spanish
Hola a todos, tengo un problema con los bordes redondeados en un menú de navegación para el evento de Hover y Active, mi codigo CSS es el siguiente:
#menu li a{
background:#2BB8D6;
display:block;
text-align:center;
text-decoration:none;
color:#fff;
line-height:30px;
padding:0px 25px;
margin-right:20px;
-Webkit-border-radius:4px;
-Moz-border-radius:4px;
border-radius: 4px;
behavior:url(PIE.htc);
position:relative;
}
#menu li a:hover{
color:#FFFFFF!important;
background-color:#1267BC!important;
display: block;
-Webkit-border-radius:4px;
-Moz-border-radius:4px;
border-radius: 4px;
behavior:url(PIE.htc);
position:relative;
}
#menu li.active a{
color:#FFFFFF!important;
background-color:#1267BC!important;
display: block;
-Webkit-border-radius:4px;
-Moz-border-radius:4px;
border-radius: 4px;
behavior:url(PIE.htc);
position: relative;
}
Funciona perfecto en Chrome y Mozilla pero no en internet explorer, en internet explorer solo funciona el estado de reposo con bordes redondeados pero al pasar el mouse por encima las esquinas se vuelven rectas y el estado "active" también permanece con esquinas rectas.
Si importa en algo el menu lo estoy aplicando en Joomla.
Muchas gracias a todos por sus respuestas, hasta pronto.
Forums
