?
Solved

IE vs. Firefox spacing issue

Posted on 2009-04-28
2
Medium Priority
?
699 Views
Last Modified: 2013-12-08
I have persistent trouble getting the list on the left hand side of the document to align properly so that the small "unsubscribe" paragraph lays on the black part of the template instead of the red; I can get it either correct in Firefox or IE but not both...  It appears that the <br> tags do not show up on Firefox but they do show up in IE.

I am not an HTML expert have pretty much taught myself, but any suggestions you may have would be greatly appreciated, as I am under deadline!
<!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=iso-8859-1"><title>RAP-POS Newsletter</title></head><body>
 
<table style="width: 612px; height: 785px;" background="http://www.rap-pos.com/NewslBkgrdLongRed.jpg" bgcolor="#524741" height="981" width="612">
  <tbody><tr>
    <td style="height: 99px;" height="99" valign="top" width="180">
      <div height="100px" style="padding: 5px; z-index: 1; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="center">
        <em> Want to make sure our emails hit your Inbox?<br>
        Add</em> <a href="mailto:RAP@email.admail.net" style="color: rgb(255, 255, 102);">RAP@email.admail.net</a> 
        <em>to your address book.</em><br>
        Click <a href="http://www.admail.net/manage/memberprefs.php?accountid=2206&amp;group=18" target="_blank" style="color: rgb(255, 255, 102);">here</a> to update your email preferences.      </div>    </td>
    <td rowspan="4" valign="top">
      <div style="z-index: 1; padding-top: 10px; padding-left: 15px; height: 70px; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="left">
        <img src="http://www.rap-pos.com/march06/AlohaBrownbkgrd.jpg" style="float: left; padding-right: 5px;" alt="Aloha"><br>
        <h1 style="margin: 10px 0pt; padding: 0pt; font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: rgb(255, 255, 255);">
          WWW.RAP-POS.COM<br>
          <em>March 09 eNewsletter</em>        </h1>
      </div>
      
      <div style="border-top: medium solid rgb(0, 0, 0); padding: 5px; z-index: 1; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="left">
        <img src="http://www.rap-pos.com/march06/images/ObamaLogoSM.jpg" alt="Image: Logo" style="border:thin; border-color:#000000; margin-right: 5px; margin-bottom: 5px; margin-top: 5px; float: left ;" width="72" height="72"/>
        <h2 style="margin: 5px 0pt; padding: 0pt; font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: rgb(255, 204, 102);"><em>How the Obama Administration is Changing the Way Restaurants Do Business!!</em></h2>
        <strong><a href="http://www.rap-pos.com/march06/SeparationAgrAB.pdf" target="_blank" style="color: rgb(255, 255, 102);">Click Here</a> for a Special Article from <a href="http://www.foxrothschild.com/Attorneys/Attorney.aspx?id=1114" target="_blank" style="color: rgb(255, 255, 102);">Anne Ciesla Bancroft</a> on How New Legislature can affect your hiring/firing procedures and liability! </strong><br /><br />
      </div>
        
        <div style="border-top: medium solid rgb(0, 0, 0); padding: 10px; z-index: 1; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="left">
        <img src="http://www.rap-pos.com/march06/images/lightbulbMINIaloha2.jpg" style="margin-right: 10px; float: right; border:thin; border-color:#000000;" />
        <h2 style="margin: 0px 0pt; padding: 0pt; font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: rgb(255, 204, 102);"><em>ENHANCE YOUR GUEST EXPERIENCE WITH NEW ALOHA GUEST MANAGER!</em></h2><br />
        <strong>Click <a href="http://www.rap-pos.com/march06/Apr09Seg2.html" style="color: rgb(255, 255, 102);">HERE</a> to learn more about Aloha's new table-management software!<br /></strong>
        </div>
        
        <div style="border-top: medium solid rgb(0, 0, 0); padding: 10px; z-index: 1; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="left">
          
          <h2 style="margin: 5px 0pt; padding: 0pt; font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: rgb(255, 204, 102);">
          <em>Take More Vacations With ALOHA SPY Cameras!</em>        </h2>
        <strong>Don't spend the summer stuck behind your office doors!  With Aloha Spy remote access, view your camera system from anywhere you have internet access!  Click <a href="http://www.rap-pos.com/march06/Apr09Seg3.html" style="color: rgb(255, 255, 102);">here</a> for more info!</strong></div>
 
      <div style="border-top: medium solid rgb(0, 0, 0); padding: 10px; z-index: 1; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="left">
        <img src="http://www.rap-pos.com/march06/images/PCSLogoSM.jpg" style="margin: 5px; float: left; border:thin; border-color:#000000" alt="Image: Green Building">
        <h2 style="margin: 5px 0pt; padding: 0pt; font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: rgb(255, 204, 102);"><em>PCS Payroll - The Restaurant Payroll Company</em></h2>
        <strong>PCS Payroll is the <em>only</em> local payroll provider specializing in restaurant service and consulting!<br />Click <a href="http://www.pcspays.com/" target="_blank" style="color: rgb(255, 255, 102);">here</a> to learn more about how PCS can work for you!</strong><br /></div>
        <div style="border-top: medium solid rgb(0, 0, 0); padding: 10px; z-index: 1; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="left">
        <img src="http://www.rap-pos.com/march06/images/AcmeLogoSM.jpg" style="margin-left: 5px; margin-bottom:5px; margin-top: 0px; float: right; border:thin; border-color:#000000" alt="Image: Green Building">
        <h2 style="margin: 5px 0pt; padding: 0pt; font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: rgb(255, 204, 102);"><em>ACME Safe Co.<br />Keeping NY Safe!</em></h2>
        <strong>Since 1904, Acme Safe Co. has provided the highest quality in products to help you keep your cash stored securely!  Click <a href="http://www.acmesafenewyork.com/" target="_blank" style="color: rgb(255, 255, 102);">here</a> to visit their website!</strong><br /></div>
   
      <div style="border-top: medium solid rgb(0, 0, 0); padding: 10px 10px 10px 10px; z-index: 1; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="left">
        <img src="http://www.rap-pos.com/march06/images/meetup_logoSM.jpg" style="margin-top: 5px; margin-right: 10px; float: left; border:thin; border-color:#000000;" alt="Image: Mean Chef Carrying Fried Eggs in Bare Hand" />
        <h2 style="margin: 10px 0pt; padding: 0pt; font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: rgb(255, 204, 102);"><em>FREE EVENT: Restaurant Marketing for the New Economy!</em></h2>
        <strong>Monday, May 4 from 5-8pm at <a href="http://www.theaustraliannyc.com/" target="_blank" style="color: rgb(255, 255, 102);">The Australian</a>.  Panel discussion featuring experts on social media, PR, email and web marketing, and text marketing.  Click <a href="http://www.rap-pos.com/march06/MAY09MEETUPflyer.pdf" style="color: rgb(255, 255, 102);">here</a> for more info!</strong>   </div>    </td>
  </tr>
  <tr>
    <td style="width: 175px; height: 315px;" height="568" valign="top" width="175">
      <div style="padding: 5px; z-index: 1; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="center"><img src="http://www.rap-pos.com/march06/welcomematRED.jpg" height="114" width="140" alt="Welcome!" style="margin-bottom:5px; margin-top:10px;"><br /> <strong>to our <em>new</em> clients!!!<br />
        <br />
        Lobo - Court Street <br />
        Avenue Diner <br />
        Tony Romas <br />
        Civetta <br />
        Carriage House <br />
        Grandaisy Bakery <br />
        Questan's Seafood <br />
		Fort Defiance <br />
		Public House <br />
		Turtle Bay Grill & Lounge <br />
		Good Restaurant <br />
		Porto Vivo Restaurant <br />
		Sequoia - DC <br />
		The Maidstone <br />
		Bark Hot Dogs <br />
		</strong><br />
		**********<br />
        </p>
        <h2 style="margin: 5px; padding: 0pt; font-family: Arial,Helvetica,sans-serif; font-size: 12px; color: #FFFFFF;"><em>FREE ALOHA TRAINING</em></h2>  We still offer free manager training on a monthly basis to our Customers.<br /><br />
        <strong>Click <a href="http://www.rap-pos.com/march06/MgrTrainCalApr09.html" style="color: rgb(255, 255, 102)">HERE</a> for a calendar of classes!<br /></strong>
