Problème de cascade Css: Mozilla

Question

J'ai un problème pour visualiser mon application Web dans Mozilla. Dans mon application web j'ai un bouton dont les styles CSS sont comme ci-dessous:.

.page_button 
{ 

BACKGROUND-IMAGE: url(../images/pagebutton_bg2.png); 
BORDER-LEFT:0px; 
/*WIDTH: 100%;*/ 
CURSOR: pointer; 
/*COLOR: #000000;*/ 
BORDER-BOTTOM:0px; 

} 

Comme ci-dessus, je l'ai commenté les "Width:100%" & "Color:#000000" attributs car ils causent des problèmes dans Mozilla Firefox (L'option width100% de fait ma les boutons apparaissent très petits) - donc je les ai commentés.

Mais le problème ici est que ce bouton hérite le même Color:#000000 & Width:100% d'autres éléments parents.Comment puis-je arrêter cet héritage.

J'ai même essayé de remplacer ces propriétés comme: Color : null; Width : none ---> Mais cela ne fonctionne pas.

J'apprécie toutes les suggestions pour surmonter cela.

Cordialement, Vijay

Answer 1

Je ne sais pas si je comprends bien votre problème, mais si vous voulez éviter l'héritage accidentel vous pouvez essayer d'utiliser les chemins complets ... donc au lieu de simplement .page_button vous pouvez utiliser quelque chose comme body.page_button mais il est plus probable que vous devriez le faire ailleurs dans votre code et non dans la partie où vous affichez de l'espoir qui aide ... bonne chance!

Answer 2

width est not an inheritable property, vous devez donc appliquer le style width: 100% à votre bouton à l'aide d'un autre sélecteur.

Si vous n'avez pas déjà Firebug, alors je recommande de l'installer et de l'utiliser. Avec Firebug, vous pouvez sélectionner n'importe quel élément DOM et retracer exactement comment les valeurs de toutes les propriétés CSS de l'élément ont été calculées.

Answer 3

Si le bouton est sur un élément de lien, la largeur n'aura d'effet que si le lien est défini sur display:block; ou display:inline-block; . Cela pourrait avoir un effet inattendu. Je joins également la recommandation de Firebug!