Solved

Simple CSS problem

Posted on 2013-01-08
5
179 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 52

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 500 total points
ID: 38756442
0
 

Author Closing Comment

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

Expert Comment

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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Read about why website design really matters in today's demanding market.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

759 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now