Grow your CSS skills. Land your dream job.

[Solved] Step Down Problem in IE6/7

  • # December 2, 2009 at 6:12 am

    Hi All,

    I’m having a wierd problem in IE 6 and 7. Did all the tweaking I could think of and spent hours on it. Can’t seem to figure it out.
    The problem is a layout issue in my pagation link set which I have implemented as an unordered List.

    The links for the pages should appear in one row. Except in IE7 and IE6, it appears like a bunch of steps. It works fine on IE8, Chrome, Firefox and others.

    The live page is here http://www.susnanotec.lk/cms2/knowledge … -seminars/

    The screen shot on how it should be is here:
    [img]http://img44.imageshack.us/img44/926/linksgood.png[/img]

    This is how it appears on IE7 and IE 6:
    [img]http://img689.imageshack.us/img689/8018/linksmessed.png[/img]

    Any help on solving this is much appreciated.

    Thanks,
    Deane

    Rob
    # December 2, 2009 at 7:28 am

    I would try defining the width of the li’s within the UL for the boxes. IE doesn’t like trying to guess how big stuff is, I would also add the margin to the LI and not to the A.

    # December 2, 2009 at 9:35 am

    This is one of the typical IE-issues that is referred to as the "staircase" or "stepdown" problem.

    You fix it by setting the LI’s to display inline:

    Code:
    li.optionalClass { display: inline; } /* IE-FIX : Prevents “stepdown”
    : Thanks to http://css-tricks.com/prevent-menu-stepdown/ */


    TeMc

    # December 2, 2009 at 10:51 pm

    Thanks a lot guys. TeMAC’s solution worked like a charm. :D

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".