I have a td and want to put a bg-image in it. In know there are different problems with using newsletters with css on different clients.
I tried this:
<td style=" background-image: url('...absolute path...');
background-repeat: repeat-y no-repeat;
width: 15px;">
</td>
I tried also to add a class attribute to the td and putting the css in head.
Nothing works, the img does not appear.
EDIT:
Now I read from a German source that outlook does not support many css attributes like
background-image
background-position
background-repeat
display
float
position
How can I add a background image to a td element?
I don't think that background image in css is supported in Outlook like that.
http://www.campaignmonitor.com/css/
I think, that the only way to put an image in a td is:
<td><img src"#" /></td>
Of course if you don't have other content than the image.
Related
We're using the following code as a vertical spacer in an HTML email:
<div style="height:14px; font-size:14px; line-height:14px;"> </div>
This works well everywhere -- except Hotmail where it creates a very large space. We've researched this a bit and it seems Hotmail embeds CSS by default that causes a lot of issues.
We've included the following code to try to address the issue, to no avail:
.ExternalClass, .ExternalClass p, .ExternalClass span,
.ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%; margin: 0; padding: 0;}
Hoping that someone else here might have a solution or even a workaround.
If its just a spacer then why not use a table with a spacer image instead. Most email clients prefer a table over a div with inline style and will render it correctly. Something as such:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="10">
<img src="http://media.instantcustomer.com/22033/0/5_spacer.png" alt="" width="1" height="10" border="0" style="border:0" />
</td>
</tr>
</table>
Change the height from 10 to whatever height you need. You ll have to specify the height in the td as well as the img element. Replace the spacer image if you like. You might even be able to get away with not using a spacer image at all.
You can use this: <br> <br> or you can wrap it in a font tag to set the height. You can also use padding in your <td>, or a table as saganbyte suggested.
Just note that Outlook wraps <p> tags around tables, which adds about 15-20px of vertical spacing if someone forwards your email. Using a table rows instead adds only a few pixels. With this in mind, always keep your background colors the same so that you don't get an unwanted line.
I'll provide direct link for people who wants to see it live.
Just hover one of the table listing and you'll see there is always a small space under images. I've tried padding, margin, searched stackoverflow for it and used border spacing, border collapse etc. but nothing helped so far.
I would like your help. What's the problem and what am I missing?
Problem isn't the table actually, img tags are inline elements and have that bottom spacing by default (something with line-height I guess, don't really know why).
Solution: div.browseBuilds tr.browseBuilds_piece img { display: block; }
Add display: block to img.
.browseBuilds_piece img{
display:block
}
See this similar question. Because img is an inline element, whitespaces in the HTML source code around the img tag matter and will be displayed. Either remove the whitespaces from the code
<td style="vertical-align: middle;"><img src="./themes/default/images/builds/eski.jpg"></td>
or display the img as a block element, as Michal has pointed out.
User cellpadding="0" and cellspacing="0" as a table attribute.
<table border="0" cellpadding="0" cellspacing="0" >
The problem could be cellspacing and cellpadding but im not sure ... really good tool for this stuff is firebug , inspect element you will see all used styles etc.. or try to fix td height on 50px like your img
I am trying to figure out how to make this work. Shouldn't the background:red of the outer table's td overwrite all other ones? And why does this example end up with a yellow background although that's the element nested furthest down in the DOM?
<style type="text/css">
table, td, div {
height: 200px;
width: 400px;
}
</style>
<table class="outer" cellpadding="0" cellspacing="0">
<tr>
<td style="background: red">
<div style="overflow:auto;background:green">
<table class="inner" style="width:800px">
<tr>
<td style="background:yellow"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Here's a JSFiddle for this.
To wrap up... I am trying to overwrite the inner table cells' background color with a background in the parent div as well as the parent td of the outer table. Is that possible at all?
the background in the Td has the last say. so you technically can't do it with css alone. even if you put an !important in the div style it won't work.
anyways, you can probably fix that via js and replace the color of the td with another one.
bcz its css default behavior if u give style to parent tag than it automatically inherits by child html
if u want other css in child tag than u have to give style to that particular tag
which override ur parent style
The second td is always drawn above, and therefore over the top of, the background of the first td. As you are using the style attribute, which always takes precedence over any CSS applied in a style block or external CSS file, you will not be able to change this behaviour without resorting to JavaScript or moving the styles from the style attribute to a style block.
Using jQuery, you could achieve this with something similar to the following:
$('.inner td').css({
'background' : 'colour or image here'
});
I have a table with a background image using css property background-image. In table I have some images using the <img. Images <img table are above the background image. I would like the background image overwrite the images <img as with the text. Is that possible?
Code Example:
<style>
#content { background-image:url("background-image.jpg"); background-repeat:repeat-y}
</style>
<table id="content">
<tr>
<td>Some text.....text.....text
Image: <img src="quadrado.jpg" />
</td>
</tr>
</table>
"I would like to display the two images. The background image
above the quadrado.jpg ! Like a watermark"
Sounds like you want an overlay. You can't do that with just CSS.
But you can come close by adding styles like so:
#content
{
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
#content img
{
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
.
For more of a true overlay, you'd need to code it into your HTML or use javascript to add it on the fly.
Take a look at this page. It uses javascript to generate overlays for blocks with the class OverlayTheBackground.
There are also jQuery plugins that are supposed to generate overlays.
Perhaps post a picture of what you want.
But, it sounds like all you need to do is add this style:
#content img {visibility: hidden;}
I'm not sure I understand the question completely, but if you want the background image to show through parts of the content images, you will need to use png's or gif's as they permit parts of the image to be transparent and jpg's don´t.
I have the following code that I am using to display a search tool with a scrolling results section. In IE the code works fine:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html style="background:black;height:100%;width:100%;">
<head>
<title>Report</title>
</head>
<body style="background:black;">
<table HEIGHT="100%" WIDTH="100%" style="background:red;">
<tr>
<td>
Search Area
</td>
</tr>
<tr>
<td HEIGHT="100%" WIDTH="100%" style="background:orange;">
<div style="overflow-y:scroll;height:100%;">
<table style="width:100px;height:1000px;">
<tr>
<td style="background:white;">
Results Area
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
But when I set the meta tag to use IE8 formatting by adding:
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
The bottom DIV tag expands beyond the page. I have tried a number of options though and can't find a way around it without actually specifying a height for the values. Which will not work as I want the page to take up 100% of the screen no matter the size of the browser window.
Any help would be much appreciated.
This metatag enables correct CSS rendering, and in CSS – by design – height:100% basically doesn't work.
You need to give specific height to every single ancestor of the element, including <body>, <table>, <tr> and even <tbody> element that's automatically inserted by the parser.
Anyway, this layout can be achieved in easier way:
.topBanner {
position:absolute; position:fixed;
height:2em;
top:0; left:0; width:100%;
}
body {padding-top: 2em}
this will degrade nicely in IE6, and unlike overflow, will work properly in Mobile Safari.
Edit:
Removing the DOCTYPE declaration will make height="100%" work but it puts the browser in quirks mode though, which is not desirable.
Generally speaking using tables for layout is discouraged, you should use CSS instead.
For example: http://jsfiddle.net/rf649/7/
HTML
<div id="search">Search Area</div>
<div id="results">Results Area</div>
CSS:
#search {
background-color: red;
position: fixed;
height: 150px;
width: 100%;
}
#results{
background-color: orange;
position: fixed;
top: 150px;
width: 100%;
bottom: 0;
overflow: auto;
}
You should set all margins and paddings for the parent elements to zero in order to get what you want.
Update: Sorry, didn't understand the problem at once. Ben's hint should be the better one I assume. :)
Update 2: Oops, since Ben has deleted his answer my first update doesn't make any sense. Try setting the body's height to 100%, that should solve the problem.
My understanding about cross browser CSS is not that big so it might not be the best solution, but it's a solution.
As far as I've seen, you always have to set the height/width of the container that you want to overflow, so you need to set them.
To deal with the resolution I would suggest you to add a jQuery script at the onReady event that dynamically would fix the height and width making the overflow work.
I had the similar problem like you and finally the solution was to modificate a CSS line entry that had an !important modificator for a fixed height declaration. In the HTML code the class (defined in CSS) had the height assigned to 100%, but the CSS applied the !important during the style loading.