Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by William J. Terrell
William J. Terrell
17,403 Points

Getting CSS to work for Internet Explorer

I have a page that will eventually be sent out as an email message. The HTML is below.

This displays fine in Firefox and Google Chrome, but Internet Explorer doesn't seem to be honoring the following CSS rules:

1.) For the footer's background image, it seems to be disregarding the "background-clip: content-box;" and "background-size: cover;" rules.

2.) In general, it also seems to be disregarding the styling that centers all of the main containers. The items inside the containers are centered, like the logo in the header, the social icons, and the main image, but the containers themselves seem to be left-aligned.

Would anyone know what I might need to do to get these items to display properly in Internet Explorer? I am on IE 11 myself, and everything I've come across online seems to suggest that it should support these rules...

Below is the HTML for the Page/Email. This contains the styling inside the head area. I've also added the CSS from the main stylesheet (email-template.css) below.

In addition to that, I noticed something a bit weird when looking at it using the Developer Tools. When I hit F12 on the Keyboard, and IE's Developer Tools opens up, I have this drop-down that seems to let me choose which version of IE I want to view the page in:

A screen-shot of this can be viewed here: https://drive.google.com/open?id=1iCrO6vNpmZWhxRYNBxGsdbRhmWgNKYNg

I have IE 11, but it shows 7 as being the default. Is this my "default view" that my version of IE is set to? Or is this just an emulator or something?

