Support » Plugin: Easing Slider » Border width pushes slider to right

  • Resolved harrywp



    I have a bit of a problem with this nice slider.

    I use the slider in my header. The images used are 944 x 492 px.
    When i look at it on a normal browser on my pc it looks great with the 16 extra pixels but when viewed on an ipad or iphone the border pushes the slider 16 pixels to the right. On a browser it does not really bother me.

    You can say, ok this is logical since you add 16 pixels around it and then it pushes your slider to the side.

    Can i make a a couple of suggestions about this option ?

    – Now the border goes outside, make it so you can let it go inside. That way the size will be same without replacing the slider position.

    – Make it responsive by dynamically shorten the slider image in proportions.

    I tried to use the padding options even with negative values but that did not work.

    Now i have to manually fix it by putting a white border pointing inside 16 px. But when adding more images i need to manualy edit the images…

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author MatthewRuddy


    This is a box sizing issue. Different browsers can sometimes render the border as an extensions of the width, and other can render the border in conjunction to the width.

    So for example, if you had a 16 pixel border some browsers will render it as 944px + 16px = 960px. Other may render it as 928px + 16px = 944px.

    You can manually set the box-sizing option thanks to CSS3, but older browsers obviously won’t support this. My advice would be to design for newer, modern browsers first and provide a usable example for older browsers, albeit one that may not look ‘perfect’ but still fully functions (unless you want to spend a long time catering perfectly for both!).

    Hope this helps. There is massive work going on behind the scenes to completely overhaul the plugin (coming hopefully before Christmas), so hopefully this can be looked into.

    Thanks for the update.
    I understand your point but what about the option of having an inside border ? Now you can only have an outside border. Why not include an inside border option. Then this issue would be ‘fixed’ because the image position does not shift.

    I have another question and hopefully you know what might causing this problem. I have your easing slider just underneath my menu. When i have sub menu’s, the menu does not show the links where it overlays with easing slider.

    Once i use a text widget in my header advanced option i do have the collapsed sub menu’s but now i can not click on the easing slider images. So or my menu works but no image link or my menu only shows the links until it reaches the slider and i can click on the image in the slider..

    Is this a jquery problem ? Does WP use jquery for the menu ?
    Do i need to do something with z-index:3 ?

    I really want to have both things working but it seems like i am missing something.

    Maybe you know what might causing this ?

    Thanks for your input.

    Plugin Author MatthewRuddy


    I’m not sure how you could add an ‘inside’ border. This CSS property doesn’t exist. To achieve it would start becoming confusing quickly for the novice user (I personally believe). Instead, I’d recommend users factor in their desired slideshow dimensions before applying the border. A lot of users used to working CSS would be aware of this, as it is standard for the border to add to the width/height. Changing it might start causing confusion.

    Make sure your theme isn’t applying any box-sizing CSS properties. This may be the cause of the different dimensions being rendered on mobile devices.

    As for the drop-down menus, you’ll need to apply a z-index to them to make sure they drop over the slideshow. Try applying a rather high z-index, something like this:

    z-index: 10000 !important;

    That should do the trick. Unlikely that anything has a z-index above 10000! Make sure you also apply it to the menu’s <li> elements, and inner links. For some of the older browsers this is required (or may not be, depending on the particular situation).

    Thanks MatthewRuddy for the information.
    I was searching for the z-index call inside css code of your slider. But your answer made me look at the menu css. With firebug installed i noticed that z-index was set on 100. When set on 1000 the menu worked flawless. So great.

    About the inside border i guess this happens to be a bit more of a technical issue or maybe i was not clear with my question.

    Say you go into your settings menu and there you have a checker box where you can choose :

    borderwidth outside/inside. When inside is checked, the border goes inside instead of outside. Just like what you can do in photoshop for example. But if this call is not even possible within css then i guess the answer is simple.

    Thanks again for the support, appreciate it.

    Plugin Author MatthewRuddy


    Hmm, I guess that is a possibility. I’ll have a look into it for you!

    Everything else resolved? Hope you’ve figured everything out now 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Border width pushes slider to right’ is closed to new replies.