[Resolved] Can't get response from css

[Max]

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

[Tom]

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.

[Max]

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.

[Max]

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

[Tom]

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.

[Max]

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

[Tom]

Glad you got it working 🙂

[Author]

Posts