Thanks!

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="width=320, target-densitydpi=device-dpi" name="viewport">
    <link href="http://www.williamwoods.edu/email-template/email-template.css" rel="stylesheet" type="text/css">
    <title>Traditional Student Tech Guide</title>
    <style>
           .social-icon {
               display: inline-block;
           }
           .social-icon:active, .social-icon:focus, .social-icon:hover {
               filter:brightness(50%);
           }
           #footer {
               background-image:url(https://www.williamwoods.edu/current_students/helpdesk/images/tech-guide/footer-notext.jpg);
               background-position:center;
               background-clip:content-box;
               background-repeat:no-repeat;
               background-size:cover;
           }
            h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h6 {
               font-weight: normal;
               font-family: "Lato", Helvetica, Arial, san-serif;
               color: #5c6942;
            }                                          
    </style>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0" id="background-table" width="100%">
        <tbody>
            <tr>
                <td align="center" bgcolor="#ECECEC">
                    <table border="0" cellpadding="0" cellspacing="0" class="w640" style="margin:0 10px;" width="640">
                        <tbody>
                            <tr>
                                <td class="w640" height="20" width="640"></td>
                            </tr>
                            <tr>
                                <td class="w640" width="640"></td>
                            </tr><!--START OF THE TEXT HEADER-->
                            <tr>
                                <td align="center" class="w640" style="background-color:white;" width="640">
                                    <table>
                                        <tr>
                                            <td align="center" height="100" colspan="4" width="440">
                                                <a href="https://www.williamwoods.edu" target="_blank"><img alt="William Woods University Logo" height="auto" src="https://www.williamwoods.edu/current_students/helpdesk/images/tech-guide/wwu-logo.png" width="100%"></a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center">
                                                <a href="https://www.facebook.com/WilliamWoodsUniversity" target="_blank"><img alt="Visit WWU's Facebook Page" class="social-icon max-50" src="https://www.williamwoods.edu/current_students/helpdesk/images/tech-guide/facebook-icon.png"></a>
                                                &nbsp;
                                                <a href="https://www.youtube.com/user/WilliamWoodsUniv1870" target="_blank"><img alt="Visit WWU's YouTube Channel" class="social-icon max-50" src="https://www.williamwoods.edu/current_students/helpdesk/images/tech-guide/youtube-icon.png"></a>
                                                &nbsp;
                                                <a href="https://twitter.com/WilliamWoodsU" target="_blank"><img alt="Visit WWU's Twitter Feed" class="social-icon max-50" src="https://www.williamwoods.edu/current_students/helpdesk/images/tech-guide/twitter-icon.png"></a>
                                                &nbsp;
                                                <a href="https://www.instagram.com/WilliamWoodsU/" target="_blank"><img alt="Visit WWU's Instagram" class="social-icon max-50" src="https://www.williamwoods.edu/current_students/helpdesk/images/tech-guide/instagram-icon.png"></a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr><!--END OF THE TEXT HEADER-->
                            <tr>
                                <td class="w640" height="30" name="top-spacer" style="background-color: #fff;" width="640"></td>
                            </tr>
                            <tr>
                                <td class="w640" name="main-image" style="background-color: #fff;" width="640"><img alt="Student Technology Guide - Image depicts two smiling students working on a laptop computer." height="auto" src="https://www.williamwoods.edu/current_students/helpdesk/images/tech-guide/traditional-students-main-photo.jpg" width="100%"></td>
                            </tr>
                            <tr id="simple-content-row">
                                <td class="w640" style="background-color: #f5f0e7;" width="640">
                                    <table border="0" cellpadding="0" cellspacing="0" class="w640" width="640">
                                        <tbody>
                                            <tr>
                                                <td class="w30" width="30"></td>
                                                <td class="w580" width="580">
                                                    <table border="0" cellpadding="0" cellspacing="0" class="w580" width="580">
                                                        <tbody>
                                                            <tr>
                                                                <td class="w580" width="580">
                                                                    <div align="left" class="article-content">

                                                                    <!--

                                                                        The main content will go here,
                                                                        for security reasons, it has been
                                                                        removed for this example...

                                                                    -->

                                                                    </div>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td class="w580" height="10" width="580"></td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                                <td class="w30" width="30"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td class="w640" height="15" name="bottom-spacer" style="background-color: #f5f0e7;" width="640"></td>
                            </tr><!--START OF THE TEXT FOOTER-->
                            <tr>
                                <td class="w640" id="footer" width="640">
                                    <p class="center-text">University Information Technologies<br>
                                    Office Hours: 8 a.m. – 4:30 p.m. – Monday – Friday<br>
                                    Located on the corner of Ewing and 14th behind Dulany Library<br>
                                    24-hour phone line: 573.592.4244 Email: <a href="mailto:HelpDesk@WilliamWoods.edu">HelpDesk@WilliamWoods.edu</a></p>
                                </td>
                            </tr><!--END OF THE TEXT FOOTER-->
                            <tr>
                                <td class="w640" height="60" width="640"></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

/* email-template.css*/

/* Mobile-specific Styles */
@media only screen and (max-width: 660px) {
table[class=w0],td[class=w0] {
    width:0!important
}

table[class=w10],td[class=w10],img[class=w10] {
    width:10px!important
}

table[class=w15],td[class=w15],img[class=w15] {
    width:5px!important
}

table[class=w30],td[class=w30],img[class=w30] {
    width:10px!important
}

table[class=w60],td[class=w60],img[class=w60] {
    width:10px!important
}

table[class=w125],td[class=w125],img[class=w125] {
    width:80px!important
}

table[class=w130],td[class=w130],img[class=w130] {
    width:55px!important
}

table[class=w140],td[class=w140],img[class=w140] {
    width:90px!important
}

table[class=w160],td[class=w160],img[class=w160] {
    width:180px!important
}

table[class=w170],td[class=w170],img[class=w170] {
    width:100px!important
}

table[class=w180],td[class=w180],img[class=w180] {
    width:80px!important
}

table[class=w195],td[class=w195],img[class=w195] {
    width:80px!important
}

table[class=w220],td[class=w220],img[class=w220] {
    width:80px!important
}

table[class=w240],td[class=w240],img[class=w240] {
    width:180px!important
}

table[class=w255],td[class=w255],img[class=w255] {
    width:185px!important
}

table[class=w275],td[class=w275],img[class=w275] {
    width:135px!important
}

table[class=w280],td[class=w280],img[class=w280] {
    width:135px!important
}

table[class=w300],td[class=w300],img[class=w300] {
    width:140px!important
}

table[class=w325],td[class=w325],img[class=w325] {
    width:95px!important
}

table[class=w360],td[class=w360],img[class=w360] {
    width:140px!important
}

table[class=w410],td[class=w410],img[class=w410] {
    width:180px!important
}

table[class=w470],td[class=w470],img[class=w470] {
    width:200px!important
}

table[class=w580],td[class=w580],img[class=w580] {
    width:280px!important
}

table[class=w640],td[class=w640],img[class=w640] {
    width:300px!important
}

table[class*=hide],td[class*=hide],img[class*=hide],p[class*=hide],span[class*=hide] {
    display:none!important
}

table[class=h0],td[class=h0] {
    height:0!important
}

p[class=footer-content-left] {
    text-align:center!important
}

#headline p {
    font-size:30px!important
}

