Comments on: Word-Spacing and Inline-Block Incompatibility in Webkit Browsers http://www.cssquirrel.com/2009/04/09/word-spacing-and-inline-block-incompatibility-in-webkit-browsers/ One nut's look at the world of web design Thu, 29 Jul 2010 13:29:57 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: supper http://www.cssquirrel.com/2009/04/09/word-spacing-and-inline-block-incompatibility-in-webkit-browsers/comment-page-1/#comment-31969 supper Mon, 07 Jun 2010 17:24:35 +0000 http://www.cssquirrel.com/?p=223#comment-31969 The word-spacing property didn't work at all for me, but the problem certainly was white-space handling. Anyway I managed to make my divs stick neatly into each other with this little trick: font-size: 0pt; letter-spacing: -1px; Works fine in Firefox 3.6.4, Chrome 4.1 and Opera 10.53! The word-spacing property didn’t work at all for me, but the problem certainly was white-space handling. Anyway I managed to make my divs stick neatly into each other with this little trick:

font-size: 0pt;
letter-spacing: -1px;

Works fine in Firefox 3.6.4, Chrome 4.1 and Opera 10.53!

]]> By: biziclop http://www.cssquirrel.com/2009/04/09/word-spacing-and-inline-block-incompatibility-in-webkit-browsers/comment-page-1/#comment-31471 biziclop Thu, 18 Feb 2010 21:10:37 +0000 http://www.cssquirrel.com/?p=223#comment-31471 Instead of applying word-spacing on the wrapper element, you can give margin-right:-0.4em to the list items. Unfortunately the size of the space character is very font-dependent … maybe there is some insane :before / :after trickery to solve this :) Instead of applying word-spacing on the wrapper element, you can give margin-right:-0.4em to the list items. Unfortunately the size of the space character is very font-dependent … maybe there is some insane :before / :after trickery to solve this :)

]]> By: djsnick http://www.cssquirrel.com/2009/04/09/word-spacing-and-inline-block-incompatibility-in-webkit-browsers/comment-page-1/#comment-27978 djsnick Fri, 09 Oct 2009 21:27:33 +0000 http://www.cssquirrel.com/?p=223#comment-27978 django has a kind of solution for this: template tag 'spaceless' http://docs.djangoproject.com/en/dev/ref/templates/builtins/#spaceless django has a kind of solution for this:
template tag ’spaceless’
http://docs.djangoproject.com/en/dev/ref/templates/builtins/#spaceless

]]> By: djsnick http://www.cssquirrel.com/2009/04/09/word-spacing-and-inline-block-incompatibility-in-webkit-browsers/comment-page-1/#comment-26991 djsnick Tue, 08 Sep 2009 15:40:44 +0000 http://www.cssquirrel.com/?p=223#comment-26991 @jay taylor: i like the idea of specific css for this; how about " white-space: none; " ? thanks for this posting. i've had the same problem, and haven't found a nice solution. what i ended up doing is commenting out, in html, the white space between the end of a div and the beginning of the next div. @jay taylor: i like the idea of specific css for this; how about ” white-space: none; ” ?

thanks for this posting. i’ve had the same problem, and haven’t found a nice solution. what i ended up doing is commenting out, in html, the white space between the end of a div and the beginning of the next div.

]]> By: Jay Taylor http://www.cssquirrel.com/2009/04/09/word-spacing-and-inline-block-incompatibility-in-webkit-browsers/comment-page-1/#comment-26795 Jay Taylor Fri, 21 Aug 2009 06:40:01 +0000 http://www.cssquirrel.com/?p=223#comment-26795 I agree, it shouldn't see a space outside of tags. Would be good to have browsers assume there's no space unless specified in css. Something like, p {display: white-space;}. Maybe some javascript could move elements next to each other. Or maybe have php includes for certain elements. Just thoughts off the top of my head so there's probably plenty of issues regarding these methods. It's like 'vertical align', something that sounds so simple can be such a nuisance to implement. I agree, it shouldn’t see a space outside of tags. Would be good to have browsers assume there’s no space unless specified in css. Something like, p {display: white-space;}.

Maybe some javascript could move elements next to each other. Or maybe have php includes for certain elements. Just thoughts off the top of my head so there’s probably plenty of issues regarding these methods. It’s like ‘vertical align’, something that sounds so simple can be such a nuisance to implement.

]]> By: Kyle Weems http://www.cssquirrel.com/2009/04/09/word-spacing-and-inline-block-incompatibility-in-webkit-browsers/comment-page-1/#comment-26792 Kyle Weems Thu, 20 Aug 2009 22:46:20 +0000 http://www.cssquirrel.com/?p=223#comment-26792 Jay, That does in fact work. The problem with this technique is attempting to rely upon a CMS/Framework/Client to remove those spaces when you're not personally able to hand-tool the code on every page. Also, from a personal standpoint, I shouldn't have to eliminate white space manually when CSS exists for that purpose. But thank you for providing this solution! Jay,

