I have created a table in html for an email (FYI this is not for spam, it's to be used internally at the organization I work for). CSS is pretty much out of the question since we use Outlook and Office 2007 (which will not render the CSS properly - nothing worked on that front). I have 2 cells side by side - one has a background image with text over top, the other has a ttile using an h1 tag I created.
The issue: when I input a 2-lined title in the cell adjacent to the one with the background pic, the spacing at the botttom is so large the background picture duplicates part of it vertically (even though the text in the adjacent cell is not larger than the pic). I have tried to specify the padding, but it doesn't change anything.
My rule for the h1 tag looks like this:
td.leftCol h1 {
color: #003152;
font-size: 0.9em;
}
The code for the cells in question is this:
<tr bgcolor="#FFFFFF">
<td width="150px" height="42px" class="leftCol" background="/news/newsletters/images/leftcol_box.gif" align="right"><font color="#FFFFFF"><strong>Text </strong></font></td>
<td width="298px" class="leftCol" style="padding: 5px 0px 0px 0px;"><h1>New Medical School in New Brunswick</h1></td>
</tr>
Any suggestions?
Unfortunatly, at least Outlook 2007 ignores all background related CSS-Tags and from my experience, renders margins/paddings totally different or not.
Try to create the HTML in Word if it is possible, at least Outlook07-10 and Word share the same render-engine :)
In case you have same image for all rows, put it in css class like below
background-image: url("http://yoursite/news/newsletters/images/leftcol_box.gif");
background-repeat: no-repeat;
Related
I am doing my first html homework and one of the requirements is to display the "greater than" sign in combo with two dashes within a linked text (as shown in the picture, hope you can see it).
Here's what it looks like for me:
Here is my code:
It mostly depends on the font sizes and line-heights, so I would say you use SVG icons for such manners. See Material Icons for such manners. But if you want it in plain font as you have shown, you could use this CSS and HTML
div {
display: flex;
border-bottom: 1px solid black;
width: fit-content;
cursor: pointer
}
<div onclick="Task1.html">
<p style="margin: 0;"><</p>
<p style="margin: 0; margin-top: -2px;">--</p>
<p style="margin: 0; margin-left: 8px">Back</p>
</div>
But I'm saying it again, I would never prefer this approach!
You should not use your current textual method. Your course teacher is approximately 20 years out of date on how HTML elements are used now.
Instead using HTML symbols to draw a perfect arrow, in any font size and any line height.
<div>
<a href='Task1.html'>← Back</a>
</div>
This is cleaner (both with CSS and HTML), simpler and always works across any browser and at any time.
There is a huge list of possible HTML entities you can use so you don't need to choose the same arrow I have used here for example.
If you want more complex glyphs (icons) then you can employ something called font-awesome which has lots of these and has a free version. This system is already used by millions of websites. This uses CSS to load a custom font with custom shapes in it, for more complex things like "home" buttons, and envelopes, and big business brands, etc. etc.
I made a report of Qweb in odoo 10. Put my css in tag and place it in ".page" class div. Like this
<div class="page">
<style type="text/css">
.header,
.footer {
display: none !important;
}
</style>
</div><!--end of page-->
It is working perfectly on screen but when I generate PDF or take print from the screen by CTRl + P. It doesn't shows the css colors, backgrounds, padding and margins. I have consulted following link:
Plus I also have one solution. If we apply this tag it reflects some of the properties on the printing page.
t-attf-style="background: #333;color: #FFF; padding: 10px 0px; margin: 0px 0px 0px 6px;"
Is there any way to print the backgrounds and some different font colors on printing page other than these options. The first link is not making any changes and the second solution don't work for all properties plus its very time taking to place this tag with all the HTML tags.
I am facing this problem from last one year. That would be great help and a new learning If someone helps me sort this problem.
Thanks
Well the right answer is always the one through that separate module of defining and calling color fields as done in custom invoicing module. But I suggest a hack. Create images of that color and put them on that area with position: absolute and adjust the remains(text) on it. Plus for font and other things t-attf-style works perfectly.
I am working with an HTML table that is misbehaving when it comes to semi-long lengths of text. The picture below is worth 1000 words. In the first cell shown, the text "Embroidered Lettering Only" becomes stretched out as far as 'between character spacing' goes. It looks like its happening on the next cell as well in the "FLOSS" text.
Is there an attribute that I can use to prevent this behavior? Most of my search results have mostly produced table spacing issues, not text inside of a cell. The only attribute on the table that relates to size is <table width="100%"> I would prefer to conquer this with an inline attribute, but I can work with almost anything.
Note that I have tried letter-spacing= "0" and other values, to no avail. It is modifying the spacing behavior, but a value of 0 does not change this to normal spacing in the screenshot example.
I don't think it matters, but this is HTML that is being converted to a PDF through the BFO engine, within a NetSuite environment
I've come across this issue using Netsuite / BFO, the solution is to use this CSS:
td p {
text-align: left;
}
Source (login required): https://usergroup.netsuite.com/users/forum/platform-areas/customization/bfo/397738-how-do-i-prevent-text-justification-advanced-pdf-freemarker-bfo
Marc B mentioned it in his comment, you probably have text-align: justify; somewhere in your CSS for the table. Try tracking that down and changing it to text-align: left;
For example:
table td {
text-align: justify;
}
Would want to be changed to:
table td {
text-align: left;
}
That being said, it's hard to know for sure without seeing your current markup and CSS, so it would probably be a good idea to add that to your post.
This works on Gmail and Mobile Exchange but NOT outlook 2010 (though padding is supposed to work in 2010?).
<img src="http://coolguys.org/signature/georgeWcool.jpg" alt="Cool logo" style="display:block;padding-right:20px;">
With or without the display block the above is completely ignored in outlook. And just results with the text next to it, mashing right into the side of the image. Again, resolves great in Gmail and Mobile Exchange.
I have text to the right of this image, so the use of: is a very messy option. Any other similar ideas? (similar = works most places)
Update for #Mike "bit more code" below:
<tr style="height: 50px; font-size:12px;">
<td><img src="http://coolguys.org/signature/georgeWcool.jpg" alt="Cool logo" style="display:block;padding-right:20px;"></td>
<td style="color: #002953; max-height: 20px;">
<span style="font-size:12px !important; font-weight: bolder;">
This one time at band camp Lorem Ipsum</span><br>
<span style="font-weight: bolder;font-size:12px !important;">Jeepers HTML emails suck lorem ipsum<br>
</span>
<br>
<!-- etc -->
Use padding on td tags in outlook. Padding is not supported on Img or div tags. Check out http://www.campaignmonitor/css to see more about CSS compatibility across email clients.
Padding is supported in Outlook, no matter what people tell you. It just depends on where you define it.
I would advise against putting padding on an image.
Remember Padding is inside an element, Margin is outside of an element, so in this case you're better adding it to the wrapping table cell of your image.
You also have another option here which is to give your wrapping table cell a width. This width should equal the width of the image + 20px to account for your padding. Then you have no need for padding. Obviously this only works if you have a clearly defined width to work width which you haven't from what I can see in your HTML. If your element will always be one width, add the width to the Image tag.
This way the second Table cell with the text will take up the rest of the available space in that table and always be 20px to the right of your image
What is the best way to go about displaying an html table with text in the background of each cell? I am making a calendar and I would like to have grey dates in the background of actual text.
The only thing I can think of at this point is to have the date and the cell content in separate divs that float over one another but even that isn't implementing well within a table.
By the way using an image to display the date is not really an option IMHO.
Use relative positioning in the content span:
<tr>
<td>
<span class="day">6</span>
<span class="contents">Contents go here</span>
</td>
</tr>
And in CSS:
span.day {
line-height: 20px; /* just to give it a height */
display: block;
color: #aaa;
}
span.contents {
position: relative;
top: -20px;
}
Now the spans are overlapping, with contents over day number. You might want to adjust the position but this should work.
Even though this would work, I would advise you to use images. You can embed all the required dates in one image file (the CSS sprite technique), it gives you greater control with less browser specific issues.
Hmm... if I understood correctly, the way I would do it is probably something like the following in each cell:
<div class="cell_container" style="position:relative;">
<div class="cell_bg" style="position:absolute; width:100%;
height:100%; z-index:0; color: gray;">29/12/2009</div>
<div class="cell_fg" style="position:absolute; width:100%;
height:100%; z-index:1;">Jim's birthday</div>
</div>
Naturally, you can move the styles into a seperate css file. You might also be able to do away with the container div and just apply the "position:relative;" style to the containing cell. The major downside to this method is that you will lose the ability to vertically align in IE, without some trickily implemented workaround.
I realize you said that using an image is "not an option IMHO", but may I suggest that using images would give you a lot more flexibility in the appearance of the date. You could use any font available to your image editor, rather than the limited set of fonts you can count on in a browser. And all sorts of image tweaking tricks could be aplied that would be immpossible in the browser.