Solved

Simple CSS problem

Posted on 2013-01-08
5
213 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Find out what you should include to make the best professional email signature for your organization.
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
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).

730 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