</div></td>
  </tr>
  <tr>
    <td style="width: 175px; height: 300px;" height="302" valign="top" width="175">
      <div style="z-index: 1; width: 175px; height: 85px; padding-top: 5px; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 9px; color: white;" align="center">
        This is the <a href="http://www.rap-pos.com/" style="color: rgb(255, 255, 102);">RAP-POS</a> monthly newsletter.  If you would like to unsubscribe, please scroll to the bottom of this email to the unsubscribe link, or <a href="mailto:sales@rap-pos.com?Subject=Unsubscribe%20Me%21" style="color: rgb(255, 255, 102);">email</a> us with an unsubscribe request.      </div>
        
        <div style="z-index: 1; width: 175px; height: 180px; padding-top: 5px; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 9px; color: white;" align="center">        </div>        </td>
  </tr>
</tbody></table>
 
 
</body></html>

Open in new window

0
Comment
Question by:swiftny
1 Comment
 
LVL 5

Accepted Solution

by:
blacksix earned 1000 total points
ID: 24255642
margins and padding are always hard to keep consistant between the two browsers. Yank them out, always specify font size as px (never pt as it is more subjective) and use line-height to fine tune.

Also there was a </p> that was read by one browser and not the other - I removed it.
<!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=iso-8859-1"><title>RAP-POS Newsletter</title></head><body>
 
