lejimmie
Reputation: 388
Strange Google Chrome Float Bug - Fine in other browsers
I'm encountering a strange bug where I'm trying to float my table cells (that are block level and 100% width) and they end up side by side while the first cell behaves normally. You are specifically looking for the header.
I'm using tables because this is an email.
In other browsers they collapse just fine but on Chrome desktop and mobile they won't!
I've tried clearfixing the cells also...
http://jsfiddle.net/us600sos/ - jsfiddle display it just fine, even in Chrome. What is that about?!
http://news.yfish.co.uk/e/B3936E5E801047F09407600602EBA805/4/preview/ - Here is the version you can test to see the error (Respond down)
<html>
<head>
<title>Template</title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style type="text/css">
#outlook a { padding: 0; }
.ReadMsgBody { width: 100%; } .ExternalClass { width:100%; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
body { margin: 0; padding: 0; }
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse!important; }
body { height: 100%!important; margin: 0; padding: 0; width: 100%!important; background-color: #ffffff; }
a:visited { color: #414141; }
@media screen {
@font-face {
font-family: 'humanst';
src: url(humanist-521-bold.eot); /* IE9 Compat Modes */
src: url(humanist-521-bold.woff) format('woff'), /* Modern Browsers */
url(humanist-521-bold.ttf) format('truetype'), /* Safari, Android, iOS */
url(humanist-521-bold.svg) format('svg'); /* Legacy iOS */
}
}
.facebook, .twitter, .mail {
display: block;
border-radius: 100%;
overflow: visible;
-webkit-transition: all 1.2s ease; /* Safari and Chrome */
-moz-transition: all 1.2s ease; /* Firefox */
-ms-transition: all 1.2s ease; /* IE 9 */
-o-transition: all 1.2s ease; /* Opera */
transition: all 1.2s ease;
border: 2px solid #ffffff;
}
.facebook:hover {
background-color: #718fcb;
border: 2px solid #718fcb;
}
.twitter:hover {
background-color: #61c4e4;
border: 2px solid #61c4e4;
}
.mail:hover {
background-color: #bfbfbf;
border: 2px solid #bfbfbf;
}
.full-width-cell {
*zoom: 1;
}
.full-width-cell:before,
.full-width-cell:after {
display: table;
line-height: 0;
content: "";
}
.full-width-cell:after {
clear: both;
}
/* Animated Fish */
.swi {
-webkit-animation: fishSwim 10s ease 4s infinite;
-moz-animation: fishSwim 10s ease 4s infinite;
-o-animation: fishSwim 10s ease 4s infinite;
animation: fishSwim 10s ease 4s infinite;
}
@-webkit-keyframes fishSwim {
0% { -webkit-transform: translatex(0); }
20% { -webkit-transform: translatex(230px); }
20.1% { -webkit-transform: translatex(230px) scaleX(-1); }
50% { -webkit-transform: translatex(-180px) scaleX(-1); }
65% { -webkit-transform: translatex(-270px) scaleX(-1); }
65.1% { -webkit-transform: translatex(-270px) scaleX(1); }
100% { -webkit-transform: translatex(0) scaleX(1); }
}
@-moz-keyframes fishSwim {
0% { -moz-transform: translatex(0); }
20% { -moz-transform: translatex(230px); }
20.1% { -moz-transform: translatex(230px) scaleX(-1); }
50% { -moz-transform: translatex(-180px) scaleX(-1); }
65% { -moz-transform: translatex(-270px) scaleX(-1); }
65.1% { -moz-transform: translatex(-270px) scaleX(1); }
100% { -moz-transform: translatex(0) scaleX(1); }
}
@-o-keyframes fishSwim {
0% { -o-transform: translatex(0); }
20% { -o-transform: translatex(230px); }
20.1% { -o-transform: translatex(230px) scaleX(-1); }
50% { -o-transform: translatex(-180px) scaleX(-1); }
65% { -o-transform: translatex(-270px) scaleX(-1); }
65.1% { -o-transform: translatex(-270px) scaleX(1); }
100% { -o-transform: translatex(0) scaleX(1); }
}
@keyframes fishSwim {
0% { transform: translatex(0); }
20% { transform: translatex(230px); }
20.1% { transform: translatex(230px) scaleX(-1); }
50% { transform: translatex(-180px) scaleX(-1); }
65% { transform: translatex(-270px) scaleX(-1); }
65.1% { transform: translatex(-270px) scaleX(1); }
100% { transform: translatex(0) scaleX(1); }
}
/* Icons Fade Down */
.facebook, .twitter, .mail {
-webkit-animation: fadeInDown 1.2s forwards;
-moz-animation: fadeInDown 1.2s forwards;
-o-animation: fadeInDown 1.2s forwards;
animation: fadeInDown 1.2s forwards;
}
@-webkit-keyframes fadeInDown {
0% {opacity: 0; -webkit-transform: translateY(-30px);}
40% {opacity: 0; -webkit-transform: translateY(-30px);}
100% {opacity: 1; -webkit-transform: translateY(0);}
}
@-moz-keyframes fadeInDown {
0% {opacity: 0; -moz-transform: translateY(-30px);}
40% {opacity: 0; -moz-transform: translateY(-30px);}
100% {opacity: 1; -moz-transform: translateY(0);}
}
@-o-keyframes fadeInDown {
0% {opacity: 0; -o-transform: translateY(-30px);}
40% {opacity: 0; -o-transform: translateY(-30px);}
100% {opacity: 1; -o-transform: translateY(0);}
}
@keyframes fadeInDown {
0% {opacity: 0; transform: translateY(-30px);}
40% {opacity: 0; transform: translateY(-30px);}
100% {opacity: 1; transform: translateY(0);}
}
/* Title Fade */
.fade {
-webkit-animation: fadeIn 2.5s ease forwards;
-moz-animation: fadeIn 2.5s ease forwards;
-o-animation: fadeIn 2.5s ease forwards;
animation: fadeIn 2.5s ease forwards;
}
@-webkit-keyframes fadeIn {
0% { opacity: 0; visibility: visible; }
50% { opacity: 0; visibility: visible; }
100 { opacity: 1; visibility: visible; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; visibility: visible; }
50% { opacity: 0; visibility: visible; }
100 { opacity: 1; visibility: visible; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; visibility: visible; }
50% { opacity: 0; visibility: visible; }
100 { opacity: 1; visibility: visible; }
}
@keyframes fadeIn {
0% { opacity: 0; visibility: visible; }
50% { opacity: 0; visibility: visible; }
100 { opacity: 1; visibility: visible; }
}
/* Image fades */
/* Left */
.imgFadeInLeft {
-webkit-animation: fadeInLeft 3s forwards;
-moz-animation: fadeInLeft 3s forwards;
-o-animation: fadeInLeft 3s forwards;
animation: fadeInLeft 3s forwards;
}
@-webkit-keyframes fadeInLeft {
0% {opacity: 0; -webkit-transform: translateX(-50px);}
70% {opacity: 0; -webkit-transform: translateX(-50px);}
100% {opacity: 1; -webkit-transform: translateX(0);}
}
@-moz-keyframes fadeInLeft {
0% {opacity: 0; -moz-transform: translateX(-50px);}
70% {opacity: 0; -moz-transform: translateX(-50px);}
100% {opacity: 1; -moz-transform: translateX(0);}
}
@-o-keyframes fadeInLeft {
0% {opacity: 0; -o-transform: translateX(-50px);}
70% {opacity: 0; -o-transform: translateX(-50px);}
100% {opacity: 1; -o-transform: translateX(0);}
}
@keyframes fadeInLeft {
0% {opacity: 0; transform: translateX(-50px);}
70% {opacity: 0; transform: translateX(-50px);}
100% {opacity: 1; transform: translateX(0);}
}
/* Down */
.imgFadeInDown {
-webkit-animation: imagefadeInDown 3s forwards;
-moz-animation: imagefadeInDown 3s forwards;
-o-animation: imagefadeInDown 3s forwards;
animation: imagefadeInDown 3s forwards;
}
@-webkit-keyframes imagefadeInDown {
0% {opacity: 0; -webkit-transform: translateY(-50px);}
70% {opacity: 0; -webkit-transform: translateY(-50px);}
100% {opacity: 1; -webkit-transform: translateY(0);}
}
@-moz-keyframes imagefadeInDown {
0% {opacity: 0; -moz-transform: translateY(-50px);}
70% {opacity: 0; -moz-transform: translateY(-50px);}
100% {opacity: 1; -moz-transform: translateY(0);}
}
@-o-keyframes imagefadeInDown {
0% {opacity: 0; -o-transform: translateY(-50px);}
70% {opacity: 0; -o-transform: translateY(-50px);}
100% {opacity: 1; -o-transform: translateY(0);}
}
@keyframes imagefadeInDown {
0% {opacity: 0; transform: translateY(-50px);}
70% {opacity: 0; transform: translateY(-50px);}
100% {opacity: 1; transform: translateY(0);}
}
/* Right */
.imgFadeInRight {
-webkit-animation: imagefadeInRight 3s forwards;
-moz-animation: imagefadeRight 3s forwards;
-o-animation: imagefadeInRight 3s forwards;
animation: imagefadeInRight 3s forwards;
}
@-webkit-keyframes imagefadeInRight {
0% {opacity: 0; -webkit-transform: translateX(50px);}
70% {opacity: 0; -webkit-transform: translateX(50px);}
100% {opacity: 1; -webkit-transform: translateX(0);}
}
@-moz-keyframes imagefadeInRight {
0% {opacity: 0; -moz-transform: translateX(50px);}
70% {opacity: 0; -moz-transform: translateX(50px);}
100% {opacity: 1; -moz-transform: translateX(0);}
}
@-o-keyframes imagefadeInRight {
0% {opacity: 0; -o-transform: translateX(50px);}
70% {opacity: 0; -o-transform: translateX(50px);}
100% {opacity: 1; -o-transform: translateX(0);}
}
@keyframes imagefadeInRight {
0% {opacity: 0; transform: translateX(50px);}
70% {opacity: 0; transform: translateX(50px);}
100% {opacity: 1; transform: translateX(0);}
}
/* Up */
.imgFadeInUp {
-webkit-animation: imagefadeInUp 3s forwards;
-moz-animation: imagefadeInUp 3s forwards;
-o-animation: imagefadeInUp 3s forwards;
animation: imagefadeInUp 3s forwards;
}
@-webkit-keyframes imagefadeInUp {
0% {opacity: 0; -webkit-transform: translateY(50px);}
70% {opacity: 0; -webkit-transform: translateY(50px);}
100% {opacity: 1; -webkit-transform: translateX(0);}
}
@-moz-keyframes imagefadeInUp {
0% {opacity: 0; -moz-transform: translateY(50px);}
70% {opacity: 0; -moz-transform: translateY(50px);}
100% {opacity: 1; -moz-transform: translateX(0);}
}
@-o-keyframes imagefadeInUp {
0% {opacity: 0; -o-transform: translateY(50px);}
70% {opacity: 0; -o-transform: translateY(50px);}
100% {opacity: 1; -o-transform: translateX(0);}
}
@keyframes imagefadeInUp {
0% {opacity: 0; transform: translateY(50px);}
70% {opacity: 0; transform: translateY(50px);}
100% {opacity: 1; transform: translateX(0);}
}
#zoom a {
display: block;
overflow: hidden!important;
}
#zoom img, .img-cell-one, .img-cell-two {
-webkit-transition: all 2s ease; /* Safari and Chrome */
-moz-transition: all 2s ease; /* Firefox */
-ms-transition: all 2s ease; /* IE 9 */
-o-transition: all 2s ease; /* Opera */
transition: all 2s ease;
}
#zoom img:hover {
-webkit-transform: scale(1.07); /* Safari and Chrome */
-moz-transform: scale(1.07); /* Firefox */
-ms-transform: scale(1.07); /* IE 9 */
-o-transform: scale(1.07); /* Opera */
transform: scale(1.07);
}
@media screen and (max-width: 740px), and screen (max-device-width: 740px) {
body { width: auto!important; }
table[class="full-width"] { display: block!important; width: 100%!important; }
td[class="full-width-cell"] { display: block!important; width: 100%!important; float: left!important; padding: 0!important; text-align: center!important; }
table[class="content-width"] { display: block!important; width: 96%!important; float: none!important; margin: 0 auto!important; }
img[id="title"] { width: 100%!important; height: auto!important; }
td[class="img-cell-one"] { width: 42%!important; float: left!important; display: block!important; }
td[class="img-cell-two"] { width: 58%!important; float: left!important; display: block!important; }
img[class="img-scale"] { width: 100%!important; height: auto!important; }
img[class="think-tank"] { float: none!important; margin: 0 auto!important; }
table[class="tagline-table"] { display: block!important; float: none!important; margin: 0 auto 20px auto!important; }
td[id="view-padding"] { padding-top: 20px!important; padding-bottom: 20px!important; }
table[class="social"] { display: block!important; margin: 0 auto!important; }
div[class="center-header"] { width: 100%!important; max-width: 357px!important; margin: 0 auto!important; }
td[id="featured-padding"] { padding: 0 20px 0 20px!important; }
td[id="title-cell"] { padding: 0 20px 0 20px!important; }
[class="mobile-hide"] { display: none!important; }
}
@media screen and (max-width: 520px), and screen (max-device-width: 520px) {
td[class="gallery-split"] { display: block!important; width: 50%!important; float: left!important; }
td[class="img-cell-one"] { width: 100%!important; float: left!important; display: block!important; }
div[class="gallery"] { overflow: hidden!important; width: 100%; max-width: 480px; margin: 0 auto!important; }
td[class="img-cell-two"] { width: 100%!important; clear: both!important; display: block!important; }
div[class="gallery-bottom"] { width: 100%!important; float: right!important; }
[class="block"] { display: block!important; width: 100%!important; }
div[class="img-large"] { max-height: 150px; overflow: hidden; }
td[id="gallery-clear"] { clear: both!important; }
.img-cell-one, .img-cell-two {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
}
</style>
</head>
<body bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" bgcolor="#ffffff">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#fec10d" style="background-color: #fec10d;"><!-- wrapper -->
<tr>
<td bgcolor="#fec10d">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" class="full-width-cell">
<div class="center-header"><!-- ISSUE STARTS HERE-->
<table width="99%" cellpadding="0" cellspacing="0" border="0" align="left" class="full-width"><!-- header -->
<tr class="block">
<td height="25">
</td>
</tr>
<tr class="block">
<td width="33%" style="padding-left: 20px;" class="full-width-cell">
<div class="clearfix">
<table width="354" cellpadding="0" cellspacing="0" border="0" align="left" class="tagline-table">
<tr>
<td>
<img src="think-tank.png" width="354" height="19" alt="THINK OUTSIDE THE TANK" border="0" style="display: block; border: 0;" class="img-scale">
</td>
</tr>
</table>
</div>
</td>
<td width="33%" align="center" class="full-width-cell">
<div class="clearfix">
<table width="68" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td>
<a href="http://www.yfish.co.uk/"><img src="logo.png" width="68" height="21" alt="Yellow Fish" border="0" style="display: block; border: 0;" class="logo"></a>
</td>
</tr>
</table>
</div>
</td>
<td width="33%" style="font-family: 'humanst', arial, helvetica, sans-serif; font-size: 11px; color: #ffffff; line-height: 15px; text-align: right; vertical-align: middle; padding-right: 20px;" valign="middle" class="full-width-cell" id="view-padding">
<a href="[*Hosted*]" style="color: #ffffff; text-decoration: none;">It's a crime, not to view online</a>
</td>
</tr>
<tr class="block">
<td height="25" colspan="3">
</td>
</tr>
</table><!-- end header -->
<div>
</td>
</tr>
</table>
</td>
</tr>
</table>
Upvotes: 0
Views: 334
Answers (1)
user2958788
Reputation:
I'll start by saying I love that you are using animation in an email. Looks brilliant! Hope you can at least get a few browsers showing it.
Now... I don't see any need in the div around the header, without it the cells re-size just fine. Remove floats, they won't work in email clients and aligns will work just fine in float's place for browsers. It took me a while to work it out but you are missing your doctype. I also added the version of the charset definition I use.
I would suggest replacing the top of your email with this:
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
Your cells are stacking fine now and everything is centered. I didn't have to change a lot but here is my version of your code in case you wanted to compare it to yours: http://jsfiddle.net/nivicious/xbmx3bwc/
Upvotes: 1
Related Questions
- CSS Floating Bug in Google Chrome
- Float bug in chrome? 1px extra padding, but it's not padding
- Chrome float issue
- Strange inconsistent rendering in Google Chrome
- Strange rendering issue in Chrome with floats in a div with margin-top
- How can I get this css to display correctly in Chrome?
- Float bug in Chrome?
- Chrome Browser - Absolute positioning and floating issue
- Google Chrome CSS
- Strange float bug