Problemas en css

[johnnymartins]

Hola amigos;

Estoy montando una página y en ella he puesto un buscador en css y también un login flotante en css.

Tanto el login flotante, como el buscador usan un css por separado llamados:

buscador.css

{
width: 800px;
margin: 0px auto;
font: 100%/140% Arial, Helvetica, sans-serif;
}
.credits {
margin-bottom: 80px;
padding-bottom: 30px;
border-bottom: solid 1px #ccc;
}

/* search form
-------------------------------------- */
.searchform {
display: inline-block;
zoom: 1; /* ie7 hack para display:inline-block */
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);

background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #fff;
padding: 3px 3px 3px 8px;
width: 175px;
border: solid 1px #bcbbbb;
outline: none;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}

--------------------------------------------------------------------------------------------

login_estilo.css

.clear
{
clear:both;
}


.black_bg {
background:rgba(0,0,0,0.85);
height:112px;
padding:20px 10px 0 10px;
}


.text_content {
padding:0 40px;
}

.top_title {
font-size:30px;
font-weight:100;
color:#fff;
}

.confid {
color:#5ca6aa;
font-size:14px;
margin:20px 0;
}

.lable {
color:#fff;
display:block;
float:left;
width:160px;
height:30px;
padding:8px 0 5px 0;
line-height:30px;
font-size:20px;
margin-bottom:20px;
font-family:'Play', Arial, Helvetica, sans-serif;
}

input, .sel_uni {
height:17px;
padding:8px 10px 5px 10px;
line-height:30px;
background:#fff;
border:1px solid #000;
width:308px;
display:block;
float:left;
margin-left:9px;
font-size:20px;
margin-bottom:20px;
font-family:'Play', Arial, Helvetica, sans-serif;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
color:#c1c1c1;
-webkit-box-shadow:inset 0px 2px 4px 0px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 2px 4px 0px rgba(0,0,0,0.5);
box-shadow:inset 0px 2px 4px 0px rgba(0,0,0,0.5);
text-shadow:0px 0px 1px #d2d2d2;
}

input:focus {
color:#06264c;
-webkit-box-shadow:0px 0px 7px 0px rgba(92,166,170,0.2);
-moz-box-shadow:0px 0px 7em 0px rgba(92,166,170,0.2);
box-shadow:0px 0px 7px 0px rgba(92,166,170,0.2);
text-shadow:0px 0px 1px #48607c;
}


.reg_caption {
float:left;
font-size:14px;
color:#5ca6aa;
width:300px;
margin-left:20px;
line-height:20px;
}



input.button:active {
margin-top:2px;
border-bottom-width:1px;
height:45px;
line-height:42px;
}

input.button_mini {
height:43px !important;
line-height:43px !important;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
padding:0;
width:153px;
padding:0;
background:#8d20c9;
border:1px solid #000;
text-shadow:0px 1px 0px #bd7ee0;
font-family:'Play', Arial, Helvetica, sans-serif;
font-size:20px;
margin-bottom:0;
font-weight:bold;color:#000;
cursor:pointer;
margin-bottom:10px;
}

/**/

input[type=checkbox] {
position:absolute;
clip:rect(0, 0, 0, 0);
}

label.checked {
cursor:pointer;
}


input[type=checkbox]:checked + label.checked:after {
background-position:0 -40px;
}

label.checked:hover:after {
background-position:0 -20px;
}


input[type=checkbox]:checked + label.checked:hover:after {
background-position:0 -60px;
}

label.checked {
color:#5ca6aa;
font-size:14px;
padding-top:5px;
}

------------------------------------------------------------------------------

El problema es que me crea conflictos este último llamado login_estilo.css con el buscador.css ya que aparecen sentencias iguales en ambos de tipo:

-webkit-border-radius
-moz-border-radius
-webkit-box-shadow, etc...

Le he dado vueltas por todas partes y ya no se que hacer.
Agradecería vuestra ayuda.

[fede5426]

No entiendo cuál es el problema

[johnnymartins]

El problema es que al poner el css llamado login_estilo.ss se me ha desencajado la caja del buscador que tenía puesta en mi web que estoy montando.

Y el conflicto viene a raíz de esas líneas que se repiten con la misma sentencia.

[NueveReinas]

Iniciado por johnnymartins

El problema es que al poner el css llamado login_estilo.ss se me ha desencajado la caja del buscador que tenía puesta en mi web que estoy montando.

Y el conflicto viene a raíz de esas líneas que se repiten con la misma sentencia.

¿Cuáles se repiten?

[johnnymartins]

-webkit-border-radius
-moz-border-radius
-webkit-box-shadow

estas líneas aparecen en los dos.

Si elimino mi hoja de estilos llamada: login_estilos.css entonces se ve correctamente mi barra de buscador pero si pongo los dos archivos css en carpetas distintas no se que pasa que se crean como conflictos.

en mi index.html las llamo de este modo:

<link href="css/buscador.css" rel="stylesheet" type="text/css">

<link href="login_estilo.css" rel="stylesheet" type="text/css">

[fede5426]

Esas 3 lineas se pueden repetir en todos los elementos que sea necesario.. El problema podria estar si los dos archivos tuvieran diferentes estilos aplicados al mismo elemento, pero yo no veo que se repita nada asi que tu error está en otro lado.

Antes que nada borra la linea que dice Zoom:1 en .searchform, inline block es soportado por todos los navegadores. Tambien la linea debajo, que tiene un asterisco sin motivo aparente y volves a cambiar la misma propiedad display, eso puede estar generando conflicto.

Si despues de eso sigue sin funcionar, dejanos tu html para revisar todo en conjunto.

Saludos

[johnnymartins]

Muchas gracias es lo que puedo daros en estos momentos.

He podido solucionar mi problema y ahora ya se ve bien.

Sois unos verdaderos profesionales.

Ha sido un placer. Ya se puede dar el tema como solucionado.

Un fuerte saludo para tod@s