'div' che non fà funzionare il css

**JANUS70** · 28-02-2013, 00:08

Ciao ..
non riesco a capire il motivo per cui una proprietà di un css (e una sola, e cioè quella sul carattere) non viene 'presa' se l'oggetto (un tasto) se lo stesso tasto si trova dentro ad uno specifico 'div' (vedi da immagine la differenza tra i 2 tasti):

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">      
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">         

<head>  

<style type="text/css" media="screen">           
    @import url("css/stile_screen.css");           
    @import url("css/dhtmlgoodies_calendar.css");  
</style>                                             
<style type="text/css" media="print">            
    @import url("css/stile_print.css");            
</style>                                             

<script type="text/javascript" src="js/dhtmlgoodies_calendar.js"></script>   
<script type="text/javascript" src="js/notnumbers.js"></script>              

</head> 
<body  onload="document.getElementById('fa1').focus();" >  
 
<div id="container_top">


      <input id="tasto_small" style="font-size: 15px;" type=submit value=Inser.>
      <input type="hidden"  name="data_sel_ts"  value='1361746800'>                       
                                                                   

                                                                       
</div>


 
<input id="tasto_small" style="font-size: 15px;" type=submit value=Inser.>

</body>  </html>

I CSS:

codice:

#container_top   {background: url(../images/topBk_2.jpg) repeat-x top #FFF;         
                  margin:  0 5px 0 5px;                                             
                  padding: 15px;                                                    
                  border: 1px solid #999;                                           
                  -moz-border-radius: 12px;                                         
                  -webkit-border-radius: 12px;                                      
                  font:  bold 15px/0.9 Georgia, \"Times New Roman\", serif;         
                 }                                                                  
                                                                                    
#container_top input   {font: 13px/1 Arial,sans-serif;}                             
#container_top select  {font: 13px/1 Arial,sans-serif;}                             
#container_top submit  {font: bold 16px/1.3 Georgia, \"Times New Roman\", serif;}   
                                                                                    
#tasto_small {                                                                      
            width:65px;                                                             
            height:23px;                                                            
            -moz-border-radius  : 9px;                                              
            -webkit-border-radius  : 9px;                                           
            background: url(../images/tastoBk_index.jpg) center ;                   
            border: 3px groove #00A050 ;                                            
            cursor: pointer;                                                        
            font: bold 11px/0.8 Georgia, \"Times New Roman\", serif;                
            font-style: italic;                                                     
            color:#FFF;                                                             
       }                                                                            
#tasto_small:hover { color: #FFFF66; }

**piesse78** · 28-02-2013, 00:20

due problemi.

1) non dovresti assegnare lo stesso ID a più di un elemento. Usa CLASS invece.

2) per il font, nel CSS tu assegni font-style: italic a tasto_small, ma questa regola viene sovrascritta da

codice:

#container_top input   {font: 13px/1 Arial,sans-serif;}

che sottintende lo style=normal in quanto proprietà di default.

soluzione veloce ma non molto elegante consiste nello scrivere

codice:

font-style: italic !important;

**JANUS70** · 02-03-2013, 00:55

in effetti con '!important' funziona !! :-)
ma scusa .. domanda stupida ..
lo stile di un oggetto 'contenuto' non dovrebbe avere la precedenza sul 'contenitore' ?

**piesse78** · 02-03-2013, 01:40

no, la precedenza viene data dal selettore che utilizzi. Se tu scrivi

codice:

#tasto_small {...}

hai utilizzato un selettore ID.

Se scrivi

codice:

#container_top input  {...}

hai utilizzato un selettore ID insieme a un selettore "elemento".

Puoi pensare di assegnare un peso 100 a un selettore ID, un peso 10 a un selettore classe e un peso 1 a un selettore elemento.

La prima regola pesa 100, la seconda 101 quindi vince la seconda.

maggiori info qui
http://www.html.it/pag/14222/eredita...tti-tra-stili/

Discussione: 'div' che non fà funzionare il css

Strumenti discussione

Ricerca discussione

Visualizza

'div' che non fà funzionare il css

Permessi di invio