I am trying to create a progress update e-mail. I have two main percentage calculations:
Actual Percentage: What is the actual number of completed items, used to fill the progress bar.
Target Percentage: What was the target number of completed items for this time, used to put a vertical line on the progress bar.
I create the html file dynamically from a Scala back-end task. I am copying created html string to a test.html file, see the code:
Style section:
.vl {
border-left: 3px solid black;
height: 15px;
position: relative;
}
Body section:
<table style="border:0;" cellpadding="0" cellspacing="0" width="250">
<tr>
<td style="width:0.0%; background-color:red; float:left; height:15px;"></td>
<td style="width:100.0%; background-color:#cccccc; float:left; height:15px;"><div class="vl" style = "left: 98.75777%"></div></td>
</tr>
</table>
The problem is, when I open the test.html file on a browser (chrome, explorer, edge all the same) I can see my progress bar (sort of) seems correct:
But when I send the e-mail, outlook doesn't show "target percentage":
I've faced the same issue for example with progress tag, it was perfect in browser but not working in the mail so I used td's with percentages. But since this vertical line is completely defined css style by me, I couldn't find a work-around for this one.
I've found which features are not supported on Outlook on this website. For my particular example it was position tags.
I've removed position tags and converted whole structure to a table so I could find a work around for position tags.
Related
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 have an issue that seems to be isolated to Chrome...which is usually NOT the way it goes. However, I have recreated the issue as purely as possible in the following plunkr.
http://plnkr.co/edit/k0viyc
To illustrate the problem, here is an image that displays the border in the highlighted row in Chrome and how it isn't showing in IE.
If you remove either of the following rows:
<tr class="spacer">
<td colspan="14" class="noBorder noBackground">
*** By removing this row, the extended border goes away ***
</td>
</tr>
You will see the associated border shows/hides.
We've been through lots of tests on this and can't isolate the problem. The primary css remains in the plunkr, including the inline styles and classes that are primarily byproducts of related bindings.
I would like to know if there is an error in the current design or if this is truly a bug in Chrome. If it's a bug, what is the least common elements here needed to recreate it? Is it worth submitting as a bug or is this just going to be a scenario we should just try to avoid.
Thanks for your time in advance.
Looks like to be a Chrome bug.
Minimal showcase reproducing it
.test {
border-collapse: collapse;
}
td {
border: solid 1px blue;
}
.no {
border: none;
}
<table class="test">
<tr>
<td>one</td>
<td class="no">two</td>
</tr>
<tr>
<td class="no" colspan="2">double</td>
</tr>
</table>
Chromium tracking (somehow) related border rendering bug
A little disturbing the mention
It's a known (old) issue in our table code. Collapsing borders are
determined based on adjacent cells and our code doesn't deal correctly
with spanning cells (we only consider the cell adjoining the first row
/ column in a row / column span). On top of that, our border
granularity is determined by the cell's span.
To fix this bug, we would need to overhaul our collapsing border code,
which is a big undertaking.
In conclusion:
If the table has border-collapse
and the cell is colspaning
Then different border settings (for that cell, implicitly) will fail
Posibilities to fix it:
Setting border-style: hidden to the cell has higher priority and will hide all the borders (not good)
Removing colspan in the spacers
or maybe remove fully the spacers rows and handle the display without them.
Some glitch related to tr.spacer.
As a workaround set colspan=7 to td in tr.spacer.
Since this seems to be a bug with Chrome—instead of using a colspan, you could write out the remaining cells needed to complete the row, and be sure that they don't have a class that includes a border.
This:
<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="3" class="no-border"> </td></tr>
Would become:
<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="2" class="no-border"> </td><td class="no-border"> </td></tr>
I had to use border-collapse, and was having the same problem. This simple HTML markup change worked for me.
After days of this issue being on my mind, a super hacky solution finally hit me.
Set the border color to the same color as your background.
td {
border: 1px solid (background color);
}
I am preparing now custom home page to my browser. I would like to few divs displays my favorite websites. However, since I do not have lots of space, I would like to display only the small fragments, with major sections. Is there a way to put excerpts with HTML? I mean the display, for example, to google put in a frame displaying only google-doodle and bar display (shift of tens of pixels to the right and down). I using this code, but i can't add right and down shift :
<iframe src="http://www.google.com" style="width: 90%; height: 300px"></iframe>
I will be grateful for any advice.
Warning : Google website it's only examples. I need to put in a few divs completely different pages. I am not concerned here with a static screenshot, but about full-working piece of the pages.
I make a graphic depicting what I mean :
I've created a jsfiddle with - what I believe is - what you're looking for: http://jsfiddle.net/ctwheels/3g47mjtk/
Set the width and height of iframe to the webpage size and then clip it down to the size you want. You can remove scrolling="no" in the iframe tag if you'd like.
HTML
<div id="outerdiv">
<div id="innerdiv">
<iframe width="600" height="660" src="http://www.wikipedia.org" scrolling="no" frameborder="0"></iframe>
</div>
</div>
<p>Set #outerdiv to size of #innerdiv. Blue background is so you can see what has happened to the iframe</p>
CSS
#outerdiv {
position: relative;
width:300px;
height:300px;
background-color:blue;
}
#innerdiv {
position: absolute;
top:-160px;
left:-200px;
clip:rect(160px 400px 360px 200px);
}
If Chrome is your browser, then I believe there's functionality to get screenshots/snapshots of your favorite websites built into its extensions business (which is really just lots of javascript and stuffs). Might want to look into creating an extension for Chrome that becomes your default/new-tab business (there are already a bunch out there in the Chrome Store).
I am helping a friend with his website (URL: http://mk7vrlist.altervista.org/databases/test.html). I used a table for the design and I put each single inputbox in a <td> .. </td>. I used Javascript for save the datas and PHP for upload them on the server. My problem is that when an user open this page, the table is not well aligned according to the background.
Screen of my desktop.
As you can see, the table is insede the black rectangle, but with other screen sizes the looking is not the same. For solve this problem I used the following code:
CSS:
body {
background-image:url('pictures/bgframe.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
input{
text-align:center;
}
In the table I used this code:
<table id="tab" border="0" style="width:1200px;" align="center">
<tr>
...
</tr>
</table>
This code is not working because with a smaller screen, the align of the table is not the same.Can you help me? If you want, here there is the entire code.
You probably should try relative CSS property, like: width:100%; (instead of hard-coded value in px) in order to scale it properly. Also, it might be useful to explicitly set HTML5 <body> CSS properties: padding:0;margin:0;
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;