<table style="width: 612px; height: 785px;" background="http://www.rap-pos.com/NewslBkgrdLongRed.jpg" bgcolor="#524741" height="981" width="612">
  <tbody><tr>
    <td style="height: 99px;" height="99" valign="top" width="180">
      <div height="100px" style="padding: 5px; z-index: 1; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="center">
        <em> Want to make sure our emails hit your Inbox?<br>
        Add</em> <a href="mailto:RAP@email.admail.net" style="color: rgb(255, 255, 102);">RAP@email.admail.net</a>
        <em>to your address book.</em><br>
        Click <a href="http://www.admail.net/manage/memberprefs.php?accountid=2206&amp;group=18" target="_blank" style="color: rgb(255, 255, 102);">here</a> to update your email preferences.      </div>    </td>
    <td rowspan="4" valign="top">
      <div style="z-index: 1; padding-top: 10px; padding-left: 15px; height: 70px; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="left">
        <img src="http://www.rap-pos.com/march06/AlohaBrownbkgrd.jpg" style="float: left; padding-right: 5px;" alt="Aloha"><br>
        <h1 style="margin: 10px 0pt; padding: 0pt; font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: rgb(255, 255, 255);">
          WWW.RAP-POS.COM<br>
          <em>March 09 eNewsletter</em>        </h1>
      </div>
 
      <div style="border-top: medium solid rgb(0, 0, 0); padding: 5px; z-index: 1; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="left">
        <img src="http://www.rap-pos.com/march06/images/ObamaLogoSM.jpg" alt="Image: Logo" style="border:thin; border-color:#000000; margin-right: 5px; margin-bottom: 5px; margin-top: 5px; float: left ;" width="72" height="72"/>
        <h2 style="margin: 5px 0pt; padding: 0pt; font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: rgb(255, 204, 102);"><em>How the Obama Administration is Changing the Way Restaurants Do Business!!</em></h2>
        <strong><a href="http://www.rap-pos.com/march06/SeparationAgrAB.pdf" target="_blank" style="color: rgb(255, 255, 102);">Click Here</a> for a Special Article from <a href="http://www.foxrothschild.com/Attorneys/Attorney.aspx?id=1114" target="_blank" style="color: rgb(255, 255, 102);">Anne Ciesla Bancroft</a> on How New Legislature can affect your hiring/firing procedures and liability! </strong><br /><br />
      </div>
 
        <div style="border-top: medium solid rgb(0, 0, 0); padding: 10px; z-index: 1; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="left">
        <img src="http://www.rap-pos.com/march06/images/lightbulbMINIaloha2.jpg" style="margin-right: 10px; float: right; border:thin; border-color:#000000;" />
        <h2 style="margin: 0px 0pt; padding: 0pt; font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: rgb(255, 204, 102);"><em>ENHANCE YOUR GUEST EXPERIENCE WITH NEW ALOHA GUEST MANAGER!</em></h2><br />
        <strong>Click <a href="http://www.rap-pos.com/march06/Apr09Seg2.html" style="color: rgb(255, 255, 102);">HERE</a> to learn more about Aloha's new table-management software!<br /></strong>
        </div>
 
        <div style="border-top: medium solid rgb(0, 0, 0); padding: 10px; z-index: 1; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="left">
 
          <h2 style="margin: 5px 0pt; padding: 0pt; font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: rgb(255, 204, 102);">
          <em>Take More Vacations With ALOHA SPY Cameras!</em>        </h2>
        <strong>Don't spend the summer stuck behind your office doors!  With Aloha Spy remote access, view your camera system from anywhere you have internet access!  Click <a href="http://www.rap-pos.com/march06/Apr09Seg3.html" style="color: rgb(255, 255, 102);">here</a> for more info!</strong></div>
 
      <div style="border-top: medium solid rgb(0, 0, 0); padding: 10px; z-index: 1; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="left">
        <img src="http://www.rap-pos.com/march06/images/PCSLogoSM.jpg" style="margin: 5px; float: left; border:thin; border-color:#000000" alt="Image: Green Building">
        <h2 style="margin: 5px 0pt; padding: 0pt; font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: rgb(255, 204, 102);"><em>PCS Payroll - The Restaurant Payroll Company</em></h2>
        <strong>PCS Payroll is the <em>only</em> local payroll provider specializing in restaurant service and consulting!<br />Click <a href="http://www.pcspays.com/" target="_blank" style="color: rgb(255, 255, 102);">here</a> to learn more about how PCS can work for you!</strong><br /></div>
        <div style="border-top: medium solid rgb(0, 0, 0); padding: 10px; z-index: 1; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="left">
        <img src="http://www.rap-pos.com/march06/images/AcmeLogoSM.jpg" style="margin-left: 5px; margin-bottom:5px; margin-top: 0px; float: right; border:thin; border-color:#000000" alt="Image: Green Building">
        <h2 style="margin: 5px 0pt; padding: 0pt; font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: rgb(255, 204, 102);"><em>ACME Safe Co.<br />Keeping NY Safe!</em></h2>
        <strong>Since 1904, Acme Safe Co. has provided the highest quality in products to help you keep your cash stored securely!  Click <a href="http://www.acmesafenewyork.com/" target="_blank" style="color: rgb(255, 255, 102);">here</a> to visit their website!</strong><br /></div>
 
      <div style="border-top: medium solid rgb(0, 0, 0); padding: 10px 10px 10px 10px; z-index: 1; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="left">
        <img src="http://www.rap-pos.com/march06/images/meetup_logoSM.jpg" style="margin-top: 5px; margin-right: 10px; float: left; border:thin; border-color:#000000;" alt="Image: Mean Chef Carrying Fried Eggs in Bare Hand" />
        <h2 style="margin: 10px 0pt; padding: 0pt; font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: rgb(255, 204, 102);"><em>FREE EVENT: Restaurant Marketing for the New Economy!</em></h2>
        <strong>Monday, May 4 from 5-8pm at <a href="http://www.theaustraliannyc.com/" target="_blank" style="color: rgb(255, 255, 102);">The Australian</a>.  Panel discussion featuring experts on social media, PR, email and web marketing, and text marketing.  Click <a href="http://www.rap-pos.com/march06/MAY09MEETUPflyer.pdf" style="color: rgb(255, 255, 102);">here</a> for more info!</strong>   </div>    </td>
  </tr>
  <tr>
    <td style="width: 175px; height: 315px;" height="568" valign="top" width="175">
      <div style="padding: 0px; z-index: 1; line-height:16px; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; color: white;" align="center"><img src="http://www.rap-pos.com/march06/welcomematRED.jpg" height="114" width="140" alt="Welcome!" style="margin-bottom:0px; margin-top:0px;"><br /> <strong>to our <em>new</em> clients!!!<br />
        <br />
        Lobo - Court Street <br />
        Avenue Diner <br />
        Tony Romas <br />
        Civetta <br />
        Carriage House <br />
        Grandaisy Bakery <br />
        Questan's Seafood <br />
                Fort Defiance <br />
                Public House <br />
                Turtle Bay Grill & Lounge <br />
                Good Restaurant <br />
                Porto Vivo Restaurant <br />
                Sequoia - DC <br />
                The Maidstone <br />
                Bark Hot Dogs <br />
                </strong><br />
                **********<br />
