In trying to give my emails a more 'professional' look, I want to create a neat looking signature. Now for a test, I first want to create a simple signature. And if I get the hang of it, expand it to a better one.
It seems that I can't seem to 'reset' or clear the table. But I can't figure out what the problem is... Any help would be appreciated!
For starters I want to create a signature like this:
I created a single html file (including css) with simple code in it. See below. The problem I keep experiencing is that for some reason, the tables height seems to be larger (only on the bottom) when I insert an image in one of the cells. See problem.
As you can clearly see, the table height exceeds that of the picture. I can't figure out how to remedy this...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EmailSignature</title>
<style>
table, td, tr {
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
padding: 0;
margin: 0;
}
table {
width: 400px;
}
img {
padding: 0;
margin: 0;
}
#Avatar {
width: 80px;
height: 80px;
}
#Whitespace {
width: 2px;
}
#BlueBar {
width: 6px;
background-color: #0CF;
margin: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="3" id="Avatar"><img id="Avatar" src="enhanced-buzz-16839-1297795475-9.jpg"></td>
<td rowspan="3" id="Whitespace"> </td>
<td rowspan="3" id="BlueBar"> </td>
<td rowspan="3" id="Whitespace"> </td>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
</table>
</body>
</html>
in terms of solving your problem you may want to re-look at the structure of your table. The development of HTML emails and signatures can be pretty hard to do as many email clients respond different and have different support levels.
A guide to writing HTML, CSS and JS for email client usage has been created by Campaign Monitor and can be found here: https://goo.gl/oo1tcU
Support is so varied and there are very few 'safe' elements and attributes also campaign monitor's guide sadly doesn't include a list of the buggy HTML attributes. For example personally I have experienced rowspan and colspan not working correctly in a lot of email clients therefore I wouldn't suggest using them at all. Instead draw up a grid which has equal structure and use empty tags with defined HTML width and height attributes to make the table work for you.
Unfortunately to make an signature look exactly the same in all clients steps like using empty but defined tags are necessary or some clients will simply ADD the 's the colspans are running over.
In HTML emails/signatures you must define EVERYTHING to make sure nothing changes, a table tag I use at the start of all my projects looks something like this:
<table width="[your desired width]" align="center" cellpadding="0" cellspacing="0" border="0" frame="0" bgcolor="#fff"
style="border-spacing: 0; padding: 0; border: 0; font-family: Arial, Helvetica, sans-serif;
background-color: #fff; border-collapse: collapse; color: #000; font-size: 16px; line-height: 19px;" >
Also for all images use a tag like below and define the width and height in HTML NOT CSS.
<img src="" alt="" width="" height="" style="display: block; border: none;"/>
Email clients cause you to write HTML like its the 1990s, it's very frustrating but without considerations like these you may get the result you want in one client but if you send to another your signature will look different to a recipient. As you are trying to increase your professionalism I assume this wouldn't be desired!
Another tip I would suggest is using as much imagery as possible (and remember to define the width and height in HTML) because if defined correctly a structure built with every td and img tag width and height defined will almost never change. This is beneficial because text fonts also have low support unless they are standard fonts e.g. Arial!
Finally use ONLY Inline styles, many clients strip anything in a head tag out!
Related
I'm trying to create a table of empty cells on which I'm attaching Javascript to toggle a class, so I just need to give them a height and width. The problem is when I create the table, while it has padding, I can't get it to maintain it's height. I'm trying to avoid using as when I do, it creates the mouseover of highlighting text, and multiple clicks on the box can select the text.
Looking online, empty-cells: show; comes up as the constant answer, but it doesn't seem to keep the height. I've considered doing it as a series of inline-block divs, but then borders become messy, as the borders don't collapse.
I literally just have an empty table
<table style="border-collapse: collapse; empty-cells: show;">
<tr>
<td style="height: 1.3em; padding: 4px 6px;"></td>
<td style="height: 1.3em; padding: 4px 6px;"></td>
</tr>
</table>
I feel like this is an old HTML problem, and I'm missing some simple answer.
I had seen the question that was suggested as the duplicate, but as the answer there is 5 years old, I thought there must be something more modern for addressing this problem. If there isn't, I guess the visibility trick is the way to go.
Is there a specific minimum height that you want? If so, you can do something like this:
table tr td:first-child::after {
content: "";
display: inline-block;
vertical-align: top;
min-height: 60px;
}
Source code from omelniz originally posted here: Can I use a min-height for table, tr or td?
Try this
For <th> and <td> :
th:empty::before,td:empty::before{content:'\00a0';visibility:hidden}
For <td> only :
td:empty::before{content:'\00a0';visibility:hidden}
Description:
'\00a0' is code for single space
visibility:hidden to hide that single space
So I'm designing an org chart based on the table element and I have a problem. I'm using <hr> elements to create the connectors; however, I can't get the dead space inbetween elements to go away. I've spent the last hour trying to figure out how the hell to get it to work and I just can't seem to figure it out.
I've included a picture to show:
The other issue is more of a question I haven't really looked into but figured I'd ask anyway. How can I lock the height of my table items. I've locked the width just fine but I can't seem to lock the height to 70px.
And here is some choice code:
<table class="orgchart" cellspacing="0" cellpadding="0">
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td class="item">Director</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr class="divider"><td></td><td></td><td></td><td></td><td></td><td></td><td><hr width="1" size="20"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td class="item">Assistant to the Director</td><td></td><td class="item">Deputy Director</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
And the CSS:
.orgchart td {
width: 70px;
height: 70px;
text-align: center;
overflow: hidden;
white-space: no-wrap;
}
.divider td {
height: 20px;
}
.item {
border: 2px solid black;
}
And here is the CodePen: http://codepen.io/jacob_johnson/pen/GpEjmm?editors=110
There's a margin all the way around the <hr>. Remove the top and bottom margins from the <hr>. All browsers apply default styling to elements, though not always the same. As a result you will see reset and normalize stylesheets used to improve visual consistency and development pains.
Updated Codepen with CSS below added.
hr {
margin: 0 auto;
}
If I was doing this project I would find a simple grid framework to layout with DIVs or more than likely I would create this chart as an inline SVG.
This isn't actually an order form (as yet) but I think that best describes it. I want to create a grid of 3 images inline, then text below each, then repeat indefinitely. I tried turning each row into a unique table but alignment became a problem. Then I tried making one table and giving the image and text < tr >'s unique classes, but I'm having trouble getting the height of the text rows to shrink to a more aesthetically pleasing size, and also centering the text below the image. I tried to do this artificially with as many "& nbsp's" as was appropriate, but then the text started wrapping onto a new line and it messed all that up. Code and link to js fiddle below:
<table id="saladGrid">
<tr class="saladPics">
<td id="one"></td>
<td id="two"></td>
<td id="three"></td>
</tr>
<tr class="saladText">
<td class="text"><p> acorn squash, golden beets, pistachios</p></td>
<td class="text"><p> roasted eggplant, herbed ricotta, sumac</p></td>
<td class="text"><p> arugula, fennel, blackberries, quinoa, pickled shallots</p></td>
</tr>
http://jsfiddle.net/jshweky/5bTW8/
(On a side note, I'm new to stackoverload so if there's any protocol I'm not following with respect to posting, I'd be grateful for any tips/suggestions. Thanks!)
Have a look at this: http://jsfiddle.net/EX9f9/
If you have a look at the code below you'll notice a couple of things:
HTML
<table id="saladGrid">
<tr class="saladPics">
<td class="s1"></td> //I changed your classes 'one','two',etc
<td class="s2"></td>
<td class="s3"></td>
</tr>
<tr class="saladTxt">
<td class="txt"><p>acorn squash, golden beets, pistachios</p></td>
<td class="txt"><p>roasted eggplant, herbed ricotta, sumac</p></td>
<td class="txt"><p>arugula, fennel, blackberries, quinoa, pickled shallots</p></td>
</tr>
</table>
In your HTML I changed your id's one, two, etc to classes consisting of the same word/letter, only a different number, for better readability. (Those could also be ID's btw, the main point is the use of equal terms with only one differentiator)
CSS
table {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
border-spacing: 0px;
}
td {
margin: 0px;
padding: 0px;
border: 0px;
text-align: center;
vertical-align: middle;
}
#saladGrid {
width: 600px;
height: 400px;
}
#saladGrid table {
margin: 0 auto;
border-spacing: 30px;
}
.saladPics td {
width: 350px;
height: 350px;
background-position: center;
background-size: 350px 350px;
background-repeat: no-repeat;
border-radius: 50px;
}
.saladPics td.s1 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1989_zps38d802a7.jpg");}
.saladPics td.s2 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1483_zpsc4ca87cf.jpg");}
.saladPics td.s3 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1992_zps1b881869.jpg");}
In your CSS I removed all the repeated declarations and put them together in one overlapping class. Now, only the background-image has a separate rule for every separate element.
I removed a couple of rules you don't need (and probably added in an failed attempt to style the table to your liking).
At the start I added two rules: table and td. Those are two general classes I always put at the start of my CSS, it's alright if you overwrite some of it later by other rules, these just ensure that the browser doesn't doe any funky business.
I put the whole table in a div, to show you how to contain the size of a table (but notice that the height is still more than the 400px I gave it).
Notice the text-align:center; and vertical-align: middle; in the td rule. These alight your text horizontally and vertically. (The answer to your main question)
IMPORTANT: vertical-align:middle; only works on tables, no other elements. Keep that in mind!
About your first problem:
"...trouble getting the height of the text rows to shrink to a more aesthetically pleasing size..."
This is unfortunately a property of the table: it will form itself to the content and the space it has on the page. It will fill every inch it gets and will automatically stretch to fit the content. You CAN NOT (as far as I know) limit the size of one row of a table.
Only solution would be to put the table in a div and limit the height of the div so that the whole table gets squished together, and even then I couldn't tell you for sure how the table will behave.. you push it in a tiny corner, there's no telling what it will do:)
I am having a little bit of a hard time getting a CSS rule to work for me. I believe it has to do with the order the rules are applied, but I hope that maybe one of you who is no doubt more experienced with HTML and CSS than myself could help me out.
Basically my goal was to put a colored border around the currently focused text inputs (textboxes and textareas as well as drop downs). The CSS is fairly short (I think...) But the rule that is giving me trouble is at the very bottom (.userinput:focus)
body
{
font-family: Arial;
}
.header
{
color: #004c85;
font-family: Arial;
font-size: 14px;
font-weight: bold;
vertical-align: middle;
padding-bottom: 5px;
}
.titleCell
{
background-color: #004c85;
font-family: Arial;
color: White;
font-size: 12px;
font-weight: bold;
text-align: left;
padding: 2px 2px 2px 2px;
}
.subtitleCell
{
background-color: #aaaaaa;
font-family: Arial;
color: #092548;
font-size: 12px;
font-weight: bold;
text-align: left;
padding: 2px 2px 2px 2px;
}
.normalCell
{
background-color: #f1f1f1;
font-family: Arial;
color: #092548;
font-size: 9pt;
font-weight: bold;
text-align: left;
padding: 1px 2px 1px 2px;
}
.errorText
{
font-family: Arial;
color: #d01d00;
font-size: 9pt;
font-weight: bold;
text-align: left;
}
.button
{
font-size: 12px;
color: #f1f1f1;
background-color: #004c85;
}
.userinput:focus
{
border: 2px ridge #00a2ff !important;
}
I created a simple page with a single table and it worked fine (target browser here is IE).
When I create a large page though with multiple tables and divs, this rule doesn't seem to be applied in IE anymore. Upon reading I added the !important to the rule, but it didn't help me out. I downloaded Firebug, but the same page looks fine in Firefox (the border appears).
Any tips at this point would be greatly appreciated.
Edit: I can't post a link to the whole thing unfortunately. Below is the test page that I had success with. I can probably post a link to the larger HTML, but it would have to be downloaded and run locally.
<!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>
<title>CSS Demo Page</title>
<link href="base.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form name="FormName" method="post" style="text-align: center">
<table cellpadding="0" cellspacing="0" width="900" border="0" style="text-align:left">
<tr>
<td class="header">
Header
</td>
</tr>
<tr>
<td class="errorText">
Error Text
</td>
</tr>
<tr>
<td class="titleCell">
Title Cell
</td>
</tr>
<tr>
<td class="subtitleCell">
Subtitle Cell
</td>
</tr>
<tr>
<td class="normalCell">
Normal Cell
</td>
</tr>
<tr>
<td class="normalCell">
<input type="text" class="userinput" size="25" />
</td>
</tr>
<tr>
<td class="normalCell">
<input type="checkbox" value="ON" />
Checkbox
</td>
</tr>
<tr>
<td>
<input type="button" class="button" value="Button" />
</td>
</tr>
</table>
</form>
</body>
</html>
That is the test page that worked OK. Note I have the css file on a web server, but it is only internally accessible. I thought about doing jquery but I thought this would be easier. Apparently not.
Thanks again. If needed I can still probably post the HTML for the big page later.
Edit Again: I am looking at the markup now. It seems OK on the W3C sites, but maybe I am missing something. If anyone is interested, here is a link to the larger page HTML in a txt file. http://cloudstor.pogoplug.com/share/xGQzP43X9FsEq5Z1XqafYQ/LNtISrGuLxJsaxhZ3iPZUw/form.txt
I should probably also mention the CSS I posted previously is the only one in use. Also, although it doesn't really help much, the CSS works in Chrome as well as Firefox. IE is the lone holdout (big surprise there...)
Thanks again all for the links and comments. I am determined to figure this out.
Without seeing the full markup, my best guess is that you have either invalid markup on the page (ie unclosed tags, invalid characters), which can result in broken styles and page structure, sometimes differing between browsers, or your class declaration is being overridden somewhere else in your stylesheet. The focus selector is valid and jquery won't be necessary.
I can think about two things that can break down the selector:
Another stylesheet/ style tag has the same selector+property and includes !important too, and because of this - you can't see your own css.
The markup on your HTML page is invalid. Take a second and validate it using W3C Validation service.
Like what Ryet and Nadav said, you could have invalid html markup. But invalid html markup is not the only thing that causes problems, so does invalid css. Invalid css can involve missing brackets, absent semicolons, misuse of id's and classes, and so on. You can find invalid css markup using this site http://jigsaw.w3.org/css-validator/
Figured it out. And I feel very silly. Comments broke my page.
I am much more of a C, C++, C# kinda guy. It has been awhile since I have done much straight HTML from scratch. I was trying to create a template we could use going forward to base all of our HTML forms on. At the very top of the page I had a block comment explaining what the template is for (not too uncommon to place a block comment at the top of a code file explaining what it does, right?)
Long story short I took out bits and pieces of my HTML until all that was left was a single table, one row, one column and the text box. When that still didn't work, I thought about taking out the comment. The comment was the first thing on the page, above the
<!DOCTYPE ...
Thanks for your help. If anyone has any tips or links to best practices when using comments in HTML, I would be very thankful.
Thanks again for all your suggestions.
Can someone please help me, this is driving me crazy. I have seen answers to other questions on this site, but I just cant seem to apply them.
Basically I am trying to fix the widths of my tables in html dreamweaver. However it just doesnt seem to work.
My current code looks like this:
table align="center" style='table-layout:fixed' width="910" height="627" border="0"
but it still expands above the specified width.
I have tried also to do this this:
.fixed { table-layout: fixed; }
<td width="18" class="fixed"></td>
but that doesnt work either!
You could try putting all the styles you need in a class,
.fixed { table-layout: fixed; width: 910px; height: 627px; border: none; text-align: center;}
then just apply the class to the table:
<table class="fixed">
Also, could you clarify what you mean by "trying to fix the widths" in your table? Could you post some more of the code around the table, or the entire table itself?
May be you can try something like this.
<div style="overflow:hidden;width:910px">
<table>
<tr>
<td>...</td>
</tr>
</table>
</div>
Or you can give overflow:scroll if you need a scrollbar.
First thing to do: get rid of the HTML4-attributes like align, width or border and do this with CSS alone. It should be no problem to set an absolute width to a table.
Second, you don't need a table-layout: fixed; to set a fixed width for a table. <table style="width: 910px;"> should be enough.
Thanks for your responses.....I am quite new to this, but I will try to expand
Basically, below is my style sheet and start of code. I want, the body, and the top to tables to be a maximum width of 910. I am creating other tables inside of these, and when information is entered into the cells, it doesn’t wrap around, it just makes the page a bigger width…..I don’t want this to be possible
<style type="text/css">
body { background-color: #000;font-family: Comic Sans MS, cursive;font-size: 12px;color: #000;text-align:left
width="910" height="627" border="0" }
.mainbody {background-color: #fff;width="844px" table-layout: fixed;}
.background {background-color: #000;}
.banner_f { color: #FFFFFF;font-weight: bold;font-size: 36px;font-family: Verdana, Arial, Helvetica, sans-serif;
width="910" height="203" table-layout: fixed;}
</style>
'/Images/Buttons/Fixtures_Top.jpg','/Images/Buttons/Scorers_Top.jpg','/Images/Buttons/Reports_Top.jpg','/Images/Buttons/Contact_Top.jpg')">
width="844" height="68">
`