estilo dentro de caja div

[DJJJ]

hola.

tengo un caja con bordes redondeados que genere con round corner

CSS

Código HTML:

.roundedcornr_box_324801 {
   background: #cccccc;
}
.roundedcornr_top_324801 div {
   background: url(roundedcornr_324801_tl.png) no-repeat top left;
}
.roundedcornr_top_324801 {
   background: url(roundedcornr_324801_tr.png) no-repeat top right;
}
.roundedcornr_bottom_324801 div {
   background: url(roundedcornr_324801_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_324801 {
   background: url(roundedcornr_324801_br.png) no-repeat bottom right;
}
 
.roundedcornr_top_324801 div, .roundedcornr_top_324801, 
.roundedcornr_bottom_324801 div, .roundedcornr_bottom_324801 {
   width: 100%;
   height: 10px;
   font-size: 1px;
}
.roundedcornr_content_324801 { margin: 0 10px; }
 

a la cual le agregue:

Código HTML:

.buscar {
font-size: 10px;
color:#ff0000;
}
 

HTML

Código HTML:

<div class="roundedcornr_box_324801">
   <div class="roundedcornr_top_324801"><div></div></div>
      <div class="roundedcornr_content_324801">
         <p class="buscar">Lorem ipsum dolor sit amet, consectetur 
         adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim 
         veniam, quis nostrud exercitation ullamco laboris 
         nisi ut aliquip ex ea commodo consequat. Duis aute 
         irure dolor in reprehenderit in voluptate velit esse 
         cillum dolore eu fugiat nulla pariatur. Excepteur 
         sint occaecat cupidatat non proident, sunt in culpa 
         qui officia deserunt mollit anim id est laborum.
</p>
      </div>
   <div class="roundedcornr_bottom_324801"><div></div></div>
</div>
 

el problema es que en la etiqueta <p> no me toma el estilo "buscar" que hice
alguna ayuda?

[marilinadg]

Este estilo lo pusiste en el css no? porque en el post mencionás que es código html.


.buscar {
font-size: 10px;
color:#ff0000;
}

[PHPau]

Con CSS3 puedes redondear directamente los cantos de los div, mírate algun manual ;)

[esmolat]

no sabria decirte exactamente el motivo por el cual no te piya el estilo, pero es muy probable que poniendo !important detras de la propiedad que falla te funcione:

un ejemplo seria asi:

font-size: 10px !important;

como recomendacion te diria que te instales el firebug de firefox o chrome, te permite navegar por el codigo de una web y ver que estilos se estan aplicando a cada etiqueta, soluciona muchos problemas.

[DJJJ]

voy contestando por parte

si el codigo del estilo buscar lo puse dentro del css.
con css3 se puede rendondear pero para navegadores viejos no es soportado

el problema es con firefox tengo instalado el firebug y lo que me sale en el css en la etiqueta buscar es que lo hereda de p

yo no se si sera que aparte tengo estas dos etiquetas

Código HTML:

p.titulo {
text-align:center;
font-family:Arial ;
font-weight:bold;
padding:0px;
margin: 12px;
color:#FFFFFF;
font-size:12px;
}
 
p {
text-align:justify;
font-family:Arial ;
padding:0px;
margin: 10px;
color:#333333;
font-size:12px;
}
 

que interfieren con el <p de la clase buscar

[PHPau]

Es que para redondear en navegadores viejos o usas imágenes o nada ;)

[Tecna]

Buenas,

por el código que has mostrado las dos reglas del último mensaje no parecen tener nada que ver. El problema es que estará heredando otro valor para la propiedad font-size de algún elemento en el que se haya declarado con más peso específico, por ejemplo en la línea 17 de tu primer código declaras esa propiedad con un selector formado por un elemento div y una clase con lo que tendría un peso de 11 y tu intentas modificarlo unicamente con una clase cuyo peso sería 10 por eso no se modificaría y según la estructura del html del ejemplo el párrafo con la clase buscar se vería afectado y heredaría el valor. Como no muestras todo el código puede que haya otra declaración con mas peso que sea la que finalmente se aplique pero la solución pasa por revisar los estilos y ajustar el peso específico de las declaraciones que afecten a esa propiedad del elemento en cuestión para que la mayor sea la que quieres que se aplique.

[ArturoGallegos]

en la hoja de estilos tiene prioridad la ultima regla que pongas....

si tienes:

p{}
.buscar{}
no hay problema pero si pones

.buscar{}
p{}

estarías sobre escribiendo los estilos de buscar, y por ende no funcionaria como tu deseas.

prueba colocar los estilos de .buscar al final de tu CSS

[Tecna]

Buenas,

el orden de aparición de las reglas en las hojas de estilo es sólo el último criterio que se usa para determinar que valor se aplicará a una propiedad de un elemento según el orden de cascada y no tendrá importancia si en el resto de criterios hay diferencia, es decir sólo en el caso de que dos reglas tengan el mismo peso, origen y especifidad prevalecería la última declarada. Y en el ejemplo que se muestra las declaraciones no tienen el mismo peso ya que si usamos una clase como selector tiene más peso que si usamos un elemento genérico incluso aunque declaremos éste despues. Por ejemplo:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>prioridad cascada</title>
<style>
    p {background: #f00;} <!-- rojo -->
    .buscar{background: #ff0;} <!-- amarillo -->
    p{background: #0f0;} <!-- verde -->
</style>
</head>
<body>
<p class="buscar">soy de color amarillo porque la clase tiene mas peso que el elemento</p>
<p>soy de color verde y no rojo porque a igual peso prevalece la ultima declarada para el elemento p</p>
</body>
</html>