In gMail, the font-size that I set for <td>s work except for this one: (edit: I spotted the typo, changed it but still doesn't work on gmail :( )
<tr>
<td class="inner" style="font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif; font-weight:800; font-size: 80pt!important; text-align: center">
$33
</td>
</tr>
Any idea why this doesn't work? Strangely enough, it works for this:
<tr>
<td class="inner" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16pt; text-align: center; padding: 0; white-space:nowrap">
We never win because you only believe in science!
</td>
</tr>
On CSS,this rule was added:
div,p,a,li,td {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;}
Any help will be appreciated!
It appears you have font-family: twice!
Hope that helps!
Related
I have a very simple 4-column bootstrap table within a responsive grid. A few customers have reported that the adLabel cells/columns are not showing and they don't know what the data means. The only difference between adLabel and adData is the font-weight. I thought it was a font issue until this customer sent a screenshot showing that the columns are missing entirely.
Sample Code:
.adLabel {
font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
color: black;
text-align: left;
vertical-align: top;
font-weight: normal;
}
.adData {
font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
color: black;
text-align: left;
vertical-align: top;
font-weight: 600;
}
<!-- Bootstrap-3.4.1 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Body -->
<table class="table table-striped" style="width:100%; border:0; padding:5px;">
<tr><td colspan="4" class="bgLightgray center"><h4>Horse Name</h4></td></tr>
<tr><td class="adLabel" style="width:20%">Location</td>
<td class="adData" style="width:30%">Colorado</td>
<td class="adLabel" style="width:20%">Breed</td>
<td class="adData" style="width:30%">Pony</td></tr>
</table>
Adblockers are blocking the adLabel class. In my case its uBlock.
You just need to rename the class.
I want to use a table to display words and sentences, and I currently have:
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 80%;
}
.table1 th {
background: #111;
color: white;
}
td {
position: relative;
}
td,
th {
padding: 9px;
}
td {
word-break: break-all;
}
tr:nth-child(2n) {
background: #ececec;
}
<div>
<table class="table1">
<thead>
<tr class="tableizer-firstrow">
<th>Spanish</th>
<th>In context</th>
<th>Translation</th>
</tr>
</thead>
<tbody>
<tr>
<td>autor</td>
<td>Stephen King es un <strong>autor</strong> muy famoso.</td>
<td>Stephen King is a very famous <strong>author</strong>.</td>
</tr>
<tr>
<td>favor</td>
<td>Quiero pedirte un <strong>favor</strong>.</td>
<td>I want to ask you a <strong>favor</strong>.</td>
</tr>
<tr>
<td>director</td>
<td>El <strong>director</strong> de la empresa se va de vacaciones.</td>
<td>The <strong>director</strong> of the company is going on vacation.</td>
</tr>
</tbody>
</table>
</div>
In order to avoid the width messing up with the entire page the table is on, I had to add:
td {
word-break: break-all;
}
The issue is that on mobile, words break (obviously):
Is there a better way of maintaining responsiveness, not breaking the page with the width, and not breaking words?
by adding overflow-wrap: break-word it works check the running example in below snippet and to get more information about overflow-wraohttps://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 80%;
}
.table1 th {
background: #111;
color: white;
}
td {
position: relative;
}
td,
th {
padding: 9px;
}
td {
overflow-wrap: break-word
}
tr:nth-child(2n) {
background: #ececec;
}
<div>
<table class="table1">
<thead>
<tr class="tableizer-firstrow">
<th>Spanish</th>
<th>In context</th>
<th>Translation</th>
</tr>
</thead>
<tbody>
<tr>
<td>autor</td>
<td>Stephen King es un <strong>autor</strong> muy famoso.</td>
<td>Stephen King is a very famous <strong>author</strong>.</td>
</tr>
<tr>
<td>favor</td>
<td>Quiero pedirte un <strong>favor</strong>.</td>
<td>I want to ask you a <strong>favor</strong>.</td>
</tr>
<tr>
<td>director</td>
<td>El <strong>director</strong> de la empresa se va de vacaciones.</td>
<td>The <strong>director</strong> of the company is going on vacation.</td>
</tr>
</tbody>
</table>
</div>
To create a responsive table, add a container element with overflow-x:auto around the
Like this:
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
I am trying to create an Email Signature Generator. I am trying to get the blue line (it can be seen in the program) to stretch all the way down. However, when I do it, it stretches the rest of the items. I believe this may be because it is all inside a table and when one element is sized differently than the others, it tries it equal it out but I am not sure how to change it. Here is my code:
table {
display: inline-block;
}
#image {
width: 200px;
height: 200px;
border-radius: 50%;
}
.spacer {
width: 30px;
}
hr {
height: 200px;
width: 7.5px;
border-radius: 20px;
border: none;
background-color: cornflowerBlue;
}
#fullName {
font-family: 'Source Sans Pro', sans-serif;
font-size: 24px;
color: orange;
}
#job {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
padding-top: 11px;
}
#jobLocationText {
font-family: 'Source Sans Pro', sans-serif;
font-size: 15px;
padding-top: 6px;
}
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr>
<td>
<img src="https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id="image">
</td>
<td class="spacer"></td>
<td>
<hr>
</td>
<td class="spacer"></td>
</tr>
<tr>
<td>
<center>
<div id="fullName">Billy Staples</div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="job"><i>Programmer</i></div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="jobLocationText">at the <b id="jobLocation">HTML hub</b></div>
</center>
</td>
</tr>
</table>
And a working version can be found here.
Again, I am trying to get it so the hr (in the CSS) when the height is changed (to say 300 or something) it doesn't stretch the rest of the table with it. If you have an idea as to how I might be able to do my table differently so that it might be easier or just so that I could fix this problem, suggestions are welcome!
Thanks in advance!
Use rowspan="" to strech <hr> to way down,
<td rowspan="4">
<hr>
</td>
Here's your updated code, https://jsfiddle.net/he84kv8n/10/
<hr> is a horizontal rule (divider), bending it to be a vertical rule (divider) is a use case that will likely be difficult for anyone looking at your code to decipher.
I would suggest using a CSS border attribute on the table cell, that will automatically be the correct size.
I change the td font size to 18px , but it looks like bold? How can I fix this?
<table border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff">
<tr>
<td align="center" style="color: #000000;font-family: Arial, sans-serif;font-weight: normal;font-size: 18px;line-height: 27px;text-decoration:none;padding: 33px 91px 10px 91px;letter-spacing: 1px;border-left:1px solid #d2d2d2;border-right:1px solid #d2d2d2;">
Oops, This Page Could Not Be Found!
</td>
</tr>
<tr>
<td align="center" style="color: #000000; font-family: Arial, sans-serif; font-weight: normal; font-size: 18px; line-height: 18px; text-decoration:none; padding: 28px 0 41px 0; letter-spacing: 1px;border-left:1px solid #d2d2d2;border-right:1px solid #d2d2d2;">
Oops, This Page Could Not Be Found!<a style="color:#7D7D7D;text-decoration:none;">Oops, This Page Could Not Be Found!</a>Oops, This Page Could Not Be Found!
<a style="color:#7D7D7D;text-decoration:none;">Oops, This Page Could Not Be Found!</a>
</td>
</tr>
</table>
Change the font weight of your TD's to a specific number of your choice (100, 200, 300 etc.) and see what is the best for your design like the following example:
td {font-weight: 200;}
There are many ways of solving it. Firstly, you could reduce the weight of the font in your css
td {
font-size: size px;
use font weight
}
or
you could change your font that does not look bold as sometimes it is because of the font being used it looks its bold but it is not bold.
or
you might have put the font in <strong></strong> tag that might have put a bold effect over it.
You have to change the font-weight property.
td{
font-size: 18px;
font-weight: normal;
}
More information about font-weight here https://www.w3schools.com/cssref/pr_font_weight.asp
Maybe a class override your td so you have to use.
td{
font-size: 18px;
font-weight: normal!important;
}
But please note that use !important is not a good practice but an hard fix. If you provide your .css code I can help you more further.
I want to apply the following style on my specific td but I dont know why its unable to do so
/*Style*/
font: 100%/1.4 "Alvi Nastaleeq", Verdana, Arial, Helvetica, sans-serif; color: black;
<td colspan="2" class="centerAlign border">ABC</td>
kindly help to do so. Thanks in advance.
EDIT:
The class centerAlign border is class for all other td's but I want to apply special styling on this cell.
Here is a new style created for your td element
<style type="text/css">
.style1
{
font-size:100%;
font-family: "Alvi Nastaleeq", Verdana, Arial, Helvetica, sans-serif;
color: #00000;
}
</style>
To use it just modify your td as such
<td colspan="2" class="centerAlign border style1">ABC</td>
You cannot use 100%/1.4 for your font-size. Anyway, wrap your style in another class and apply it to your element:
.font-style {
font-family: "Alvi Nastaleeq", Verdana, Arial, Helvetica, sans-serif;
color: black;
font-size: 13px;
}
HTML:
<td colspan="2" class="centerAlign border font-style">ABC</td>
Css
.centerAlign.border{
font: 100%/1.4 "Alvi Nastaleeq", Verdana, Arial, Helvetica, sans-serif; color: black;
}
HTML
<table>
<tr>
<td colspan="2" class="centerAlign border">ABC</td>
</tr>
</table>
Live demo http://jsfiddle.net/mWRMS/1/
HTML
<table>
<tr>
<td colspan="2" class="font">ABC</td>
</tr>
</table>
Css
.font{
font-family:"Alvi Nastaleeq", Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size:13px;
}