.article-content,#left-sidebar {
    -webkit-text-size-adjust:90%!important;
    -ms-text-size-adjust:90%!important
}

.header-content,.footer-content-left {
    -webkit-text-size-adjust:80%!important;
    -ms-text-size-adjust:80%!important
}

img {
    height:auto;
    line-height:100%
    outline:none;
    text-decoration:none;
    display:block
}
}

/* Client-specific Styles */
#outlook a {
    padding:0
}

/* Force Outlook to provide a "view in browser" button. */
body {
    width:100%!important
}

.ReadMsgBody {
    width:100%
}

.ExternalClass {
    width:100%;
    display:block!important
}

/* Force Hotmail to display emails at full width */
/* Reset Styles */
/* Add 100px so mobile switch bar doesn't cover street address. */
body {
    background-color:#ececec;
    margin:0;
    padding:0
}

img {
    outline:none;
    text-decoration:none;
    display:block
}

a img {
    border: none;
}

br,strong br,b br,em br,i br {
    line-height:100%
}

h1,h2,h3,h4,h5,h6 {
    line-height:100%!important;
    -webkit-font-smoothing:antialiased
}

h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
    color:#004631!important
}

h1 a:active,h2 a:active,h3 a:active,h4 a:active,h5 a:active,h6 a:active {
    color:#004631!important
}

/* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */
h1 a:visited,h2 a:visited,h3 a:visited,h4 a:visited,h5 a:visited,h6 a:visited {
    color:#004631!important
}

/* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
table td,table tr {
    border-collapse:collapse
}

.yshortcuts,.yshortcuts a,.yshortcuts a:link,.yshortcuts a:visited,.yshortcuts a:hover,.yshortcuts a span {
    color:#000;
    text-decoration:none!important;
    border-bottom:none!important;
    background:none!important
}

/* Body text color for the New Yahoo.  This example sets the font of Yahoo's Shortcuts to black. */
/* This most probably won't work in all email clients. Don't include code blocks in email. */
code {
    white-space:normal;
    word-break:break-all
}

#background-table {
    background-color:#ececec
}

/* Webkit Elements */
#top-bar {
    border-radius:6px 6px 0 0;
    -moz-border-radius:6px 6px 0 0;
    -webkit-border-radius:6px 6px 0 0;
    -webkit-font-smoothing:antialiased;
    background-color:#004631;
    color:#fff
}

#top-bar a {
    font-weight:700;
    color:#fff;
    text-decoration:none
}

#footer {
    border-radius:0 0 6px 6px;
    -moz-border-radius:0 0 6px 6px;
    -webkit-border-radius:0 0 6px 6px;
    -webkit-font-smoothing:antialiased
}

/* Fonts and Content */
body,td {
    font-family:"Lato",Helvetica,Arial,san-serif
}

