View Full Version : Line-Through

scottyc
09-01-2006, 10:08 AM
Hey guys,

this may be a very stupid question, but that's ok because I don't mind getting laughed at.

I'm just playing around with css, want to be showing the normal price for something and crossing it out, then displaying the discounted online price.

Easy enough.

span.CrossedOut {
text-decoration : line-through;
}

The problem is that they want it to be crossed out in red and keep the text black. When I try setting the color to red, it sets text and decoration to red. Is there a way to specificy the text black and color red?

Thanks,

Scott
Paz
09-02-2006, 02:53 PM
[QUOTE=scottyc]Hey guys,

this may be a very stupid question, but that's ok because I don't mind getting laughed at.[/QUOTE]

LOL.. I've no idea of a solution either, but I've sent in for the CSS Cavalry. My feeling is the answer will be "no; can't do that", but I'm crossing my fingers for you.

Cheers,
Paz.
Mano70
09-02-2006, 04:43 PM
As far as I know you can't have a different color on linethrough, it will get the same color as the font. However, this can be accomplished by thinking outside "the box". The drawback is, what I'm going to suggest is not printer friendly.

Make a picture 2x2px or 1x1px in red color. Save it where you wan't it (in this example it is saved in your "root").

Rest of the example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Linethrough - different line and font color</title>
<style type="text/css">
body {
background:white;
color: black;
font: 16px/ serif;
}
.container span {
background: url(/linethrough.gif) repeat-x center left;
}
</style>
</head>
<body>
<div class="container">Our goods costs <span>$100</span> bucks</div>
</body>
</html>

It is also perhaps possible to mess around with span and a negativ border-bottom color on that one, but the short test I did indicated that I needed to use display: block on the span, and then the "bucks" text was thrown down to the next line. However, I haven't experimented much with this.
Mano70
09-03-2006, 01:03 PM
BTW, you can see my suggestion here:
http://www.strictlycss.com/articles/article/23/css-different-font-color-than-linethrough-color---possible
Paz
09-03-2006, 10:34 PM
[QUOTE=Mano70]BTW, you can see my suggestion here:
http://www.strictlycss.com/articles/article/23/css-different-font-color-than-linethrough-color---possible[/QUOTE]

It works quite well... thanks a lot Mano!
Mano70
09-03-2006, 11:56 PM
Did a small update, have changed the image to 1px x 3px to center the line a little bit better, and linked to the image I have used.
scottyc
09-05-2006, 08:51 AM
Thanks Mano, I'll give that a shot and get back to you on the results :D

Scott
scottyc
09-05-2006, 11:11 AM
Mano,

It works great! Sweet action.

Back to the joys of building some order tracking systems, it was so nice to have a little distraction though.

Scott
Mano70
09-05-2006, 12:35 PM
Glad it worked. It also gave me a reason to write a short CSS article on my site. :D