Warning: Cannot modify header information - headers already sent by (output started at /home/cssquirrel/www.cssquirrel.com/blog/index.php:4) in /home/cssquirrel/www.cssquirrel.com/blog/wp-includes/feed-rss2-comments.php on line 8
Comments on: Using Inline-Block and Word-Spacing to Make Columns Easier http://cssquirrel.com/blog/2009/03/23/using-inline-block-and-word-spacing-to-make-columns-easier/ opinions and news on web design Mon, 12 Dec 2011 18:22:38 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Nicolas http://cssquirrel.com/blog/2009/03/23/using-inline-block-and-word-spacing-to-make-columns-easier/comment-page-1/#comment-31976 Nicolas Sun, 13 Jun 2010 15:28:44 +0000 http://www.cssquirrel.com/?p=194#comment-31976 @Senderista "font-size:0", that's simply genius. I was pondering about that white-space problem with inline-block for a while and didn't come up with a satisfying answer until I read your comment. Now seeing that solution, it is so simple, how couldn't I ever thought about it. I really have no problem with restoring the font-size to the child elements, it's simple as "font-size:12px" for example, as I usually work in pixels. One more trick to add in my CSS magician's pocket ! Thank you ! @Senderista
“font-size:0″, that’s simply genius. I was pondering about that white-space problem with inline-block for a while and didn’t come up with a satisfying answer until I read your comment. Now seeing that solution, it is so simple, how couldn’t I ever thought about it. I really have no problem with restoring the font-size to the child elements, it’s simple as “font-size:12px” for example, as I usually work in pixels. One more trick to add in my CSS magician’s pocket ! Thank you !

]]> By: senderista http://cssquirrel.com/blog/2009/03/23/using-inline-block-and-word-spacing-to-make-columns-easier/comment-page-1/#comment-31359 senderista Fri, 15 Jan 2010 01:03:22 +0000 http://www.cssquirrel.com/?p=194#comment-31359 This does not work since you cannot know what the default word- or letter-spacing is. I tried rendering 3 blocks of fixed size in Safari and Chrome as inline-block list items, first with no whitespace between the tags, and then with your technique (I tried both word- and letter-spacing). The combined width of the blocks in the second case was several pixels less than in the first case. I think the only approaches which work are to either eliminate all whitespace between tags, or to declare "font-size: 0" (which is very difficult in practice since it requires you to know what the current font size is so you can restore it in the child). This does not work since you cannot know what the default word- or letter-spacing is. I tried rendering 3 blocks of fixed size in Safari and Chrome as inline-block list items, first with no whitespace between the tags, and then with your technique (I tried both word- and letter-spacing). The combined width of the blocks in the second case was several pixels less than in the first case. I think the only approaches which work are to either eliminate all whitespace between tags, or to declare “font-size: 0″ (which is very difficult in practice since it requires you to know what the current font size is so you can restore it in the child).

]]> By: Kim http://cssquirrel.com/blog/2009/03/23/using-inline-block-and-word-spacing-to-make-columns-easier/comment-page-1/#comment-31189 Kim Thu, 03 Dec 2009 16:43:10 +0000 http://www.cssquirrel.com/?p=194#comment-31189 I got this to work in safari by using the same method but 'letter-spacing:-1em' instead of word spacing. I got this to work in safari by using the same method but ‘letter-spacing:-1em’ instead of word spacing.

]]> By: Kyle Weems http://cssquirrel.com/blog/2009/03/23/using-inline-block-and-word-spacing-to-make-columns-easier/comment-page-1/#comment-28241 Kyle Weems Fri, 16 Oct 2009 18:23:48 +0000 http://www.cssquirrel.com/?p=194#comment-28241 @Alex - You're absolutely right. It doesn't work in those. I figured that out after this post, and address the issue here: http://www.cssquirrel.com/2009/04/09/word-spacing-and-inline-block-incompatibility-in-webkit-browsers/. In the comments a reader came up with a fairly good solution, so feel free to check that out. Thanks for the compliment regarding the parallax! @Alex – You’re absolutely right. It doesn’t work in those. I figured that out after this post, and address the issue here: http://www.cssquirrel.com/2009/04/09/word-spacing-and-inline-block-incompatibility-in-webkit-browsers/. In the comments a reader came up with a fairly good solution, so feel free to check that out.

Thanks for the compliment regarding the parallax!

]]> By: Alex http://cssquirrel.com/blog/2009/03/23/using-inline-block-and-word-spacing-to-make-columns-easier/comment-page-1/#comment-28240 Alex Fri, 16 Oct 2009 16:24:36 +0000 http://www.cssquirrel.com/?p=194#comment-28240 Stumbled on this page 'cuz a buddy linked it to show the cool dhtml parallax effect you did in your header. Very nice! Regarding the inline-block discussion though, your example page doesn't look quite right in Chrome and Safari 3 (for Windows). The 3rd and 4th examples are retaining their 1 em word-spacing for some reason. Just thought you should know. Stumbled on this page ‘cuz a buddy linked it to show the cool dhtml parallax effect you did in your header. Very nice!

Regarding the inline-block discussion though, your example page doesn’t look quite right in Chrome and Safari 3 (for Windows). The 3rd and 4th examples are retaining their 1 em word-spacing for some reason. Just thought you should know.

]]>