.header-content,.footer-content-left,.footer-content-right {
    -webkit-text-size-adjust:none;
    -ms-text-size-adjust:none
}

/* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */
.header-content {
    font-size:12px;
    color:#fff
}

.header-content a {
    font-weight:700;
    color:#fff;
    text-decoration:none
}

#headline p {
    color:#fff;
    font-family:'Georgia',serif;
    font-size:36px;
    text-align:center;
    margin-top:0;
    margin-bottom:30px
}

#headline p a {
    color:#fff;
    text-decoration:none
}

.article-title {
    font-size:18px;
    line-height:24px;
    color:#5C6942;
    font-weight:700;
    margin-top:0;
    margin-bottom:18px;
    font-family:"Lato",Helvetica,Arial,san-serif
}

.article-title a {
    color:#7a2426;
    text-decoration:none
}

.article-title.with-meta {
    margin-bottom:0
}

.article-meta {
    font-size:13px;
    line-height:20px;
    color:#ccc;
    font-weight:700;
    margin-top:0
}

.article-content {
    font-size:13px;
    line-height:18px;
    color:#444;
    margin-top:0;
    margin-bottom:18px;
    font-family:"Lato",Helvetica,Arial,san-serif
}

.article-content a {
    color:#004631;
    font-weight:700;
    text-decoration:underline
}

.article-content img {
    max-width:100%
}

.article-content ol,.article-content ul {
    margin-top:2px;
    margin-bottom:24px;
    margin-left:30px;
    padding:0
}

.article-content li {
    font-size:13px;
    line-height:20px;
    color:#444
}

li ol li, li ul li {
    margin-left:10px;
}

.article-content li a {
    color:#004631;
    text-decoration:underline
}

.article-content p {
    margin-bottom:15px
}

.footer-content-left {
    font-size:12px;
    line-height:15px;
    color:#fff;
    margin-top:0;
    margin-bottom:15px
}

.footer-content-left a {
    color:#fff;
    font-weight:700;
    text-decoration:none
}

.footer-content-right {
    font-size:11px;
    line-height:16px;
    color:#fff;
    margin-top:0;
    margin-bottom:15px
}

.footer-content-right a {
    color:#fff;
    font-weight:700;
    text-decoration:none
}

#footer {
    background-color:#69813A; /* This is the correct color for the footer, and shows properly in browser on desktop, but on mobile, it is a navy blue */
    color:#fff
}

#footer a {
    color:#fff;
    text-decoration:none;
    font-weight:700
}

#permission-reminder {
    white-space:normal
}

#street-address {
    color:#fff!important;
    white-space:normal
}

#header {
    background-color:#69813A; !important
}

/* Styling for button-links */

a.btn {
    display: inline-block;
    padding: 0.75em;
    line-height: 1.2;
    font-weight: bold;
    background-color: #69813a;
    border: 0;
    border-radius: 0;
    margin: 0.5em 0 0.5em;
    color: #fff;
    text-decoration: none;
}

a.btn:hover {
    background-color: #3e4c22;
    border-color: #3e4c22;
    text-decoration: none;
}

    <!--[if gte mso 9]>
    <style _tmplitem="722" >
    .article-content ol, .article-content ul {
       margin: 0 0 0 24px;
       padding: 0;
       list-style-position: inside;
    }

    <![endif]-->

/* Special/Custom Styling: */

    /* Max-Width Classes for constraining image sizes */    

    img.max-50 {
         width: 100%;
         height: auto;
         max-width: 50;
    }   


.center-text {
     text-align: center;
}

 p.highlighted-paragraph, div.highlighted-paragraph {
     padding: 1.25em 1em;
     background: #f2f1c5;
     clear: both;
}

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

I don't use IE myself, but it could be that some of the features you are using are not implemented in IE. You could try looking up each of the ones that don't seem to be working in Can I Use?.

It may also be that some features are supported, but only if you use browser-specific property names (can be done in addition to the conventional ones).