Here's a javascript style changer I just made for ya... copy and paste
into an html file; you'll be able to click the buttons and visually see
the different effects that the style changes have on the text inside
the div box. -Jim
--------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>te xtSpacing CSS PlayGround</title>
<style type="text/css">
hr {color:white; width:70%; height:15px; text-align:center;
border-top:5px brown groove}
body {margin:5px; padding:0px; font-size:1em}
button{backgrou nd:brown; color:white; border:2px yellow ridge;
font-size:8pt; width:135px; margin-left:10px;}
ul {padding-left:10px; border-left: 5px navy double;}
li {list-style:none; margin-left:20px; margin-bottom:4px; width:290px;
padding-bottom:3px;}
</style>
</head>
<body>
<h3>
Click the buttons in different sequences to change the width and text
setup of the div box below (within the navy dashed lines)</h3>
<ul>
<li><button onClick="textho lder.style.text Align='justify' ">Justify
Text</button>
<button
onClick="textho lder.style.text Align='left'">T ext-Align:left</button></li>
<li>
<button onClick="textho lder.style.widt h='85%'">Shrink Div Width to
85%</button>
<button onClick="textho lder.style.widt h='100%'">100% Div
Width</button></li>
<li>
<button
onClick="textho lder.style.over flow='scroll'"> OverFlow-Scroll</button>
<button onClick="textho lder.style.over flow='auto'">Ov erflow
Normal(auto)</button></li>
<li>
<button
onClick="textho lder.style.over flow='hidden'"> OverFlow-hidden</button>
<button onClick="textho lder.style.over flow='auto'">Ov erflow
Normal(auto)</button></li>
<li>
<button onClick="textho lder.style.heig ht='65px'">Shri nk Div Height to
25px</button>
<button onClick="textho lder.style.heig ht='180px'">Div height
180px</button></li>
<li>
<button onClick="textho lder.style.lett erSpacing='0.5e m'">Letter Spacing
Expanded</button>
<button onClick="textho lder.style.lett erSpacing='0em' ">Letter Spacing
Normal</button>
</li>
<li>
<button onClick="textho lder.style.word Spacing='0.5em' ">Word Spacing
Expanded</button>
<button onClick="textho lder.style.word Spacing='0em'"> Word Spacing
Normal</button>
</li></ul>
<h4>The style settings for textbox below: border:1px navy dashed;
position:absolu te; left:0px; top:310px; overflow:auto</h4>
<div id="textholder " style="border:1 px navy dashed; position:absolu te;
left:0px; top:310px; overflow:auto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam neque.
Duis cursus dapibus enim. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Sed lorem quam,
faucibus a, porta a, vestibulum ac, enim. In
imperdiet mauris. Vestibulum mollis convallis nibh. Sed erat libero,
vulputate sed, sagittis a, faucibus id, ipsum. Vestibulum ante elit,
convallis ut, convallis id, lobortis nec, magna. Suspendisse quis urna
quis est condimentum ultricies. Integer pellentesque libero eget
sapien. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. </div>
</body>
