38

I installed Thank you plugin but the button on my test site looks strange.

I found out why. Because it inherits #commentform textarea { width: 45%; } from my theme. If I remove the width from css the button looks ok. Any idea how I can fix that? Of course I do not want to remove width for #commentform textarea. Can I do something about that on css level of the button? Something like width:not-inherit; width:reset; I'd say that the width of the button wouldn't be declared at all if there was no #commentform textarea

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
Radek
  • 13,813
  • 52
  • 161
  • 255

4 Answers4

97

Try putting

width: auto;

on the button. That should fix it in this case.

jimr
  • 11,080
  • 1
  • 33
  • 32
  • `width: auto;` looks good. I guess the background image is the trouble thing now. But it should be ok from css point of view. Thank you for that. – Radek Jun 04 '10 at 00:14
  • Does this answer implies that we have to know the default value for each property we want to break inherited value ? – Steve B Jun 18 '12 at 15:24
6

It is an old question but I just had the same problem with width inherit from parent as 100%. Turns out adding display property to inline-block helps. 

display: inline-block;
VK Da NINJA
  • 510
  • 7
  • 19
andreijy
  • 197
  • 2
  • 3
2

you can add "!important" to the newer css.

ex : 

first{ float:right;}
second{ float:left !important;}



<div class="first second"></div>

This div should be float left

Stéphane
  • 11,755
  • 7
  • 49
  • 63
  • `float:left !important;` didn't help. I believe it is about the width – Radek Jun 04 '10 at 00:08
  • hehe sorry, the float left was just an exemple to show how to override a previous css, not the solution to your problem :) anyway, you found the solution. – Stéphane Jun 04 '10 at 09:22
0

Put this in your css and also remove that inline styling you have there for that button:

input.thanks_button{
    background:url("http://asha.onalllevels.com/wp-content/plugins/thanks-you-counter-button/images/thanks_compact_blue1.png") no-repeat;
    color:#fff;
    font-family:Verdana,Arial,Sans-Serif;
    font-size:14px;
    font-weight:normal;
    width:auto !important;
}
Gavrisimo
  • 1,827
  • 5
  • 25
  • 33
  • not sure what you mean by `remove inline styling`. I tried to remove anything like inline using firebug along with your code and it had no affect. Not sure if I did it right way :-( – Radek Jun 04 '10 at 00:59