<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Comments on: Cross-Browser Inline-Block</title>
	<atom:link href="http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/</link>
	<description>Engineering the web</description>
	<lastBuildDate>Fri, 17 May 2013 21:43:21 +0000</lastBuildDate>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.5.1</generator>
	<item>
		<title>By: supahank</title>
		<link>http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/comment-page-2/#comment-211085</link>
		<dc:creator>supahank</dc:creator>
		<pubDate>Tue, 20 Oct 2009 17:45:37 +0000</pubDate>
		<guid isPermaLink="false">http://blog.mozilla.org/webdev/?p=241#comment-211085</guid>
		<description><![CDATA[I put this method to use on a site that has several different grid layouts going on, and it works great except for one thing. I&#039;m hoping someone reading this can help. In one of the grid layouts, the first few li&#039;s have a background-color set, to indicate that they are &#039;active&#039;. The design calls for there to be *no* space between the li&#039;s, so that the background-color is seamless. But using this css method, there is a mystery 5px right margin on every li. I&#039;ve gotten rid of all css margins and padding on the li&#039;s, and it&#039;s still a complete enigma. Anybody else run into this? I&#039;m seeing this in FF 3.0 &amp; 3.5, IE8 (not 6 or 7), and Safari. So the &#039;inline-block&#039; tacks a phantom 5px margin on block-level elements. You can see my test here: http://www.lesliesommer.com/tests/grid.html]]></description>
		<content:encoded><![CDATA[<p>I put this method to use on a site that has several different grid layouts going on, and it works great except for one thing. I&#8217;m hoping someone reading this can help. In one of the grid layouts, the first few li&#8217;s have a background-color set, to indicate that they are &#8216;active&#8217;. The design calls for there to be *no* space between the li&#8217;s, so that the background-color is seamless. But using this css method, there is a mystery 5px right margin on every li. I&#8217;ve gotten rid of all css margins and padding on the li&#8217;s, and it&#8217;s still a complete enigma. Anybody else run into this? I&#8217;m seeing this in FF 3.0 &amp; 3.5, IE8 (not 6 or 7), and Safari. So the &#8216;inline-block&#8217; tacks a phantom 5px margin on block-level elements. You can see my test here: <a href="http://www.lesliesommer.com/tests/grid.html" rel="nofollow">http://www.lesliesommer.com/tests/grid.html</a></p>
]]></content:encoded>
	</item>
	<item>
		<title>By: vol7ron</title>
		<link>http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/comment-page-2/#comment-210286</link>
		<dc:creator>vol7ron</dc:creator>
		<pubDate>Tue, 29 Sep 2009 15:14:31 +0000</pubDate>
		<guid isPermaLink="false">http://blog.mozilla.org/webdev/?p=241#comment-210286</guid>
		<description><![CDATA[I haven&#039;t tested the zoom:1 yet, but there is another IE6 hack:

. {
   display: inline-block;  // FF+
}
. {
   *display: inline; // IE5.5+
}

It&#039;s basically the same thing, forcing a new instance of the class to be applied, but only for IE. -- note: replace . with your class, ID, or element (e.g. .active {}, div{}, #elementID {}]]></description>
		<content:encoded><![CDATA[<p>I haven&#8217;t tested the zoom:1 yet, but there is another IE6 hack:</p>
<p>. {<br />
   display: inline-block;  // FF+<br />
}<br />
. {<br />
   *display: inline; // IE5.5+<br />
}</p>
<p>It&#8217;s basically the same thing, forcing a new instance of the class to be applied, but only for IE. &#8212; note: replace . with your class, ID, or element (e.g. .active {}, div{}, #elementID {}</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: TableTopDancer</title>
		<link>http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/comment-page-2/#comment-208975</link>
		<dc:creator>TableTopDancer</dc:creator>
		<pubDate>Thu, 27 Aug 2009 15:28:44 +0000</pubDate>
		<guid isPermaLink="false">http://blog.mozilla.org/webdev/?p=241#comment-208975</guid>
		<description><![CDATA[Well this is a long *** thread. But I have an issure with this display inline-block. and need a good answer please.

layout is like this:

      
           &lt;!--- end of div 2 --&gt;
           &lt;!--- end of div 3--&gt;
      
 &lt;!--- end of div 0 --&gt;

How do I get divs 2 and 3 to line up next to each other. I don&#039;t want to use float or table. Tried everything to get it to work , got it once and then decided to tidy up the code and God knows what i deleted but the solution is evading me now.]]></description>
		<content:encoded><![CDATA[<p>Well this is a long *** thread. But I have an issure with this display inline-block. and need a good answer please.</p>
<p>layout is like this:</p>
<p>           <!--- end of div 2 --><br />
           <!--- end of div 3--></p>
<p> <!--- end of div 0 --></p>
<p>How do I get divs 2 and 3 to line up next to each other. I don&#8217;t want to use float or table. Tried everything to get it to work , got it once and then decided to tidy up the code and God knows what i deleted but the solution is evading me now.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Liam</title>
		<link>http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/comment-page-2/#comment-208037</link>
		<dc:creator>Liam</dc:creator>
		<pubDate>Wed, 12 Aug 2009 13:39:27 +0000</pubDate>
		<guid isPermaLink="false">http://blog.mozilla.org/webdev/?p=241#comment-208037</guid>
		<description><![CDATA[Those saying use a table because it&#039;s tabular data. Well, do any of you understand what tabular data is? It&#039;s not something that lines up in a grid, it&#039;s data, which is best displayed in a table. The type of data you&#039;d use a spreadsheet program to create and edit.]]></description>
		<content:encoded><![CDATA[<p>Those saying use a table because it&#8217;s tabular data. Well, do any of you understand what tabular data is? It&#8217;s not something that lines up in a grid, it&#8217;s data, which is best displayed in a table. The type of data you&#8217;d use a spreadsheet program to create and edit.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Sean Curtis</title>
		<link>http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/comment-page-2/#comment-207699</link>
		<dc:creator>Sean Curtis</dc:creator>
		<pubDate>Fri, 07 Aug 2009 01:52:39 +0000</pubDate>
		<guid isPermaLink="false">http://blog.mozilla.org/webdev/?p=241#comment-207699</guid>
		<description><![CDATA[Paolo is right - for all you idiots saying to use tables what do you say to your boss/client when they want a mobile version of the page created? Are you going to suggest a bit of user agent sniffing and redirect them to a page with only one image/caption per TR?

Using CSS and a list is the RIGHT way to do this. I don&#039;t agree with having the hacks in the main stylesheet, move them to a conditional stylesheets instead.]]></description>
		<content:encoded><![CDATA[<p>Paolo is right &#8211; for all you idiots saying to use tables what do you say to your boss/client when they want a mobile version of the page created? Are you going to suggest a bit of user agent sniffing and redirect them to a page with only one image/caption per TR?</p>
<p>Using CSS and a list is the RIGHT way to do this. I don&#8217;t agree with having the hacks in the main stylesheet, move them to a conditional stylesheets instead.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: paolo</title>
		<link>http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/comment-page-2/#comment-207620</link>
		<dc:creator>paolo</dc:creator>
		<pubDate>Thu, 06 Aug 2009 14:52:23 +0000</pubDate>
		<guid isPermaLink="false">http://blog.mozilla.org/webdev/?p=241#comment-207620</guid>
		<description><![CDATA[thinking &#039;square&#039; is just like seeing a straight road and design your car without a steering wheel. 

The fact is:
1) with db-driven data you have to deal with empty slots;
2) sooner or later you might need to make it more complex;
3) coding a table requires more markup and slows the downloading down;
4) mobile apps might not be rendering table markup the proper way;
5) never thought about people who need screen readers?  just try yourself and say: this is a list of images AND this is a table in which we have images in rows and images in columns.

However, I don&#039;t regret using fixing heights and widths, since non-consistent data entry might lead the interface to look quite bad.]]></description>
		<content:encoded><![CDATA[<p>thinking &#8216;square&#8217; is just like seeing a straight road and design your car without a steering wheel. </p>
<p>The fact is:<br />
1) with db-driven data you have to deal with empty slots;<br />
2) sooner or later you might need to make it more complex;<br />
3) coding a table requires more markup and slows the downloading down;<br />
4) mobile apps might not be rendering table markup the proper way;<br />
5) never thought about people who need screen readers?  just try yourself and say: this is a list of images AND this is a table in which we have images in rows and images in columns.</p>
<p>However, I don&#8217;t regret using fixing heights and widths, since non-consistent data entry might lead the interface to look quite bad.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Bradford Sherrill</title>
		<link>http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/comment-page-2/#comment-207493</link>
		<dc:creator>Bradford Sherrill</dc:creator>
		<pubDate>Tue, 04 Aug 2009 14:54:52 +0000</pubDate>
		<guid isPermaLink="false">http://blog.mozilla.org/webdev/?p=241#comment-207493</guid>
		<description><![CDATA[Great Post]]></description>
		<content:encoded><![CDATA[<p>Great Post</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Anders</title>
		<link>http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/comment-page-2/#comment-207485</link>
		<dc:creator>Anders</dc:creator>
		<pubDate>Tue, 04 Aug 2009 09:27:39 +0000</pubDate>
		<guid isPermaLink="false">http://blog.mozilla.org/webdev/?p=241#comment-207485</guid>
		<description><![CDATA[Is the haslayout trigger really necessary here? I&#039;m getting the exact same result by feeding only display: inline to IE 7 and below.]]></description>
		<content:encoded><![CDATA[<p>Is the haslayout trigger really necessary here? I&#8217;m getting the exact same result by feeding only display: inline to IE 7 and below.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: mike funk</title>
		<link>http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/comment-page-2/#comment-207479</link>
		<dc:creator>mike funk</dc:creator>
		<pubDate>Tue, 04 Aug 2009 05:47:39 +0000</pubDate>
		<guid isPermaLink="false">http://blog.mozilla.org/webdev/?p=241#comment-207479</guid>
		<description><![CDATA[uh this is ok and all, good to know, but you can easily do this by just wrapping every 4 items in a div, clearing the float with the wrapper, and floating each element left. of course that only works in a fixed width layout but most are fixed width nowadays anyway.]]></description>
		<content:encoded><![CDATA[<p>uh this is ok and all, good to know, but you can easily do this by just wrapping every 4 items in a div, clearing the float with the wrapper, and floating each element left. of course that only works in a fixed width layout but most are fixed width nowadays anyway.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Russ</title>
		<link>http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/comment-page-2/#comment-207435</link>
		<dc:creator>Russ</dc:creator>
		<pubDate>Mon, 03 Aug 2009 16:51:47 +0000</pubDate>
		<guid isPermaLink="false">http://blog.mozilla.org/webdev/?p=241#comment-207435</guid>
		<description><![CDATA[Tabular Data!!!
Tabular Data?!?
Tabular Data??????

What are you going on about, this is NOT tabular data.

Go and read more on tables and you &#039;may&#039; just learn a little more.

And in response to what the other amateur said - You go and run circles around me and make quick pages. I&#039;ll continue to make the great pages I make....and &quot;Oh Wait for it&quot; (as you monkeys say!) When it&#039;s time to update or add information to my page...I&#039;ll run circles around YOU!.

I like this... It&#039;s definitely a better solution to using tables for NON-TABULAR data...]]></description>
		<content:encoded><![CDATA[<p>Tabular Data!!!<br />
Tabular Data?!?<br />
Tabular Data??????</p>
<p>What are you going on about, this is NOT tabular data.</p>
<p>Go and read more on tables and you &#8216;may&#8217; just learn a little more.</p>
<p>And in response to what the other amateur said &#8211; You go and run circles around me and make quick pages. I&#8217;ll continue to make the great pages I make&#8230;.and &#8220;Oh Wait for it&#8221; (as you monkeys say!) When it&#8217;s time to update or add information to my page&#8230;I&#8217;ll run circles around YOU!.</p>
<p>I like this&#8230; It&#8217;s definitely a better solution to using tables for NON-TABULAR data&#8230;</p>
]]></content:encoded>
	</item>
</channel>
</rss>
