A Better line-through?

[flhu]

I'm working on a website, like a lot of websites, that has a line-through for the MSRP (retail price). I'm having a problem with the line-through over the number 8, sometimes causing it to look like the MSRP is less than our price.

Without the line-trough, I fear that it might confuse the user as to what the price is. I've thought about using a background-image to make the line darker and behind MSRP (in light blue), but this looks more like I am highlighting it.

I've tried to increase the font-weight, but this seems to also increase the line-through.

The fonts that I use throughout the site is "Verdana,Helvetica,Sans"... maybe a font with a rounder or higher "waist" for "8" would work? My design esthetic really wants me to keep the number of fonts used to a bare minimum.

Is there a way in css to change characteristics of the line-through: thickness, color, and/or position?

Thanks

[wige]

The only workaround I can think of would be to use a fake line through. That is where you create a gif with a horizontal line and transparent background. The CSS would be as follows:

<style>
.linethrough {
background: url(/linethrough.gif) repeat-x center left;
color: #000;
}
</style>

The HTML code would be the same as you are used to.

<p>Their price: <span class="linethrough">$18.88</span></p>

You would need to create a stylesheet to display a normal linethrough if the document is printed, however, since the background image won't be printed. This method will allow you to control the size, position, thickness and color of the line. If you set the color to be lighter than the text, that should ensure the numbers can be read correctly.

[Web-Design-Guy]

Good solution. I'd see how it looked as a diagonal or even a cross, handwriting-style, as it the price appears to be crossed-out...

[subsystems]

I haven't messed with it but you may be able to use a non-linethrough font in say black for the price and a overlay a linethrough using css but instead of using a visable characer use something that will produce just the linethrough. Not sure if the nbsp will do it. Maybe the minus sign with a linethrough. You may have to go to a fixed width font for both the price and linethrough to get everything to line up nicely.
Example:
$88.00 in black
------ in red overlayed using css positioning.
Play with the colors. Not sure what would look best using this technique.
Haven't tried this approach but it should work fine.

[confettiguru]

I've found The best font to cure this is Georgia

[cbosleeds]

I've only ever used the srikethrough a couple of times for this - Arial worked fine, so far as I can remember.