Title: Advanced CSS question.
Last modified: August 19, 2016

---

# Advanced CSS question.

 *  Resolved [The Night Fox](https://wordpress.org/support/users/the-night-fox/)
 * (@the-night-fox)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/advanced-css-question/)
 * I recently started a website called [http://www.videogamecoupons.org/](http://www.videogamecoupons.org/).
 * I use the following code to create a coupon box around a html link:
 *     ```
       p.coupon {
       	display: block;
       	margin: 0;
       	padding: 0;
       	height: 24px;
       }
       p.coupon a {
       	display: block;
       	margin: 0;
       	padding: 0 25px 0 5px;
       	font: bold 14px/22px 'Lucida Sans', 'Lucida Grande', sans-serif;
       	float: left;
       	border: 1px dashed #febf02;
       	background: #fdedb4 url('images/bg-post-coupon.gif') center right no-repeat;
       	color: #437216;
       	text-shadow: 1px 1px #fff;
       	text-decoration: none;
       	cursor: pointer;
       }
       p.coupon a:hover {
       	color: #000;
       	text-shadow: 1px 1px #fff;
       	text-decoration: none;
       }
       ```
   
 * This coupon box can be seen if you scroll down to the bottom of my homepage.
 * I use `<p class="coupon"><a href="http://www.google.com">Text</a></p>` in the
   wordpress post to call the styling features.
 * The problem is that this creates a new paragraph. I would like it to appear just
   after the text on the first line of the post.
 * ie: Gamestop coupon code: [Coupon Link/box]
 * I’m sure there is an easy solution, but I have a very basic knowledge of CSS 
   and can’t figure it out.

Viewing 12 replies - 1 through 12 (of 12 total)

 *  [Shannon Smith](https://wordpress.org/support/users/cafenoirdesign/)
 * (@cafenoirdesign)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/advanced-css-question/#post-1986973)
 * Try using div tags instead, like this:
 * `<div class="coupon"><a href="http://www.google.com">Text</a></div>`
 *  Thread Starter [The Night Fox](https://wordpress.org/support/users/the-night-fox/)
 * (@the-night-fox)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/advanced-css-question/#post-1986976)
 * Thanks for the quick reply.
 * When I put in div tags it still goes to the line below, but the styling featured
   don’t work. Any other ideas?
 * If you click onto the website now you can see what happens when div tags are 
   used…
 *  [Shannon Smith](https://wordpress.org/support/users/cafenoirdesign/)
 * (@cafenoirdesign)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/advanced-css-question/#post-1986978)
 * You’ll need to change the styling to something like this:
 *     ```
       .coupon {
       	margin: 0;
       	padding: 0;
       	height: 24px;
       }
       .coupon a {
       	margin: 0;
       	padding: 0 25px 0 5px;
       	font: bold 14px/22px 'Lucida Sans', 'Lucida Grande', sans-serif;
       	float: left;
       	border: 1px dashed #febf02;
       	background: #fdedb4 url('images/bg-post-coupon.gif') center right no-repeat;
       	color: #437216;
       	text-shadow: 1px 1px #fff;
       	text-decoration: none;
       	cursor: pointer;
       }
       .coupon a:hover {
       	color: #000;
       	text-shadow: 1px 1px #fff;
       	text-decoration: none;
       }
       ```
   
 * Both the p tags and display:block, will make it appear on its on line.
 *  Thread Starter [The Night Fox](https://wordpress.org/support/users/the-night-fox/)
 * (@the-night-fox)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/advanced-css-question/#post-1986980)
 * I made the suggested changes but it still breaks to a new line. Also the text
   color is now static. Any other ideas?
 * Really appreciate your help btw!
 *  [Shannon Smith](https://wordpress.org/support/users/cafenoirdesign/)
 * (@cafenoirdesign)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/advanced-css-question/#post-1986982)
 * You’ll need to put the coupon code on the same line as “Gamestop Coupons Code”.
 *  Thread Starter [The Night Fox](https://wordpress.org/support/users/the-night-fox/)
 * (@the-night-fox)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/advanced-css-question/#post-1986983)
 * I had alread put them both on the same line, but for some reason the coupon code
   always breaks to the next line.
 *     ```
       <strong>Gamestop Coupons Code:</strong> <div class="coupon"><a href="http://www.gamestop.com" target="new">GOOGLE</a></div>
   
       <strong>Description:</strong> Free value shipping on orders over $25.
       ```
   
 *  [Shannon Smith](https://wordpress.org/support/users/cafenoirdesign/)
 * (@cafenoirdesign)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/advanced-css-question/#post-1986987)
 * If you look at the html output, you’ll see this:
 *     ```
       <p><strong>Gamestop Coupon Code:</strong><br />
       <strong>Description:</strong> 16% off all in-stock used games & DVDs<br />
       <strong>Tip: </strong> Get free value shipping by combining with: <a target='new' href="http://www.gamestop.com" >SAVER</a>*<br />
       *Order must be at least $25 to qualify for free shipping.<br />
       <strong>Expires:</strong> Limited Time<br />
       <a target='new' href="http://www.gamestop.com" >Click Here To Get This Deal At GameStop.com</a></p>
       ```
   
 * Try switching between the Visual and HTMl editor, and saving in each. You could
   also try switching the div tags to span tags.
 * `<span class="coupon"><a href="http://www.gamestop.com" target="new">GOOGLE</
   a></span>`
 *  Thread Starter [The Night Fox](https://wordpress.org/support/users/the-night-fox/)
 * (@the-night-fox)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/advanced-css-question/#post-1986990)
 * I love you right now! I used <span> tags and removed `float: left;` from the 
   css and it positions correctly now 😀 .
 * Before I removed p. from .coupon, the text in the coupon box used to be green
   and on mouse over it would turn black. Any idea why this doesn’t work now?
 * Thanks again!
 *  [Chip Bennett](https://wordpress.org/support/users/chipbennett/)
 * (@chipbennett)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/advanced-css-question/#post-1986993)
 * Paragraph (`<p>`) and Division (`<div>`) tags are _block-level_ elements, which
   means that they _break onto a new line_.
 * You have two options:
 * 1) Use an inline element, such as a `<span>` tag
    2) Add `display:inline` to 
   your P/DIV tag CSS definition
 *  Thread Starter [The Night Fox](https://wordpress.org/support/users/the-night-fox/)
 * (@the-night-fox)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/advanced-css-question/#post-1986996)
 * Thank’s chip.
 * When I edited the following code:
 *     ```
       p.coupon {
       	display: block;
       	margin: 0;
       	padding: 0;
       	height: 24px;
       }
       p.coupon a {
       	display: block;
       	margin: 0;
       	padding: 0 25px 0 5px;
       	font: bold 14px/22px 'Lucida Sans', 'Lucida Grande', sans-serif;
       	float: left;
       	border: 1px dashed #febf02;
       	background: #fdedb4 url('images/bg-post-coupon.gif') center right no-repeat;
       	color: #437216;
       	text-shadow: 1px 1px #fff;
       	text-decoration: none;
       	cursor: pointer;
       }
       p.coupon a:hover {
       	color: #000;
       	text-shadow: 1px 1px #fff;
       	text-decoration: none;
       }
       ```
   
 * To this:
 *     ```
       .coupon {
   
       	margin: 0;
       	padding: 0;
       	height: 24px;
       }
       .coupon a {
   
       	margin: 0;
       	padding: 0 25px 0 5px;
       	font: bold 14px/22px 'Lucida Sans', 'Lucida Grande', sans-serif;
       	border: 1px dashed #febf02;
       	background: #fdedb4 url('images/bg-post-coupon.gif') center right no-repeat;
       	color: #437216;
       	text-shadow: 1px 1px #fff;
       	text-decoration: none;
       	cursor: pointer;
       }
       .coupon a:hover {
       	color: #000;
       	text-shadow: 1px 1px #fff;
       	text-decoration: none;
       }
       ```
   
 * The text is always black now, whereas before I edited it it was green and on 
   mouseover it would turn black. Do you have any idea why it stopped working when
   I removed the ‘p’ from ‘.coupon’?
 *  [Chip Bennett](https://wordpress.org/support/users/chipbennett/)
 * (@chipbennett)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/advanced-css-question/#post-1986997)
 * > Do you have any idea why it stopped working when I removed the ‘p’ from ‘.coupon’?
 * It _could_ be a specificity problem.
 * You’re using `<span>` tags in place of the `<p>` tags now, right? If so, try 
   appending “span” to your `.coupon` selectors, e.g.:
 *     ```
       span.coupon {}
       span.coupon a {}
       span.coupon a:hover {}
       ```
   
 * I doubt that it’s a specificity problem, but this will confirm.
 * Assuming it’s not a specificity issue, it might be that you’re not fully declaring
   the anchor states. You need to include the link, visited, hover, and active pseudoclasses,
   e.g. replace this:
 *     ```
       span.coupon a {}
       ```
   
 * with this:
 *     ```
       span.coupon a,
       span.coupon a:link,
       span.coupon a:visited,
       span.coupon a:hover,
       span.coupon a:active {}
       ```
   
 *  Thread Starter [The Night Fox](https://wordpress.org/support/users/the-night-fox/)
 * (@the-night-fox)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/advanced-css-question/#post-1986998)
 * I simply added span to my .coupon selectors and everything is working perfectly
   now.
 * Thanks for the help, I really appreciate it!

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Advanced CSS question.’ is closed to new replies.

 * 12 replies
 * 3 participants
 * Last reply from: [The Night Fox](https://wordpress.org/support/users/the-night-fox/)
 * Last activity: [15 years, 2 months ago](https://wordpress.org/support/topic/advanced-css-question/#post-1986998)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics