Css cascade problem:Mozilla

Question

Hi Guys, I have a problem in viewing my web app in mozilla. In my web app I have a button whose css styles are as below:

.page_button
{

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

}

As above I have commented out the "Width:100%"&"Color:#000000" attributes as they are causing problems in Mozilla Firefox.(The width100% option makes my buttons appear very small) -- so i commented them.

But the problem here is that this button is inheriting the same Color:#000000 & Width:100% from other parent elements.How can I stop this inheritance.

I even tried overriding those properties like : Color : null; Width : none ---> But this is not working.

I appreciate any suggestions to overcome this.

Regards, Vijay

Answer 1

I don't know if I understand your problem correctly but if you want to prevent accidental inheritance you can try and use full paths...so instead of just .page_button you could use something like body.page_button though it is more probable that you should do that somewhere else in your code and not in the part you are displaying hope that helps...good luck!

Answer 2

width is not an inheritable property, so you must be applying the style width: 100% to your button using another selector.

If you don't already have Firebug, then I recommend installing it and using it. With Firebug, you can select any DOM element and trace back exactly how the values of all CSS properties on the element were calculated.

Answer 3

If the button is on a link element, then width will have no effect unless the link is set to display:block; or display:inline-block; . That could be having an unintended effect.

I also second the Firebug recommendation!