CODEWITHSUNDEEP
cssinternet-explorer
user122222
user122222

Reputation: 2419

After adding @media not print in css styles they're not working in IE11

I had a class 

.content {
    margin-left: 110px;
    -ms-flex-positive: 1;
    flex-grow: 1;
    flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-basis: 0;
    position: relative;
    width: 50%;
}

Which was working fine across all browsers. But after changing it to 

@media not print {
.content {
    margin-left: 110px;
    -ms-flex-positive: 1;
    flex-grow: 1;
    flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-basis: 0;
    position: relative;
    width: 50%;
}}


<div class"wrapper"> 
<div class"navigation"> </div>
<div class"content"> </div>
</div>

it doesn't work on IE. Shouldn't @media work in IE?

Upvotes: 0

Views: 242

Answers (3)

Deepak-MSFT
Deepak-MSFT

Reputation: 11335

You did not put '=' while assigning the class name.

enter image description here

It should be like below.

<div class="wrapper"> This is wrapper
<div class="navigation"> This is navigation</div>
<div class="content">This is content </div>

I tested the code with Windows 10 , IE 11 version and it is working as expected.

Try to correct your code and let us know about the results.

Upvotes: 0

Saravana
Saravana

Reputation: 3496

In @media print, add display: none !important; for your .content it will work for all browsers.

* {
    box-sizing: border-box;
    position: relative;
}

.content {
    margin-left: 110px;
    -ms-flex-positive: 1;
    flex-grow: 1;
    flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-basis: 0;
    position: relative;
    width: 50%;
}

@media print {
    .content,
    .content * {
        display: none !important;
    }
}
<div class="wrapper">
    <div class="navigation"> </div>
    <div class="content">In @media print, add display: none !important; it will work.</div>
</div>

Upvotes: 1

Mobarak Ali
Mobarak Ali

Reputation: 760

enter image description here

It's Working fine! I'm Using Windows 10 and ie11. I found no difference between your codes, maybe that puzzled you! for clearity, I added some extra code, background: red;. @media not print{} showing the background but the print screen is not. So it's working!

.content {
            margin-left: 110px;
            -ms-flex-positive: 1;
            flex-grow: 1;
            flex-shrink: 1;
            -ms-flex-negative: 1;
            flex-basis: 0;
            position: relative;
            width: 50%;
        }

        @media not print {
            .content {
                margin-left: 110px;
                -ms-flex-positive: 1;
                flex-grow: 1;
                flex-shrink: 1;
                -ms-flex-negative: 1;
                flex-basis: 0;
                position: relative;
                width: 50%;
                background: red; /*added for testing the code*/
            }
        }
    <div class="content">
        <h1>Hello!</h1>
    </div>

Upvotes: 1

Related Questions