• FIXED: nivo slider transition problem

    FIXED: nivo slider transition problem

    A long time ago, I was asked if it was possible to put the nivo shortcode into a sidebar widget. I said yes, and developed an example on this site – in the header. Since then I’ve had problems where the transitions weren’t displaying correctly. In June 2013 I tried applying a fix to set max-width to none on .nivoSlider img. Just recently, I noticed the problem on a slider being displayed in a text widget in a child theme I was creating. And today I finally tracked down the problem.

    Problem

    As demonstrated in a screen capture in H2GD Part 18: nivo slider started misbehaving, a small image appears in the top left corner of the slider. In the new theme this small image varied in size. I noticed it also varied depending on the transition being performed.

    I was able to trim the HTML down to demonstrate that it was the fact that the slider was embedded in a div with a class of “textwidget” that caused the problem to appear. Then I looked at the CSS.

    Explanation

    oik.css included the following

    div.textwidget img { max-width: 100%; }
     

    The nivo slider CSS in nivo-slider-32.css was setting the margins on images in divs with a class of “nivo-slice” or “nivo-box” to 0, but it was not setting max-width to none. I have now corrected this, in both the oik-nivo-slider AND oik base plugin, using the following CSS

    div.nivo-slice img, div.nivo-box img { margin: 0px; max-width: none; }
     

    Hopefully, this slider should appear correctly.

    [nivo id=940,941]

    Note: It’s in a div of class “textwidget w80pc”

    See also


    ,

    Published:

    Last updated:

    August 18, 2014

Categories

Tide times from tidetimes.org.uk

Tide Times & Heights for Langstone Harbour on
6th July 2022
04:49 High Tide ( 4.37m )
10:08 Low Tide ( 1.42m )
17:24 High Tide ( 4.51m )
22:39 Low Tide ( 1.63m )

Tide times from tidetimes.org.uk

Tide Times & Heights for Northney on
6th July 2022
05:02 High Tide ( 3.93m )
10:19 Low Tide ( 1.2m )
17:41 High Tide ( 4.05m )
22:49 Low Tide ( 1.46m )
WordPress version:6.0
Gutenberg version:13.4.0

[clone]

[cloned]