Flexbox and IE9

First of all, I know it doesn’t work.
I’m working on a site and using Flexbox for the menu. It works great in Firefox and Chrome. Testing in IE9 it fails of course.
Is there any way of doing conditions for IE in the CSS, like you can in html?
Or must I use <!--[if IE]> in my head and link another stylesheet to fix things?
Most things I have fixed by putting fallbacks before the thing that doesn’t work, but here setting the menu item width overrides the flex in all browsers.

I’d just do [if IE] and link to another stylesheet (after your main stylesheet defines flex). The benefit of this approach is that once you stop IE9 (and down) support, you can remove that reference / stylesheet in one fell swoop.

You could add a class (ie9) to the body element if IE (via CC) and keep the styles in your stylesheet if you want to keep it to one file…I’d have a separate stylesheet as mentioend above though.

I thought I could get away with using just a single line that did not justify a whole new sheet

<!--[if IE]>
            <style>
                #menu ul li {display: table-cell;}
            </style>
<![endif]-->

But it turns out that it fixes the big menu but screws up the mobile one, which also uses flex with a different setup, and amazingly worked perfectly in IE9 before I added the fix.
So I’m thinking I do need another stylesheet with that line and my media query (yes, I did it with just one this time :sunglasses: ) to set the small stuff up again.
Now, since the stuff in the query will be the same, should I not repeat and make that a third file?
I did not want to get into multiple stylesheets, is that a valid concern?

I have it now. No need for a third css file and the media query was not repetitive, it just reset #menu ul from table back to block and #menu ul li from table-cell to inline-block. Nothing too painful.

If you are using PHP includes or something then that works as well. Just some easy way to get rid of the extra IE9 styles when it’s time to get rid of it.

I’d make a 3rd file just for the hell of it but your way at least gets rid of an HTTP request at least.

I’m not using php at this stage, I’m just setting up the styling and menu system on the homepage. I will use php when I build the other pages. The usual includes for the header, menu and footer to save repetition. I use php in the menu to set a “current” id for the page, normally just to highlight it differently, but in this case I will hide the current page altogether in the mobile menu and have a close button instead.

No need for three, I was thinking the bit after the query would be a repeat, but no, that has already loaded, it just needs to reset the bits that did not get set when IE skipped the flex parts, it does not repeat at all. This is all I need for the IE stylesheet

#menu ul    {display: table;}
#menu ul li {display: table-cell;}
@media screen and (max-width: 650px) {
    #menu ul       {display: block;}
    #menu ul li     {display: inline-block;}
}

After being involved in that Mobile First discussion, I had a though about this, that it may work best in this case, put the table stuff in the query and swap max to min and remove 2 lines that reset to block, but it does not work.

Could we get a (non) working demo where it doesn’t work?

Here are the bare bones, omitted bits that are not relevant to the menu, but kept parent elements.
HTML

<body>
    <div id="mainframe">
        <header>
            <h1 id="logo">
                <img src="images/ogo.svg" alt="Logo" />
                <span>Logo Text</span>
            </h1>
        </header>             
        <nav id="menu">
            <a href="#menwrap" title="Open Menu" id="ham">
                <img class="icon" src="images/ham.svg" alt="Menu" />
            </a>
            <div  id="menwrap">
                <ul>
                    <li class="menit" id="home">
                        <a href="#" title="Home">
                            <img src="images/home.png" alt="Home" />
                            <span>Home</span>
                        </a>
                    </li>
                    <li class="menit" id="race">
                        <a href="#" title="Racing">
                            <img src="images/racing.png" alt="Racing" />
                            <span>Racing</span>
                        </a>
                    </li>
                    <li class="menit" id="leisure">
                        <a href="#" title="Racing">
                            <img src="images/leisure.png" alt="Leisure" />
                            <span>Leisure</span>
                        </a>
                    </li>
                    <li class="menit" id="work">
                        <a href="#" title="Utility Workboats">
                            <img src="images/work.png" alt="Utility Workboats" />
                            <span>Utility Workboats</span>
                        </a>
                    </li>
                    <li class="menit" id="cust">
                        <a href="#" title="Custom Builds">
                            <img src="images/custom.png" alt="Custom Builds" />
                            <span>Custom Builds</span>
                        </a>
                    </li>
                </ul>
                <a href="#" title="Close Menu" id="clomen">
                    <img class="icon" src="images/cross.svg" alt="Close Menu" />
                </a>
            </div>
        </nav>
        <p>Page Content</p>
    </div>
