Menu icon Foundation
Bug with <center> tag in Yahoo Firefox Mac and Yahoo Firefox Windows

Hey Guys, 

I'm having an issue using <center></center> with a button.  My code is below: 

<container>
<row>
    <columns small="12" large="12">
      <div  class="lcg-main-content-block">
          <h5 class="text-center">Thanks for Choosing&nbsp;Us.</h5>
          <p class="text-center">Next time, shipping's on us. </p>
          <br>
          <row class="promo-code-container">
            <columns small="1" large="2"></columns>
            <columns small="10" large="8" class="promo-code-box">
              <p class="text-center">PROMO CODE  <span style="text-transform:uppercase;"><<LCG Program\TG LCG Coupon Code Default='246996'>></span></p>
            </columns>
            <columns small="1" large="2"></columns>
          </row>

          <p class="caption text-center">
            Valid within Continental U.S.
          </p>
          
          <center>
            <button href="{{ variables.root-portal }}" class="small float-center">Shop Now</button>
          </center>

          
          <p class="small-text-center" style="margin-left:25px; margin-right:25px;">
            We genuinely appreciate your business. In fact, we're so grateful, we'd like to offer a little something in return. As a token of our appreciation, please enjoy free shipping on your next order. Regardless of the order size, you will not be charged a shipping fee within the continental US. Because it's the little things in life that really make all the difference.
          </p>

      </div>
    </columns>
  </row>
</container>

 

After I've run my test and try to open my email on Yahoo Firefox Win and Yahoo Chrome Windows, the button isn't centered. However, if I click the view in browser link, the button is centered. It appears Yahoo is adding some classes that are overriding the centering of the button on yahoo.  

Can anyone else confirm this? 

centerfoundation for emails

Hey Guys, 

I'm having an issue using <center></center> with a button.  My code is below: 

<container>
<row>
    <columns small="12" large="12">
      <div  class="lcg-main-content-block">
          <h5 class="text-center">Thanks for Choosing&nbsp;Us.</h5>
          <p class="text-center">Next time, shipping's on us. </p>
          <br>
          <row class="promo-code-container">
            <columns small="1" large="2"></columns>
            <columns small="10" large="8" class="promo-code-box">
              <p class="text-center">PROMO CODE  <span style="text-transform:uppercase;"><<LCG Program\TG LCG Coupon Code Default='246996'>></span></p>
            </columns>
            <columns small="1" large="2"></columns>
          </row>

          <p class="caption text-center">
            Valid within Continental U.S.
          </p>
          
          <center>
            <button href="{{ variables.root-portal }}" class="small float-center">Shop Now</button>
          </center>

          
          <p class="small-text-center" style="margin-left:25px; margin-right:25px;">
            We genuinely appreciate your business. In fact, we're so grateful, we'd like to offer a little something in return. As a token of our appreciation, please enjoy free shipping on your next order. Regardless of the order size, you will not be charged a shipping fee within the continental US. Because it's the little things in life that really make all the difference.
          </p>

      </div>
    </columns>
  </row>
</container>

 

After I've run my test and try to open my email on Yahoo Firefox Win and Yahoo Chrome Windows, the button isn't centered. However, if I click the view in browser link, the button is centered. It appears Yahoo is adding some classes that are overriding the centering of the button on yahoo.  

Can anyone else confirm this? 

Corey Schaaf over 3 years ago

A little more information: When I inspect the element inside Yahoo Chrome Windows, I noticed that a class of:

.undoreset center{
text-align:center
}

which overrides the

center: -webkit-center

If I uncheck text-align:center for the class of .undoreset center, the button becomes centered as the class center text-align:-webkit-center is then invoked. Now that I know that, I'm not sure how to solve the problem as this is something Yahoo Chrome for Windows is adding. 

CSS Overrides from Yahoo Chrome Win

Corey Schaaf over 3 years ago

To isolate the issue I used this code:

 

<container>
  <row>
    <columns>
       <center>
          <button href="http://yahoo.com" class="small">Shop Now</button>
       </center>
    </columns>
  </row>
</container>

 

Results can be found here:

https://www.emailonacid.com/app/acidtest/display/summary/ZwTOO3hcifaWFGvWZOsX7WhQzP8uDzQJ4YdevkUs6Vs7M/shared

Corey Schaaf over 3 years ago

@rafi this is still a bug! Someone look at this please.

I found another user who had problems with this as well. I posted my results on the github bug that was closed. 

https://github.com/zurb/foundation-emails/issues/269