Forums
View unanswered posts | View active topics It is currently Wed Aug 20, 2014 2:28 pm



Reply to topic  [ 3 posts ] 
 Problem with border-radius in hover and active event 
Author Message

Joined: Tue Oct 30, 2012 12:46 pm
Posts: 2
Post 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.


Tue Oct 30, 2012 12:59 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Problem with border-radius in hover and active event
Remove !important from the background properties.


Tue Oct 30, 2012 2:58 pm
Profile

Joined: Tue Oct 30, 2012 12:46 pm
Posts: 2
Post Re: Problem with border-radius in hover and active event
THANKS Jason works perfect.


Wed Oct 31, 2012 11:11 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 3 posts ] 

Who is online

Users browsing this forum: Google [Bot] 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.