</body>

Main CSS

body    {
    background-color: #8af;
    background-image: url(../images/back1024.jpg);
    background-attachment: fixed ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    font-family: 'Trebuchet MS', sans-serif;
}
#mainframe  {
    width: 80%;
    max-width: 900px ;
    margin: 0 auto ;
    margin-top: 3em;
    margin-bottom: 3em;
    background: rgba(255,255,255,0.6);
    border-radius: 100px 30px 100px 20px;
    border-radius: 10vw 3vw 10vw 2vw ;
}
a, a:hover   {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
#menu   {
    background: #00d;
    padding: 0;
    padding-top: 1.5em;
    width: 100%;
    height: auto;
}
#menwrap    {
    padding: 2px;
}
#ham, #clomen  {
    display: none;
}
#menu ul    {
    display: table;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    left: 0;
    text-align: center;
}
#menu ul li {
    display: inline-block;
    flex-grow: 1;
    padding: 2px;    
}

#menu ul li a   {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
    font-style: italic;
    vertical-align: middle;
    padding: 0.2em 0 0.2em 0;
    color: #d00;
    background: #fff;
    background: linear-gradient(to top right, #8af, #fff 40%);
}
#menu ul li a:hover   {
    background: #d00;
    background: linear-gradient(to top right, #700, #d00 40%);
    color: #fff;
    border-color: #00d #fff #fff #00d ;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
#menu ul li a:active   {
    background: #00d;
    color: #fff;
    border-color: #fff #d00 #d00 #fff ;
}
#menu ul li a img   {
    display: none;
}
@media screen and (max-width: 650px) {
    #mainframe  {
        width: 95% ;
    }
    #menu{
        padding: 4px;
        width: auto;
    }
    #menwrap    {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
    }
    #menwrap:target {
        display: block;
    }
    #ham, #clomen   {
        display: block;
        width: 50px;
        height: 50px;
        background: #fff;
        border-radius: 5px;
    }
    #clomen {
        position: fixed;
        bottom: 0;
        right: 0;
    }
    #ham   {
        position: relative;
        top: 0;
        left: 0;
    }
        #ham img, #clomen img  {
        position: absolute;
        width: 70%;
        top: 15%;
        left: 15%;
    }
    #ham:hover, #clomen:hover   {
        background: #d00;
    }
    #ham:active, #clomen:active   {
        background: #00d;
    }
    #menu ul    {
        position: fixed;
        width: 100%;
        height: calc( 100% - 50px ) ;
        top: 0;
        left: 0;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: stretch;
    }
    #menu ul li{
        width: 41%;
        height: 41%;
        margin: 2%;
        background: none;
        padding: 0;
        overflow: hidden;
    }
    #menu ul li a   {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: rgba(255,255,255,0.9);
        background: linear-gradient(to top right, #acf, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.2));
        border: solid 4px;
        border-color: #00d #d00 #d00 #00d ;
        border-radius: 20% 0;
        font-size: 1.3em;
        font-size: 4.8vw;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
    }
    #menu ul li a:hover {
        background: linear-gradient(to top right, #700, rgba(220,0,0,0.9) 50%, rgba(255,0,0,0.2));
    }
    #menu ul li a img   {
        display: block;
        margin: auto;
        width: 70%;
        width: 30vmin;
    }
    #menu ul li a span   {
        position: absolute;
        width: 100%;
        bottom: 0.4em;
        left: 0;
    }
    #menu ul #home   {
        display: none;
    }
}

Note that #home is hidden at the end. That will be replaced by #current when I set up the php version.

Then the IE CSS

@media screen and (min-width: 650px) {
    #menu ul    {display: table;}
    #menu ul li  {display: table-cell;}
}

