Archived topic
Can't get response from css
6 replies · Started by Max on July 21, 2016
Tom
I am trying to style an info box I have in the first footer widget. I am using an intelliwidget as a text widget. I can get the padding on the right, left and bottom to respond to whatever pixel value I enter. However, the top value has no effect on the styling.
CSS as follows:
/*style info box in footer widget*/
.subinfo {border: 3px solid #eee; padding:10px 10px 10px 10px; font-size:13px; background:#ebf1d3;}Html in text widget as follows:
<p class="subinfo">Subscribe to our free newsletter.</p>
I have no idea what the problem is.
Any assistance you can give is greatly appreciated.
Kind Regards
Max
That should work fine as per the code. I would have to actually see it to know why it isn't.
Try using the Inspect element tool in your browser - it will show the value crossed out if other CSS is overwriting it.
I have tried firebug also. The top padding value appears fine, but even if I reenter another value in firebug, it still does not respond. r,b,l are fine and change if new value entered. Tried important doesn't work, tried padding-top value, doesn't work, even tried adding style="padding-top" to html.
Very odd and very annoying.
Hey Tom
I have done some more testing and the problem is eliminated if I remove the html to insert an image above the info box. So the problem is caused by my insert image html? The full html in the text widget is:
<img class="alignleft" src="http://localhost/forum/wp-content/uploads/Free-Newsletter.jpg" alt="Free Newsletter" width="235" height="180" />
<p class="subinfo">Subscribe to our free newsletter and get served first whenever we publish a hot, fresh, and tasty new tidbit.</p>
[si-contact-form form='2']I tested the above html in a garden variety WP text widget and got the same issue: padding top value not recognised.
Thanks in advance for any help.
Kind Regards
Max
Tough for me to help without seeing the site, although this seems like general CSS help instead of GeneratePress related issues.
It's most likely the alignleft class - floating can mess with padding.
Tom
Yes it was the alignleft causing the problem. I fixed it by putting the image html inside a div using style= and it fixed the problem.
Interestingly the problem occurs in a footer widget but the same code is fine in a sidebar widget?
Thanks for your help.
Kind Regards
Max
Glad you got it working :)