[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Simple CSS problem

Posted on 2013-01-08
5
Medium Priority
?
235 Views
Last Modified: 2013-01-08
I have this page:

http://goo.gl/hf5MP

There is a div class of "callout" - see the text "Brand lifts in action"

I have set .callout p {} to this:
/* Line 2024 */
.callout p
{
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 5px;
  padding-left: 0px;
  font-size: 90%;
}

However, it is using one of these styles instead - there is a large gap underneath the text "learn more" which leads me to believe it is using the padding from one of the below styles. How can I avoid this?

/* Line 89 */
p
{
  font-size: 16px;
  padding-bottom: 10px;
}

/* Line 1965 */
#container p
{
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 20px;
  padding-left: 0px;
}
0
Comment
Question by:lvollmer
  • 2
  • 2
5 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38756422
/* Line 89 */
p
{
  font-size: 16px;
  padding-bottom: 10px;
}

will hit every P tag.   Just set your

/* Line 2024 */
.callout p
{
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 5px;
  padding-left: 0px;
  font-size: 90%;

  font-size: ??px;
  padding-bottom: ??px;
}
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38756435
#container p is more specific than .callout p

id has priority over class to get around it you need an id on the specific p that you want to target.  Or you can try using !important on the class properties which will override the id declaration but probably screw up some thing else.

Cd&
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 38756442
0
 

Author Closing Comment

by:lvollmer
ID: 38756449
Jackpot, thanks!!
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38756582
That was a great article! Thanks.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
This video teaches users how to migrate an existing Wordpress website to a new domain.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question