?
Solved

simple css class question

Posted on 2012-09-02
3
Medium Priority
?
495 Views
Last Modified: 2012-09-02
I have class of button called .btn specified in css and is used site wide. padding-top:10px;

in this particular div class only I want the button top padding to be set to 0px.

ie

<div class="testDiv">

<a href="www.google.com" class="btn" title="go">yeah baby!</a>

</div>

How can I target just this instance of the button in my css

ie

.testDiv .btn {
padding-top:0px;
}

doesn't seem to work.

thanks
0
Comment
Question by:tf2012
  • 2
3 Comments
 
LVL 10

Accepted Solution

by:
Gregg earned 2000 total points
ID: 38359623
If you apply .btn class to anchor tag, youll need to set "display: block". See if that helps you.

Take a look at example below. The anchor tag is an inline element, and padding top / bottom doesnt work on inline elements. You can increase whitespace by setting line-height or change to display block (from display inline).

Code below is on jsfiddle: http://jsfiddle.net/zse3s/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
	<style type="text/css">
		div.testDiv {
			background-color:#0099CC;
			width: 500px;
			height: 100px;
		}
		
		div.foo {
			background-color:#cccccc;
			width: 500px;
			height: 100px;
		}
		
		.btn {
			padding-top: 10px;
			display:block;
		}
			
		div.testDiv .btn {
			padding: 0;
		}
	</style>
</head>

<body>
	<div class="testDiv">
		<a href="www.google.com" class="btn" title="go">yeah baby!</a>
	</div>
	<div class="foo">
		<a href="www.yahoo.com" class="btn" title="go">Yahoo</a>
	</div>
</body>
</html>

Open in new window

0
 
LVL 1

Author Closing Comment

by:tf2012
ID: 38359655
great thnx
0
 
LVL 10

Expert Comment

by:Gregg
ID: 38359661
great, thanks.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

830 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