[Solved] Step Down Problem in IE6/7

[deane034]

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

[TeMc]

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 https://css-tricks.com/prevent-menu-stepdown/ */

—
TeMc

[deane034]

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

[Author]

Posts