 |
09-01-2006, 10:08 AM
|
 |
SEO
|
|
Join Date: Sep 2004
Location: Vancouver, BC
Posts: 173
|
|
Line-Through
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
|
09-02-2006, 02:53 PM
|
 |
SEO GUY Moderator
|
|
Join Date: Sep 2004
Location: Antalya, Turkey
Posts: 4,111
|
|
Quote:
|
Originally Posted by scottyc
Hey guys,
this may be a very stupid question, but that's ok because I don't mind getting laughed at.
|
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.
__________________
10.3 million entries for Hotels in Turkey but I'm still chipping away.
|
09-02-2006, 04:43 PM
|
 |
SEO
|
|
Join Date: Feb 2005
Location: C:\Norway
Posts: 122
|
|
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.
Last edited by Mano70 : 09-02-2006 at 04:46 PM.
|
09-03-2006, 01:03 PM
|
|
SEO
|
|
Join Date: Feb 2005
Location: C:\Norway
Posts: 122
|
|
|
|
09-03-2006, 10:33 PM
|
|
SEO GUY Moderator
|
|
Join Date: Sep 2004
Location: Antalya, Turkey
Posts: 4,111
|
|
Quote:
|
Originally Posted by Mano70
|
It works quite well... thanks a lot Mano!
__________________
10.3 million entries for Hotels in Turkey but I'm still chipping away.
|
09-03-2006, 11:55 PM
|
|
SEO
|
|
Join Date: Feb 2005
Location: C:\Norway
Posts: 122
|
|
|
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.
|
09-05-2006, 08:51 AM
|
|
SEO
|
|
Join Date: Sep 2004
Location: Vancouver, BC
Posts: 173
|
|
Thanks Mano, I'll give that a shot and get back to you on the results 
Scott |
09-05-2006, 11:11 AM
|
|
SEO
|
|
Join Date: Sep 2004
Location: Vancouver, BC
Posts: 173
|
|
|
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
|
09-05-2006, 12:35 PM
|
|
SEO
|
|
Join Date: Feb 2005
Location: C:\Norway
Posts: 122
|
|
Glad it worked. It also gave me a reason to write a short CSS article on my site. |
|
| Thread Tools |
|
|
| Display Modes |
Rate This Thread |
 Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
|
