Upgrade breaks slider alignment in Firefox

Fixed it! I edited slider.css and changed the .promo_slider class as follows (original CSS is commented out on first line; new CSS follows on next line).


/* .promo_slider { height:235px; overflow:hidden; position:relative; } */
.promo_slider { height:235px; overflow:hidden; position:relative; clear:left; }


Works OK now in Firefox, IE, and Chrome.

@jnasevich,

Great! I came up with an alternate solution since it was your mega menu CSS that seemed to be throwing things off:

#page #megaMenu { float: none; overflow: hidden; }

Actually, my original change didn’t quite fix everything. When slider changes to next promotion, menu drop-down is below slider. So I also needed to set z-index less than menu’s z-index (100 in my case). So modified CSS in slider.css would be


.promo_slider { height:235px; overflow:hidden; position:relative; clear:left; z-index:5}


Micah, I will test your alternate solution as well and let you know if that works.

Micah,

Your alternate solution fixes that alignment issue, but like my original change to .promo_slider, it doesn’t address how the Promotion Slider obscures the menu pull downs. To be fair, I hadn’t provided my megamenu CSS (I am using UberMenu 2 as my WordPress Mega Menu plugin).


#megaMenu {
position:relative;
line-height:1em;
overflow:visible;
zoom:1;
display:block;
float:left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index:100;
}


Note that overflow:visible; is what allows submenu items to be displayed. Also note that megamenu z-index is set to 100.

So I’m sticking with my change to promotion-slider/css/slider.css:

.promo_slider { height:235px; overflow:hidden; position:relative; clear:left; z-index:5}

Cheers, and thanks for a great plugin!

@jnasevich,

Glad you found a fix… whatever works. As a side note, overflow: hidden; is just one way of clearing floats. I wasn’t thinking too hard when I suggested it, but yes, it would prevent the dropdowns from appearing. A better solution would probably be to apply a clearfix to the #megaMenu div and to simply not float the element. The z-index assigned to the menu should probably be bumped up to 101 so the menus show in front of the slider. I should probably tone down the z-index on the slider as well.

I intend to do a better job about updating the Promotion Slider plugin more often, which means that future updates to the plugin will cause you to lose your CSS changes if you edit the actual plugin files. As a best practice, you don’t want to apply custom css to plugins or themes that might need to be updated. Sure, you can re-apply the changes, but who wants to have to remember which plugins can / can’t be updated without requiring additional work?

It isn’t uncommon to recommend that CSS changes be made within the theme, but you still run into the same issues if you have to update your theme. Instead, using a plugin like this makes a lot of sense: https://www.ads-software.com/extend/plugins/pc-custom-css/

Actually, since I’m using Thesis theme, PC Custom CSS plugin isn’t necessary. I made my changes in Thesis theme’s custom.css file instead. Changes made there survive updates to theme and plugins.

Thanks for tip though. I will use it in other themes.

It still breaks down the exerpt on the slider when Megamenu is used. Can that be fixed somehow?

@rtna,

This issue has been marked as resolved and was very specific to the CSS on Joe’s site. It sounds like your issue is completely different. Can you please create a new thread? Thanks!