On 2/24/11 10:08 AM, Chetan Crasta wrote:
On Thu, Feb 24, 2011 at 10:24 PM, Debbie Campbell
<d...@redkitecreative.com> wrote:
My inline list at the bottom of this page displays vertically in
IE7:
http://www.redkitecreative.com/projects/paramaya/1.html
What's the best way to fix this (or another recommended method for
a simple pipe list)?
--
The problem is IE7's implementation of display:inline-block is
buggy. Therefore, remove the inline-block from ul.navlist li and try
either display:inline or float:left.
~Chetan
Looks like you have your answers and already applied the fix. But for
future reference, you may like to know that older IE will in effect
apply inline-block behavior to inline elements. In the case of all block
elements, including list items-- after your rule that declares the
element { display: inline-block; } add a separate rule that declares it
{ *display: inline; }. (No need for this second rule if the element is
already an inline one.)
Be sure to hide that from IE 8 and other browsers. I use the "star-hack"
here, but you may prefer other methods[1].
Explanation of sorts:
The effect is actually a "feature" of IE's "hasLayout" property[2]. The
inline-block adds this magic property, but the "display: inline;" adds
the magic that mimics true inline-block. If this sounds confusing, it's
because it *is* confusing... :\
[1]
<http://www.webdesignerwall.com/tutorials/css-specific-for-internet-explorer/>
[2] <http://www.satzansatz.de/cssd/onhavinglayout.html>
--
Cordially,
David
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