<br />
        <h2 style="margin: 0px; padding: 0px; font-family: Arial,Helvetica,sans-serif; font-size: 12px; color: #FFFFFF;"><em>FREE ALOHA TRAINING</em></h2>  We still offer free manager training on a monthly basis to our Customers.<br /><br />
        <strong>Click <a href="http://www.rap-pos.com/march06/MgrTrainCalApr09.html" style="color: rgb(255, 255, 102)">HERE</a> for a calendar of classes!<br /></strong>
</div></td>
  </tr>
  <tr>
    <td style="width: 175px; height: 300px;" height="302" valign="top" width="175">
      <div style="z-index: 1; width: 175px; height: 85px; padding-top: 5px; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 9px; color: white;" align="center">
        This is the <a href="http://www.rap-pos.com/" style="color: rgb(255, 255, 102);">RAP-POS</a> monthly newsletter.  If you would like to unsubscribe, please scroll to the bottom of this email to the unsubscribe link, or <a href="mailto:sales@rap-pos.com?Subject=Unsubscribe%20Me%21" style="color: rgb(255, 255, 102);">email</a> us with an unsubscribe request.      </div>
 
        <div style="z-index: 1; width: 175px; height: 180px; padding-top: 5px; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 9px; color: white;" align="center">        </div>        </td>
  </tr>
</tbody></table>
 
 
</body></html>

Open in new window

0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question