Advanced CSS question.

Try using div tags instead, like this:

<div class="coupon"><a href="https://www.google.com">Text</a></div>

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…

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.

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!

You’ll need to put the coupon code on the same line as “Gamestop Coupons Code”.

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="https://www.gamestop.com" target="new">GOOGLE</a></div>

<strong>Description:</strong> Free value shipping on orders over $25.

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="https://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="https://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="https://www.gamestop.com" target="new">GOOGLE</a></span>

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!

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

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’?

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 {}

I simply added span to my .coupon selectors and everything is working perfectly now.

Thanks for the help, I really appreciate it!