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

Problem with border-radius in hover and active event
http://css3pie.com/forum/viewtopic.php?f=3&t=1835
Page 1 of 1

Author:  Nelcolo [ Tue Oct 30, 2012 12:59 pm ]
Post subject:  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.

Author:  jason [ Tue Oct 30, 2012 2:58 pm ]
Post subject:  Re: Problem with border-radius in hover and active event

Remove !important from the background properties.

Author:  Nelcolo [ Wed Oct 31, 2012 11:11 am ]
Post subject:  Re: Problem with border-radius in hover and active event

THANKS Jason works perfect.

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