Word Spacing Not Functioning

Forum Moderators: not2easy

Message Too Old, No Replies

Word Spacing Not Functioning

philipjterry

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

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

lucy24

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

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.

alt131

4:18 pm on May 19, 2011 (gmt 0)

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.