Conflicto entre 2 CSS's

romero92 · #1 (**permalink**) 16/10/2010, 12:54

Buenas compañeros,
os explico,
estoy creando una web y quiero meterle un Topmenu en Ajaz pero como es natural este ultimo incorpora un CSS, pues en el index.html, al llamar a los 2 CSS (se encuentran en rutas distintas y eso), la web se muestra mal (pasa algo con el CSS de la web), he mirado el nombre de las clases de ambos CSS y no hay conflictos ni nada..
como podria solucionarlo?
Gracias!

cristian_cena · #2 (**permalink**) 16/10/2010, 23:54

Hola romero92,
controla que estés dando bien las rutas.
describe correctamente el tema o bien envíame una bola de cristal y lo vemos. Un saludo.

jomaruro · #3 (**permalink**) 17/10/2010, 01:18

Hola:

Conflicto tiene que haberlo, posiblemente por herencia, sino funcionaría bien. Pero danos un poco de tiempo para revisar todo el código que nos has puesto que es mucho y hay que verlo despacio.

Saludos.

romero92 · #4 (**permalink**) 18/10/2010, 12:29

Buenas,
perdon,
el codigo del index.html donde declaro ambos CSS es este:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link href="lib/griddler3.css" rel="stylesheet" type="text/css" />

Dentro de <head> y tal,
el primero ("style.css") es el estilo de la web en si y el segundo es el estilo del topmenu ajax descargado.
Las rutas estan bien, ya que cuando solo dejo llamando uno de los 2 CSS, sea cual sea, funciona perfectamente la funcion de cada CSS, el problema es cuando los junto los 2..
Si quereis os paso los 3 archivos (index.html, 2 CSS) porque no se donde puede estar el error y pegar aqui 1000 lineas de codigo..
Gracias compañeros..

kseso? · #5 (**permalink**) 18/10/2010, 12:34

Firebug en firebox para ver las herencias y qué reglas están actuando sobre el elemento seleccionado (y muchas otras cosas más).
Chrome y otros navegadores tienen algo que se le parece, pero no es lo mismo.

Y por cierto, no aclaró qué significa

Cita:

la web se muestra mal

jomaruro · #6 (**permalink**) 18/10/2010, 12:57

Hola:

Cita:

Iniciado por romero92

Si quereis os paso los 3 archivos (index.html, 2 CSS) porque no se donde puede estar el error y pegar aqui 1000 lineas de codigo..

También puedes subirlos a un servidor gratuito y pasarnos la URL para verlo en la red.

Saludos.

:adios.

romero92 · #7 (**permalink**) 19/10/2010, 10:49

Aqui lo teneis: http://www.fileserve.com/file/cJx283H
El archivo "index.html" es el que pone: "pricing-grid-col3"
Gracias..

jomaruro · #8 (**permalink**) 19/10/2010, 15:03

Hola:

El problema estaba, como era de suponer en las herencias, cambia este apartado de tu style.css:

Código CSS:

Ver originalul {
    padding: 0;
}
 
ul li {
    list-style-type: none;
    display: inline;
    margin-right: 15px;
}
 
ul li a {
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000;
    padding: 3px 7px;
    
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    
    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}
 
ul li a:hover {
    background: #01458e;
    color: #ff0;
 
    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}

por este otro:

Código CSS:

Ver original#menu ul {
    padding:0;
}
 
#menu ul li {
    list-style-type: none;
    display: inline;
    margin-right: 15px;
}
 
#menu ul li a {
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000;
    padding: 3px 7px;
    
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    
    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}
 
#menu ul li a:hover {
    background: #01458e;
    color: #ff0;
 
    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}

Asi, diferenciando la lista del menú de la lista de griddler no se mezclan las propiedades de una y otra.

Saludos.

romero92 · #9 (**permalink**) 21/10/2010, 12:44

Cita:

Iniciado por jomaruro

Hola:

El problema estaba, como era de suponer en las herencias, cambia este apartado de tu style.css:

Código CSS:

Ver originalul {
    padding: 0;
}
 
ul li {
    list-style-type: none;
    display: inline;
    margin-right: 15px;
}
 
ul li a {
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000;
    padding: 3px 7px;
    
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    
    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}
 
ul li a:hover {
    background: #01458e;
    color: #ff0;
 
    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}

por este otro:

Código CSS:

Ver original#menu ul {
    padding:0;
}
 
#menu ul li {
    list-style-type: none;
    display: inline;
    margin-right: 15px;
}
 
#menu ul li a {
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000;
    padding: 3px 7px;
    
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    
    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}
 
#menu ul li a:hover {
    background: #01458e;
    color: #ff0;
 
    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}

Asi, diferenciando la lista del menú de la lista de griddler no se mezclan las propiedades de una y otra.

Saludos.

Muchas gracias de verdad!!! :)

jomaruro · #10 (**permalink**) 21/10/2010, 12:57

Hola:

De nada, romero92. Me alegro de haberte sido útil.

Saludos.