Firefox & IE issue

  • webteam305

    (@webteam305)


    12 years, 2 months ago

    I’m using your plugin for multiple sites. I use the same settings for the slideshow that I use on all the home pages, but the issue seems to only happen on some of them.

    I’m using the Responsive theme by CyberChimps and putting the slideshow in their home page override template called front-page.php

    The only site that is live right now is parentsautocare.com

    In Safari and Chrome operation seems to be as expected, but in IE 11 (on PC) and Firefox 27.0.1 (on Mac) when you adjust the browser window size thinner the slideshow ends up overlapping outside the content area. Then, while the browser window is still thin, if you refresh in Firefox, the slideshow shrinks so small you can hardly see it. If you refresh in IE the slideshow shrinks to fit to the appropriate size.

    Why don’t Firefox and IE adjust appropriately until you refresh and why does the slideshow shrink too much when you refresh in Firefox?

    https://wordpress.org/plugins/slideshow-jquery-image-gallery/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Stefan Boonstra

    (@stefanboonstra)

    12 years, 2 months ago

    When looking at the page source, I see that the slideshow is wrapped in paragraph tags. This isn’t allowed in HTML and can sometimes cause some weirdly aligned elements. Removing the paragraph tags from around the slideshow may solve the problem.

    The slideshow calculates its width by looking at how wide its parent element is. If the slideshow is too small after refreshing the page, it means that its parent element isn’t wide enough when the page is loaded.

    Thread Starter webteam305

    (@webteam305)

    12 years, 2 months ago

    The Responsive front-page template automatically adds <p> tags around content if no other <h> tags or anything else is used.

    I don’t want to have to build a child theme to fix the issue. I’m trying to do as much as I can “out-of-the-box” to keep overall project times down. Do you have any other thoughts or suggestions that would work?

    Plugin Author Stefan Boonstra

    (@stefanboonstra)

    12 years, 2 months ago

    I would then recommend to add a CSS media query to the slideshow’s custom stylesheet that sets the slideshow’s width to the content’s width. You can read about creating custom stylesheets here.

    To be able to override the slideshow’s calculated width, the CSS values need to be suffixed with “!important”:

    width: [amountOfPixels]px !important;
    Thread Starter webteam305

    (@webteam305)

    12 years, 2 months ago

    OK. I was already using a custom stylesheet to center the slideshow. So, now I added the width and !important and it seems to have taken care of the overlapping issue:

    .slideshow_container { width: 100% !important; margin: 0 auto; }

    However, it still shrinks too small in Firefox when you refresh. I was thinking the % width would fix the issue without having to use a media query. Do you think I still need the media query to address the Firefox refresh issue?

    Plugin Author Stefan Boonstra

    (@stefanboonstra)

    12 years, 2 months ago

    Setting the slideshow’s width to 100% means that it will be as big as its parent element, which in some way it already does. The element the slideshow is contained by has a width of 48 pixels when loading the site in a slim window in Firefox. This means it will be exactly as wide as the its parent element: 48 pixels.

    Thread Starter webteam305

    (@webteam305)

    12 years, 2 months ago

    Understood. But how do you know the containing element is 48px when loading in a slim window?

    Also, what would the @media look like?

    Plugin Author Stefan Boonstra

    (@stefanboonstra)

    12 years, 2 months ago

    When using the code inspector in Firefox (press F12 on Windows and cmd + shift + i on Mac), I see that the slideshow’s width is 48 pixels when loading in a slim window. The slideshow has taken on the width of its parent element here.

    You’ll have to play around with the media queries a bit to see what works.

    Thread Starter webteam305

    (@webteam305)

    12 years, 2 months ago

    OK. Thanks. And thanks for the quick responses, not every plugin author can manage your level of technical support, but it is greatly appreciated.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Firefox & IE issue’ is closed to new replies.