Reputation: 6054
I found this really strange difference between Chrome and Firefox behavior.
I have a column set with width: 25%
and an image header.
Without the image header both browsers behave in the same way, but with the image, the column loses its width on chrome. Check it here by clicking on the image:
input {
display: none;
}
input:checked +img {
display: none;
}
<table width='600' border='0' cellspacing='0' style='margin:0; padding:0; text-align:center; background:white; color: #555; font-size:18px; font-weight:300; font-family: Roboto, Verdana, Arial, sans-serif'>
<tbody>
<tr>
<td colspan="4">
<label>
<input type="checkbox">
<img src="http://www.esandra.com/file/2012/09/slider-imagen.jpg">
</label>
</td>
</tr>
<tr>
<td colspan="4">APPROVED</td>
</tr>
<tr>
<td style="width:25%;">LOC</td>
<td>Name</td>
<td>#</td>
<td>age</td>
</tr>
<tr>
<td style="width:25%;">UK</td>
<td>Simon</td>
<td>1</td>
<td>18</td>
</tr>
<tr>
<td style="width:25%;">UK</td>
<td>Niles</td>
<td>2</td>
<td>51</td>
</tr>
<tr>
<td colspan="4">NOT APPROVED</td>
</tr>
<tr>
<td style="width:25%;">UK</td>
<td>What happens if any name is thiiiiiis long</td>
<td>3</td>
<td>13203203212 seconds and 1215 minutes</td>
</tr>
</tbody>
</table>
I think this is different from other questions because it is only happening when the image is there...
Here is a pen for you to try stuff: http://codepen.io/vandervals/pen/waPQZj?editors=110
Does someone know how to make it work in Chrome like it works in Firefox?
Edit: I forgot to mention that this is for a newsletter with variable content, that is why tables are a requirement (otherwise I wouldn't hurt myself by using them).
Upvotes: 0
Views: 315