I'm applying the strikeout tag
<s>$5,000,000</s>
But the line is too low.. .it's about 1/4 from the bottom rather than through the middle. Any way I can modify this so it goes a bit more through the middle?
views:
189answers:
4
+2
A:
Not with the strike tag, no. It's part of the rendering engine of the browser. For me (in Chrome) the line is rendered just above the middle.
Tesserex
2010-03-23 20:37:52
+2
A:
You can't do it with the strike tag OR the text-decoration:line-through style. The line position is built-in. You could roll your own style for that, but it would be a huge PITA.
Robusto
2010-03-23 20:50:49
Thank you for the clarification. I couldn't find anything on the internet regarding controlling the location.. and now I know why!
jeffkee
2010-03-23 23:38:02
A:
I've cooked up this code which gives you total control over strike-through position and style:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.mark {
border-bottom: 1px solid #000;
top: -9px; /* Tweak this and the other top in equal, but opposite values */
position: relative;
}
.offsetMark {
position: relative;
top: 9px; /* Tweak this and the other top in equal, but opposite values */
}
</style>
</head>
<body>
<div>
<p class="strikethrough">This is an <span class="mark"><span class="offsetMark">example</span></span> of how I'd do it.</p>
</div>
</body>
</html>
Nissan Fan
2010-03-23 21:20:44
Quite the solution - just a bit too complex and messy so I won't bother applying it here. The line location seems fine on Windows machines. It's just mac machines that have something weird going on.
jeffkee
2010-03-23 23:37:32
A:
This solution allows for padding, and uses the csss line-through property It works for firefox, and chrome/ safari does it right anyway.
div.hbPrice span.linethroughOuter {
padding: 0 10px 0 0;
text-decoration: line-through;
position: relative;
}
div.hbPrice span.linethroughInner {
position: relative;
}
/* Firefox only. 1+ */
div.hbPrice span.linethroughOuter, x:-moz-any-link { bottom: 2px; }
div.hbPrice span.linethroughInner, x:-moz-any-link { top: 2px; }
and the mark up is something like...
<div class="hbPrice"><span class="linethroughOuter"><span class="linethroughInner">£1,998</span></span> £999</div>
The other solution is to add a background image of a line, and make it the same colour as the text.
Delazi
2010-07-22 13:43:05