That does in fact work. The problem with this technique is attempting to rely upon a CMS/Framework/Client to remove those spaces when you’re not personally able to hand-tool the code on every page.

Also, from a personal standpoint, I shouldn’t have to eliminate white space manually when CSS exists for that purpose.

But thank you for providing this solution!

]]> By: Jay Taylor http://www.cssquirrel.com/2009/04/09/word-spacing-and-inline-block-incompatibility-in-webkit-browsers/comment-page-1/#comment-26789 Jay Taylor Thu, 20 Aug 2009 21:53:02 +0000 http://www.cssquirrel.com/?p=223#comment-26789 example should be (replace brackets with html tag arrows) (li class...)(/li)(li class...)(/li)(li etc etc example should be (replace brackets with html tag arrows)

(li class…)(/li)(li
class…)(/li)(li
etc
etc

]]> By: Jay Taylor http://www.cssquirrel.com/2009/04/09/word-spacing-and-inline-block-incompatibility-in-webkit-browsers/comment-page-1/#comment-26788 Jay Taylor Thu, 20 Aug 2009 21:49:53 +0000 http://www.cssquirrel.com/?p=223#comment-26788 hi guys, just come to this page cause I had the same problem. inline-block with gaps blah blah blah. I was thinking that the gap is like a space (would explain the '-word spacing' thing working in some browsers). What I did was to start the li straight after the previous closing li, essentially eliminating the 1 space you get within HTML when there's gaps. So far it's worked in both FF3 and IE8, can someone try it out in others to see what happens. Fingers crossed this works so life can become that little bit easier. e.g. <li class..... <li class.....<li class.... hi guys, just come to this page cause I had the same problem. inline-block with gaps blah blah blah.
I was thinking that the gap is like a space (would explain the ‘-word spacing’ thing working in some browsers). What I did was to start the li straight after the previous closing li, essentially eliminating the 1 space you get within HTML when there’s gaps. So far it’s worked in both FF3 and IE8, can someone try it out in others to see what happens. Fingers crossed this works so life can become that little bit easier.

e.g.

<li class….. <li
class…..<li
class….

]]> By: Kyle Weems http://www.cssquirrel.com/2009/04/09/word-spacing-and-inline-block-incompatibility-in-webkit-browsers/comment-page-1/#comment-25753 Kyle Weems Fri, 19 Jun 2009 14:51:46 +0000 http://www.cssquirrel.com/?p=223#comment-25753 @Pavel - I was considering the difficulty of re-inheriting the font-size with the font-size: 0 trick. So you use a letter-spacing/word-spacing hybrid approach? I'll have to test that one out! (I agree that those style-types are far easier to reset since they're rarely modified significantly). @Pavel – I was considering the difficulty of re-inheriting the font-size with the font-size: 0 trick. So you use a letter-spacing/word-spacing hybrid approach? I’ll have to test that one out! (I agree that those style-types are far easier to reset since they’re rarely modified significantly).

]]> By: Pavel Linhart http://www.cssquirrel.com/2009/04/09/word-spacing-and-inline-block-incompatibility-in-webkit-browsers/comment-page-1/#comment-25736 Pavel Linhart Fri, 19 Jun 2009 07:22:28 +0000 http://www.cssquirrel.com/?p=223#comment-25736 I had the same problem when using display: block for an unordered list: Setting letter-spacing to -1000px on the ul worked for IE6/IE7/IE8, FF2/FF3, Chrome, but not Opera 10 beta (possibly too in the stable branch). Setting word-spacing to -1000px works in Opera, but not webkit, so by combining these two approaches and setting them to "normal" on the li again worked for me for all browsers I tested it on. While font-size would do the trick as well I think, it's sometimes a bad thing to do - when you are depending on inheriting the font-size from the parent element(s). The same could be said about letter and word spacing, but how often do we change that? :) I had the same problem when using display: block for an unordered list:

Setting letter-spacing to -1000px on the ul worked for IE6/IE7/IE8, FF2/FF3, Chrome, but not Opera 10 beta (possibly too in the stable branch).
Setting word-spacing to -1000px works in Opera, but not webkit, so by combining these two approaches and setting them to “normal” on the li again worked for me for all browsers I tested it on.

While font-size would do the trick as well I think, it’s sometimes a bad thing to do – when you are depending on inheriting the font-size from the parent element(s). The same could be said about letter and word spacing, but how often do we change that? :)

]]>