2 Replies - 1736 Views - Last Post: 23 November 2010 - 11:10 PM

#1 Guest_Eric Richardson*


Reputation:

Older IE browser compatibility help

Posted 23 November 2010 - 12:58 PM

I have a page that is going to get emailed out, and it works fine on chrome, FF, IE8, etc, but IE7 it collapses the first column of cells, making text appear over the image. Any quick way to fix this? I've tried a whole lot of things to try and get it to show right, but no luck so far. Kind of a tight schedule for an internship gig. Thanks in advance for any help you can offer. Code is below.
http://pastebin.com/GNmBCiax

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CellPhones for Soldiers</title>
<style type="text/css">
html {
    overflow-y: hidden;
}
.titleBlocks {
	font-size: 24px;
	color: #6C0;
	font-weight: bolder;
	line-height: 23px;
	font-family: Verdana, Geneva, sans-serif;
}
.bigtext {
	line-height: 23px;
	font-size: 16px;
	font-family:Verdana, Geneva, sans-serif;
}
.littletext {
	font-family:Verdana, Geneva, sans-serif;
	font-size:9px
	
}
.reallylittletext {
	font-family:Verdana, Geneva, sans-serif;
	font-size:7px
}
a:link {color:#000; text-decoration:none;}

body {
    overflow-y: hidden;
}

</style>
</head>

<body class="body">
<a href="http://www.att.com/gov/4soldier"><div>
<table background="http://eric-richardson.com/wp-content/uploads/2010/11/att_cell_phones_for_soldiers_blast.jpg" width="830" height="970" style="clear:left;">
<tr>
	<td height="8"><div style="height:300px;"></div></td>
    <td height="8"><div style="height:300px;"></div></td>
    <td rowspan="3" valign="top">
        <div class = "littletext" style="margin-top:120px; width:190px; float:right;margin-right: 20px;">on qualified AT&T monthly wireless plans. Just for federal government employees, including DoD employees and active duty, reserve and retired U.S. military personnel.</div>
      <div class="bigtext" style="margin-top:230px;  width:340px; " >Help our soldiers feel closer to home. Purchase the new Samsung Evergreen device from AT&T and Samsung Mobile will donate $1 up to $100,000 to Cell Phones for Soldiers. This non-profit organization recycles old cell phones and purchases prepaid calling cards for our soldiers serving overseas.</div>
        <div class="littletext"><br />Don't forget - you can always donate your used cell phone. Drop off and recycle your used device at any participating AT&T store and we will donate the device to Cell Phones for Soldiers.</div><br />
       <div> <div class="titleBlocks" style="color:#000; font-size:12px;"><strong>AT&T gives you:</strong></div>
   	  <div style="margin-top:-15px; margin-left:-25px;"><ul class="littletext" >
            	<li>The nations fastest mobile broadband network</li>
                <li>Talk and surf the Web at the same time</li>
                <li>Devices exclusive to AT&T</li>
                <li>Thousands of apps</li>
                <li>Rollover<sup>&reg;</sup> minutes</li>
                <li>Exclusive discount just for federal government employees!</li>
           </ul></div>
     </div>
     <div class="titleBlocks" style="font-size:12px;">
     	Go Green, Save Green
     </div>
     <div style="font-family:Verdana, Geneva, sans-serif;">Visit <a href="http://www.att.com/gov/4soldier" style="color:#00C; text-decoration:underline;" style="color:#00C; text-decoration:underline;">att.com/gov/4soldier</a><br />Find us at <a href="http://facebook.com/attgov" style="color:#00C; text-decoration:underline;" target="_blank">facebook.com/attgov</a><br />Follow us at <a href="http://www.twitter.com/attgov" style="color:#00C; text-decoration:underline;"  target="_blank">twitter.com/attgov</a></div></td>
</tr>
<tr>
  <td width="270px" height="375"></td>
<td width="190px" valign="top">
<div style="margin-right:10px;"> 
        <div style="margin-top:0px;"><div class="titleBlocks" style="float:right; width:170px;">Samsung<BR /> Evergreen<sup style="font-size:12px">TM</sup></div>
        
        <div style="float:right;margin-left:-25px; width:190px; font-family:Verdana, Geneva, sans-serif;font-size:9px"><ul class="littletext" ><li>Environmentally Friendly Phone and Packaging<br /><br /></li><li>Slide-Out Full QWERTY Keyboard for Messaging<br /><br /></li><li>Social Networking Integration<br /><br /></li><li>Multimedia and Entertainment Apps<br /><br /></li><li>Multiple Messaging Options<br /><br /></li><li>Streaming TV and Video with MobiVJ<sup>&reg;</sup> and MobiTV<sup>&reg;</sup><br /><br /></li></ul> </div></div>
</div>
</td>
<td></td></tr>
<tr>
	<td></td>
    <td colspan="2" valign="top"><div style="width:540px; float:right;"><div class="titleBlocks" style="font-size:12px;">Serve Our Troops</div>
    <div class="littletext">
    AT&T users can text CP4S to 704 to donate $5.00 to Cell Phones for Soldiers. Your donation will be automatically added to your monthly bill. Please spread the word!
    <br /><br />For more information on Cell Phones for Soldeirs, please visit <a href="http://www.cellphonesforsoldiers.com"  style="color:#00C; text-decoration:underline;" target="_blank">www.cellphonesforsoldiers.com</a>
    <br /><br />
    For more inforation on AT&T's sustainability efforts, please visit <a href="http://www.att.com/sustainability" target="_blank" style="color:#00C; text-decoration:underline;">www.att.com/sustainability</a>
    <br /><br />
    For more information on Samsung's recycling initaivies, please visit <a href="http://www.samsung.com/green" target='_blank' style="color:#00C; text-decoration:underline;">www.samsung.com/green</a></div></div></td>
    <td></td>
</tr>
<tr>
<td colspan="3" height="90px" valign="top"><div class="reallylittletext"><strong>IMPORTANT INFORMATION:</strong> Limited-Time offer. requires a 2 year agreement on a qualified plan. Credit approval required. Geographic, usage and other conditions and restrictions (that may result in service termination) apply. Taxes and other charges apply. Prices and equipment vary by market and may not be available from independent retailers. See store or visit att.com for details and coverage map. <strong>EarlyTermination Fee(ETF)</strong>: None if cancelled during the first 30 days, but up to $35 restocking fee may apply to equipment returns; thereafter ETF up to $150 or $325 applies depending on device(details at att.com/equipmentetf). Agents may impose additional fees. Subject to change. <strong>Regulatory Cost Recovery Charge:</strong> up to $1.25/mo is charged t help defray costs of complying with government obligations and charges on AT&T and is not a tax or government required charge. <strong>Monthly Discount:</strong> Available to qualified employees of companies and/or government agencies with a qualified business agreement("Business Agreement"). Must provide requisite proof of government employment. Eligibility for offer ceases when you are no longer a qualified government employee or retiree. Service discount may be interrupted and/or discontinued without notice to you. Service discount applies only to monthly service charge  of qualified plans and not to any other charges. A minimumnumber of employees: minimum monthly service charge for qualified plans, additional AT&T services or other requirements may apply for discount eligibility. Discounts may not be combined. Offer subject to change at any time.<br /><br />
&copy; AT&T Intellectual property. All rights reserved. AT&T, the AT&T logo and all other AT&T marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies.
</div>

</td>

</tr>


</table></div></a>
</body>
</html>



Is This A Good Question/Topic? 0

Replies To: Older IE browser compatibility help

#2 drhowarddrfine  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: Older IE browser compatibility help

Posted 23 November 2010 - 07:33 PM

Quick note: IE6 does not work like IE7 which doesn't work like IE8 which won't work like IE9 and none of them work the same in compatibility mode and none of them work like any modern, standards compliant browser (Firefox, Safari, Chrome, Opera, etc.).

This post has been edited by drhowarddrfine: 23 November 2010 - 07:33 PM

Was This Post Helpful? 0
  • +
  • -

#3 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1377
  • View blog
  • Posts: 3,501
  • Joined: 28-November 09

Re: Older IE browser compatibility help

Posted 23 November 2010 - 11:10 PM

Really the problem is (and its a miracle it works properly in any browser) that the code is inefficient, bloated, and needs some substantial work. Tables are long dead for design purposes, divs aren't meant to be used every 1-2 lines of code, line spacing is a CSS property, and all styling should be done (if possible) in an external sheet (if not, internal in the header) and NEVER inline in a tag.

It really has nothing to do with the browser as much as having basic compliance and good coding practices. It's just that some browsers are better at guessing what you mean than others (IE just curls up, dies, and doesn't even bother.)
Was This Post Helpful? 2
  • +
  • -

Page 1 of 1