Question

Clearly I must be missing something.

I am trying to get the content in the masthead to go from two to one column in mobile. It works fine everywhere except IE 7.5 mobile. Clearly display:block isn't doing what it should.

How do I get IE 7.5 to work responsively?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/da-partnerbroadcast.dwt" codeOutsideHTMLIsLocked="false" --><head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Access Windows and Web Apps from a Chromebook</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
    @import url(http://fonts.googleapis.com/css?family=Varela+Round);
    @media screen and (min-device-width:320px) and (max-device-width:760px) {

        table[id=wrapper] { 
            width:100% !important;
        }

        td[class=items] {
            width:94% !important;
            display:block;
            clear:both;
            padding-top:10px;
        }

        td[class=hide], br[class=hide] {
            display:none;
        }

        table[id=masthead] {
            font-size:16px !important;
        }

        img[class=resize] {
            max-width:100% !important;
            width:100%;
        }
    }
</style>

<!--[if gt IE 8]>    
    <style type="text/css">
    table#wrapper { 
            background-color:green !important;
            width:100% !important;
        }

        td[class=items] {
            width:94% !important;
            display:block;
            clear:both;
            padding-top:10px;
        }

        td[class=hide], br[class=hide] {
            display:none;
        }

        table[id=masthead] {
            font-size:16px !important;
        }

        img[class=resize] {
            max-width:100% !important;
            width:100%;
        }
    </style>
    <![endif]--> 
<!-- InstanceEndEditable -->
</head>
<body>

<!-- InstanceBeginEditable name="OUTER" -->
<table id="outerwrapper" width="98%" border="0" cellspacing="0" cellpadding="0" align="center" style="background-color:#e6e6e6;">
<!-- InstanceEndEditable -->

  <tr>
    <td>

<table id="wrapper" width="598" cellspacing="0" cellpadding="0" align="center">
<!--DA HEADER-->
  <tr>
    <td>
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
          <td class="items" align="center" valign="top" style="padding-right:10px;">
          <a href="http://www.districtadministration.com" target="_blank"><img src="http://www3.districtadministration.com/mailing/logos/dalogo_new.png" alt="District Administration" width="250" height="54" hspace="0" vspace="0" border="0" /></a></td>
          <td class="items" style="font-family:Helvetica, Arial, sans-serif; font-size:11px; -webkit-text-size-adjust:none; color:#999999;padding:10px;">
          You are receiving this email as part of a free information service from <em>District Administration</em> Magazine.
          </td>
        </tr>
      </table>
    </td>
  </tr>


<!--PARTNER CONTENT-->
<!-- InstanceBeginEditable name="Partner Content" -->
  <tr>
    <td style="border:1px solid #cccccc;background-color:#ffffff;">

        <table id="partner" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td style="background-color:#56c9e8;">
                    <table id="masthead" cellpadding="0" cellspacing="0" width="100%" bgcolor="#56c9e8">
                        <tr>
                            <td class="items" style="text-align:center;padding-left:10px;">
                            <font face="'varela round', helvetica, arial, sans-serif">
                            <strong style="color:#ffffff;font-size:24px;line-height:30px;">Access Windows and Web Apps from a Chromebook</strong>
                            </font>
                            </td>

                            <td class="items" style="width:320px;text-align:center;">
                            <img class="resize" src="http://www3.districtadministration.com/mailing/partner/stoneware/2013/images/1008-mast.jpg" alt="" /></td>
                        </tr>
                    </table>
                </td>
            </tr>

            <tr>
                <td style="text-align:left;padding:30px;line-height:20px;">
                <font face="'varela round', helvetica, arial, sans-serif" size="2" color="#666666">
                Chromebooks are quickly gaining popularity in schools because of their web capabilities and cost effective price points.  However, there are some issues associated with a Chromebook rollout.  For example, if you have legacy Windows applications, you are forced to either abandon them or use different hardware to gain access to them.  Additionally, Chromebooks do not support Java based web applications, limiting their effectiveness as an educational tool.
                <br /><br />
                There is also the issue of integrating Chromebooks into your existing infrastructure.  How do you manage them easily with all the other machines you are managing?
                <br /><br />
                Stoneware products are a cost effective way to integrate Chromebooks into your existing IT environment.  Our products webRDP and <a style="color:#00689c;" href="http://www.stone-ware.com/webnetwork" target="_blank">webNetwork</a> give you the ability to access legacy Windows applications, Java based web applications, as well as HTML5 web apps. <br /><br />
                For a quick summary <a style="color:#00689c;" href="http://stone-ware.com/webnetwork/education-video" target="_new">watch our three-minute webNetwork video</a>. </font>
                </td>
            </tr>

            <tr>
                <td style="text-align:center;"><a href="http://stone-ware.com/webnetwork/education-video" target="_new"><img src="http://www3.districtadministration.com/mailing/partner/stoneware/2013/images/btn_video.png" alt="[button] Watch the Video" width="200" height="45" border="0" /></a>
                <br /><br />
                <a href="http://www.stone-ware.com/webnetwork" target="_blank"><img src="http://www3.districtadministration.com/mailing/partner/stoneware/2013/images/stoneware.png" alt="[logo] Stoneware" width="300" height="100" border="0" /></a></td>
            </tr>
        </table>

    </td>
  </tr>
<!-- InstanceEndEditable -->
<!--END PARTNER CONTENT-->

<!--DA FOOTER-->
  <tr>
    <td>
      <table id="dafooter" width="100%" align="center">
        <tr>
          <td><table width="100%" align="center" cellpadding="0" cellspacing="0" style="margin-top:4px;">
              <tr>
                <td align="center" style="font-family:Helvetica, Arial, sans-serif;font-size:10px;color:#999999;padding-top:10px;text-align:left;">
                This message was mailed to [EMAIL] as part of a free information service from <em>District Administration</em>. <a target="_blank" href='http://www.districtadministration.com' style="color:#999999;"><em>District Administration</em></a> is the award-winning magazine for district superintendents and other top K-12 education executives. To make sure you receive your <em>District Administration</em> emails, add partneremail&zwnj;@dapartner&zwnj;.net to your address book.
                <br /><br />
                To unsubscribe from these informational messages, please <a style="color:#999999;" href='[UNSUBURL]'>click here</a>. <a style="color:#999999;" href="http://districtadministration.com/managesubs/[CUID]">Manage Your Subscriptions</a>. <a target="_blank" href="http://www.districtadministration.com/page/privacy-policy" style="color:#999999;">View our Privacy Policy</a>.
                <br /><br />
                Published by: <a target="_blank" href='http://www.districtadministration.com/' style="color:#999999;"><em>District Administration</em></a>, 488&zwnj; Main Ave., Norwalk, CT, 06851<br />
                [COPYRIGHT]
                </td>
              </tr>
          </table></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

    </td>
  </tr>
</table>
</body><!-- InstanceEnd --></html>
Was it helpful?

Solution

If you apply a float to the table cells you're breaking. It should make it flow into one column.

td[class=items] {
   width:94% !important;
   display:block;
   float:left;
   clear:both;
   padding-top:10px;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top