Welcome to WebmasterWorld Guest from 54.204.74.171

Forum Moderators: not2easy

Message Too Old, No Replies

Word Spacing Not Functioning

   
3:33 pm on May 19, 2011 (gmt 0)

5+ Year Member



I try to implement the following with no joy:

#horizontal {
width: 800px;
height: 24px;
text-indent:30px;
padding-top:6px;
color: #FFFFFF;
background: #FEAD1D url(images/horizontal.jpg) no-repeat;
word-spacing:44px;
}


Is this the correct command?

word-spacing:44px;?

Thanks a lot
3:57 pm on May 19, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



It should work, but wouldn't it be better visually to express it in ems?

Caution: Browsers are not required to recognize word-spacing. The w3c folks [w3.org] say
Conforming user agents may consider the value of the 'word-spacing' property to be 'normal'.

That means you're allowed to ignore it even if you're not MSIE.

This minimalist version works on all five browsers on my Mac (Mozilla family, Apple Web Kit family, Opera):
<html>
<head>
<style type = "text/css">
.emstretch {word-spacing: 1em;}
.pixstretch {word-spacing: 24px;}
</style>
</head>
<body>
<p>Normal text.</p>
<p class = "emstretch">Stretched-out text in ems.</p>
<p class = "pixstretch">Stretched-out text in pixels.</p>
</body>
</html>

When something doesn't work, the first step is always to strip it down to one command at a time and see where it breaks.
4:18 pm on May 19, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi Lucy, good advice, but you've linked to css2. I think what you wanted was css2.1 [w3.org], which has qualfied that statement.

@philipjterry Yes, you have that correct. Can you be a little more specific about "no joy" :) For example, is there no change to the spacing between word at all? The posted code looks fine, but don't forget to Validate [jigsaw.w3.org] in case an error is affecting this, and check the element isn't inheriting a value from another rule.