Brands now aligning in IE

[motion2082]

Hey guys,

Can’t work out why my dropdown menu displays correctly in Chrome = https://ibb.co/gPjprWB

But for some strange reason it wont in Internet Explorer = https://ibb.co/56LFMgk

Website = http://www.planmate.com.au

SHOP BY BRAND is the Drop Down

Anyone know what’s in going on here?

[uxfed]

Floats are finniky. With your code I’m actually surprised you’re not getting the same problem in every browser.

There are a couple of ways you can fix this. The cheap and nasty way is to make each each column the same height.

The “right” way is to use flex instead of floats to lay out the columns, but that involves more work.

[Senff]

It appears that in Chrome it’s already using Flexbox, but in IE it is still using floats (fallback?).

Adding this might help:

.mega-menu-categories .mega-menu-item:nth-of-type(6), 
.mega-menu-brands .mega-menu-item:nth-of-type(6), 
.mega-menu-html .mega-menu-item:nth-of-type(6), 
#header .mega-menu .product-grid-item:nth-of-type(6) {
   clear: left;
}

In my IE, the site is not very responsive — I’m not sure if that’s due to my IE, or your site, so you might have to add some media queries in there.

[motion2082]

Hi Senff,

Looks like your suggestion has resolved the issue :)

Have not seen nth-of-type(6) before, is this new to CSS?

[uxfed]

No, but it’s very fragile. It’s basically saying go to the next line after the 6th element (you might not always want that). You’d be better off using flex.

[Author]

Posts