What happened was, the mobile menu items went wonky.
Though its not a big deal as I have it working nice with the desktop first version. Its only 2 lines of code afterall, I’ll bet you can find more than 2 redundant lines in just the code I put here!

One last request; I’m actually headed home right now which leaves me with only a Chromebook (aka I can’t just copy that code and boot up an IE9 to test.) Is there anyway to get this online somehow so I can load up Browserstack? If not, I’ll have to probably leave this to someone else :frowning: .

I’ll give you some slack since you and I have similar viewpoints on a lot of stuff :wink: .

No problem, its almost pub time here in England, so I will shortly be offline till tomorrow, no urgency.

I will have to host it in another site, I don’t have it online yet.

Just realised I missed off the reset at the start of the css which may break the layout if missing.

OK I have signed up to codepen so I can put this draft version on-line:

But this does not have the if IE bit of css. I was not sure how to do that with codepen, I’m new to it. Also not sure how you embed it in the post, I tried the iframe option, but it did not show in the preview.
At least you can see how its meant to work or try adding the IE bit yourself.
The mobile menu is basicly 4 big equal size boxes that fill the screen in 2x2 layout with a gap at the bottom for the close button. In the final version php will set the #current id to a pages’ own menu item so you only ever see 4 items in the mobile menu with close to go back to the current. The widescreen menu is just a standard horizontal 5 item bar. No js used, just css.
Another thought crossed my mind. Do even I need Flex for this?
Table and table-cell works for the widescreen menu. And I have the 4 box mobile menu working in IE9 (somehow). Maybe it would be easier to just drop flex in this case.

You can click the cog next to the html tag on top left and add it in the head but I tend to just add the IE code to the top of the html section (note you don’t need a body tag in codepen)

Just paste a plain codepen link into in the body of your post and discourse does the rest. I’ve edited your post to show the codepen.

For the IE styles you need something like this.

<!--[if IE]>
<style>
               
@media screen and (min-width: 650px) {
	#menu ul    {display: table;}
  #menu ul li  {display: table-cell;}
}
@media screen and (max-width: 649px) {
	#menu ul    {display:block;top:0;bottom:50px;}
  #menu ul li  {display:inline-block;}
}
</style>
<![endif]-->

Note that you don’t need calc when using fixed positoining to get 100% - 50px just define top and then bottom:50px and then no height is needed and you get support back to ie8.

I’ll try that next time.

I do already have it working with something very similar to that which is fine. Its just that when I tried to slim that down by using just the min-width query, it broke the mobile menu, Ryan asked for a non working demo.

Great, that will be better than using calc. I just wanted the 4 boxes to fill the screen, but leave room at the bottom for the close button.
What about the idea of not using flex for this? Since I have it working in IE9 without flex, maybe it would save me having to use an if IE css if I just make it work that way for everyone.

The difference with flex and the display:table-cell approach is that with flex you get an equal amount of padding at the sides of each item.

Display:table-cell on the other hand gives more padding to wider items so that long text gets more space at the side proportionately. Usually this makes for a more pleasing effect but some people don’t like it and want equal padding no matter the width of the text.

As flex seems to be the future then it may be worth sticking with it and just fixing ie with a conditional. In a couple of years (or less when edge takes off you can just remove the conditional and be done with it).

It’s really 6 of one and half a dozen of another. If you want full support back to ie8 then use display:table/cell and just have the one codebase. If you have already dropped ie8 and are waiting to drop ie9 then go with flex.

Flex allows you greater flexibility later on if you want to move columns around which is very difficult otherwise (or impossible in a lot of situations).

Just now I have tried another version without flex and to be honest, I can’t tell the difference, it must be quite subtle.
I think I will go with the non-flex version since it should be very widely supported, does not require conditional statements or an extra css file and as far as I can see, looks and behaves just like the flex version.
That’s not to say I will always avoid using flex, I like what it can do, that’s why I wanted to experiment with it. Its just here it seems unnecessary. I have thought of some other uses for it in enhancing my responsive layouts in other cases which I shall be experimenting with.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.