Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Word Spacing Not Functioning

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

Junior Member

5+ Year Member

joined:Feb 14, 2010
posts: 178
votes: 0

I try to implement the following with no joy:

#horizontal {
width: 800px;
height: 24px;
color: #FFFFFF;
background: #FEAD1D url(images/horizontal.jpg) no-repeat;

Is this the correct command?


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

Senior Member from US 

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

joined:Apr 9, 2011
votes: 244

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):
<style type = "text/css">
.emstretch {word-spacing: 1em;}
.pixstretch {word-spacing: 24px;}
<p>Normal text.</p>
<p class = "emstretch">Stretched-out text in ems.</p>
<p class = "pixstretch">Stretched-out text in pixels.</p>

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)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 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.