Comments on: Align List Items Horizontally with CSS …

By: CSS improvements in Firefox 3 - Part One » Broken Links

CSS improvements in Firefox 3 - Part One » Broken Links — Sat, 09 Feb 2008 00:30:43 +0000

[...] than trying to explain the benefits of this, here’s a real-world example: Align List Items Horizontally with CSS. inline-table behaves in a similar way, only with tables (obviously), making it slightly less [...]

By: Cory Duncan

Cory Duncan — Thu, 31 Jan 2008 03:25:19 +0000

This is seriously awesome work. Thank You. Can’t wait until Firefox releases 3.0 with support for display:inline-block.

By: Cory Duncna

Cory Duncna — Thu, 31 Jan 2008 03:24:22 +0000

This is seriously awesome work. Thank You. Can’t wait until Firefox releases 3.0 with support for display:inline-block.

By: Paul Collins

Paul Collins — Thu, 25 Oct 2007 11:52:44 +0000

Hello,

I found the display:-moz-inline-box; -moz-box-orient:vertical; seems to make my images expand to the full width of the , so they become stretched. Is there any way around this?

Cheers

By: Andy Stangeland

Andy Stangeland — Fri, 19 Oct 2007 13:46:54 +0000

I had the same problem, but since it was an internal application I just changed to minimum requirements to IE7 and FF3 Minefield.

However I had the same problem with not allowing whitespace. What I did was to shrink the text in the parent and reexpand on the child elements.

#parent { font-size: 1px; letter-spacing: -1px }
.child { font-size: medium; letter-spacing: normal; }

The problem is that IE7 ignores the spaces so the negative letter-spacing doesn’t move anything any closer together in IE7. But in FF3 it shrinks the space down to 1px and since there is a letter the letter spacing does move them closer and eliminate the gap.

The browser specific stylesheet that another commenter used for IE is also a good idea since conditional comments still validate. But this is a pure CSS solution that I feel is extremely clean.

By: j.verhine

j.verhine — Sun, 09 Sep 2007 22:16:32 +0000

you’ve saved my day with this hack - thanks.

By: diyism

diyism — Wed, 22 Aug 2007 06:20:34 +0000

For example:

lkjkdjsf

jack

aSame appearance in ie and firefox
bbbbb
ie and firefoxcccc

ie and firefox

By: diyism

diyism — Wed, 22 Aug 2007 06:18:33 +0000

{var b = document.createElement("span");
b.innerHTML = htmlspecialchars(a[i].nodeValue);
a[i].parentNode.replaceChild(b, a[i]);
}
}
}
}
}

By: diyism

diyism — Wed, 22 Aug 2007 05:44:31 +0000

if (all_span[j].getElementsByTagName(’span’).length>0
&& all_span[j].childNodes.length-all_span[j].getElementsByTagName(’span’).length>0
)
{var a=all_span[j].childNodes;
for (var i=0;i {if (a[i].nodeName==’#text’ && trim(a[i].nodeValue)!=”)

By: diyism

diyism — Wed, 22 Aug 2007 05:42:35 +0000

function ib_fix()
{var all_span=document.getElementsByTagName(’span’);
for (var j=0;j {if (all_span[j].parentNode.tagName!=’SPAN’ && all_span[j].getElementsByTagName(’span’).length==0
&& all_span[j].style.cssFloat!=’left’ && all_span[j].style.styleFloat!=’left’
)
{typeof(all_span[j].style.cssFloat)!=’undefined’ ? (all_span[j].style.cssFloat=’none’):(all_span[j].style.styleFloat=’none’);
}

By: diyism

diyism — Wed, 22 Aug 2007 05:41:34 +0000

function ib_fix()
{var all_span=document.getElementsByTagName(’span’);
for (var j=0;j

By: diyism

diyism — Wed, 22 Aug 2007 05:40:20 +0000

function htmlspecialchars(str)
{return str.replace(//g, “>”);
}
function trim(str)
{return str.replace(/(^[\r\n\t ]*|[\r\n\t ]*$)/g, ”);
}

By: diyism

diyism — Wed, 22 Aug 2007 05:39:38 +0000

if(window.addEventListener)
{window.addEventListener(’load’, ib_fix, false);
}
else
{window.attachEvent(’onload’, ib_fix);
}

By: diyism

diyism — Wed, 22 Aug 2007 05:38:35 +0000

A javascript fixing with the second solution:

By: diyism

diyism — Wed, 22 Aug 2007 05:04:59 +0000

In fact, i’m always looking for an inline-block layout solution.
Although “inline-block” is supported is firfox 3 beta,
but with most people using firefox 2,
what i can only do is to coin an alternative method.

First, this:
span{display:-moz-inline-box;display:inline-block;vertical-align:middle;overflow:visible;cursor:default;}

Recently, this:
span{float:left;vertical-align:middle;overflow:hidden;cursor:default;}br{clear:left;}

By: Matthias Willerich

Matthias Willerich — Tue, 21 Aug 2007 09:12:50 +0000

I just had a look at your solution and at diyism’s, and I couldn’t control the width of things as well as overflowing content in his version, even when applied to child containers.

Other than that I’m really torn about using your solution. On one hand it does work for me (with more complex content, I have a div-wrapped image, an h3 and a p in the li), on the other hand I feel it lacks stability. I tested it in a more recent nightly build of Webkit and it worked, but will it work in Firefox 3?
I’m also not fond of the comments to prevent whitespace, but figured that all browsers I tested do display the whitespace in equal width, well, all except IE. As I have a tiny IE-only css anyway (using conditional comments), this does not pose a problem, and it loosens the restrictions a little. Finally, thanks for sharing your solution, it did help me a lot.

By: diyism

diyism — Tue, 14 Aug 2007 09:12:13 +0000

Your solution is too complex, look at this:

span{display:-moz-inline-box;display:inline-block;vertical-align:middle;overflow:visible;cursor:default;}

aSame appearance in ie and firefox
ie and firefox
ie and firefox

By: Best of May/June 2007 at Design Resources

Best of May/June 2007 at Design Resources — Fri, 27 Jul 2007 12:16:05 +0000

[...] Align List Items Horizontally with CSS If you ever wanted to display a list of items horizontally with a wrap around once the right margin of your page has been reached, you came across a float:left solution. And if you ever tried to line up items with different heights this way, you know how messy things can get. This article delivers an easy solution of this problem. [...]

By: links for 2007-07-25 | David’s kitchen

links for 2007-07-25 | David’s kitchen — Wed, 25 Jul 2007 11:22:02 +0000

[...] display: inline-block cross browser A nifty way of aligning list items horizontally (tags: css inline list align) [...]

By: Best of May/June 2007 · Style Grind

Best of May/June 2007 · Style Grind — Thu, 12 Jul 2007 03:42:59 +0000