inline-block is well supported but widely misunderstood. Even IE6 supports it and it is much cleaner than using float that breaks the document flow. jQuery should support this but so far I haven't been able to find anything. I might make a patch to 1.3.1 (unfortunately there is a regression in 1.3.2 that I haven't had time to investigate)...
Article about inline-block: http://www.search-this.com/2008/08/28/ On Fri, Oct 24, 2008 at 6:00 PM, ricardobeat <ricardob...@gmail.com> wrote: > > The inline-block property is not yet well-supported cross-browser. > > Use display:block, float:left, you'll get the same results (and spot > some flaws in your layout too). > > In case someone is reading this: I suppose all animations in jQuery > give the elements a display:block property? Is inline-block support > coming in 1.3? > > - ricardo > > On Oct 23, 9:18 pm, bulgarian388 <bulgarian...@gmail.com> wrote: > > Hi guys, I'm new to jQuery and I need some help. I have a UL with LIs. > > In each LI there is a DIV with a bunch of content. The LIs are set to > > display inline. > > > > Anyway, when I run the animate function, the LIs get shifted into > > their default display (a list) and when the animation completes, the > > LIs return to their inline display. It's driving me crazy trying to > > figure it out, and I could definitely use some help. Here is the > > entire code: > > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " > http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > > <html xmlns="http://www.w3.org/1999/xhtml";> > > <head> > > <script type="text/javascript" src="jQuery.js"></script> > > <script type="text/javascript"> > > var container; > > var lis; > > var axes = []; > > > > $(function () { > > container = $('#Container'); > > lis = $('li', container); > > axes = getAxes(); > > > > }); > > > > var getAxes = function (container) { > > var axes = []; > > > > for (var i = 0; i < 600; (i = i + 100)) { > > var axis = { > > width: 100, > > left: i, > > right: (500 - i) > > }; > > > > axes.push(axis); > > }; > > > > return (axes); > > > > }; > > > > var Animate = function () { > > var h = document.getElementById('height'); > > var w = document.getElementById('width'); > > > > for (var i = 0; i < lis.length; i++) { > > $(lis[i]).animate({ > > height: h.value + 'px', > > width: w.value + 'px' > > }, 1000); > > };}; > > > > </script> > > <style type="text/css"> > > * { > > margin: 0; > > outline: none; > > padding: 0; > > text-decoration: none; > > > > } > > > > body { > > margin: 64px; > > margin-left: auto; > > margin-right: auto; > > width: 600px; > > > > } > > > > #Container { > > border: 3px solid #0000FF; > > height: 180px; > > overflow: hidden; > > position: relative; > > > > } > > > > #Container ul { > > overflow: hidden; > > margin: 6px; > > position: absolute; > > white-space: nowrap; > > > > } > > > > #Container ul li { > > border: 3px solid #FF0000; > > display: inline-block; > > height: 160px; > > vertical-align: top; > > width: 146px; > > > > } > > > > #Container ul li div { > > overflow: hidden; > > padding: 6px; > > > > } > > > > #Control { > > list-style: none; > > padding: 32px;} > > > > </style> > > </head> > > > > <body> > > <div id="Container"> > > <ul> > > <li > > ><div > > ><h1>Package 1</h1 > > ><hr / > > ><dl > > ><dd>Website A</dd > > ></dl > > ><a href="#">Continue</a > > ></div > > ></li > > ><li > > ><div > > ><h1>Package 2</h1 > > ><hr / > > ><dl > > ><dd>Website A</dd > > ><dd>Website B</dd > > ></dl > > ><a href="#">Continue</a > > ></div > > ></li > > ><li > > ><div > > ><h1>Package 3</h1 > > ><hr / > > ><dl > > ><dd>Website B</dd > > ><dd>Website C</dd > > ></dl > > ><a href="#">Continue</a > > ></div > > ></li > > ><li > > ><div > > ><h1>Package 4</h1 > > ><hr / > > ><dl > > ><dd>Website A</dd > > ><dd>Website C</dd > > ></dl > > ><a href="#">Continue</a > > ></div > > ></li > > ><li > > ><div > > ><h1>Package 5</h1 > > ><hr / > > ><dl > > ><dd>Website A</dd > > ><dd>Website B</dd > > ><dd>Website C</dd > > ></dl > > ><a href="#">Continue</a > > ></div > > ></li> > > </ul> > > </div> > > <ul id="Control"> > > <li> > > <input type="text" id="height" /> > > <input type="text" id="width" /> > > <input type="button" onclick="Animate();" value="Go" /> > > </li> > > </ul> > > </body> > > </html> >
