CODEWITHSUNDEEP
htmlcssemail
Parth
Parth

Reputation: 529

position relative/absolute issue in html mail

I am recently trying to send html mails but i am facing some issues with div position. relative/absolute.I tried to Google and found that positioning of div in not supported in email clients.

What i really wanted to do is..I have a image as below.original image

Now I need to draw a rectangle on the Image through html.What i have is just position of the rectangle on the image.Suppose for some coordinated it is on the house.Same as like below image

new image

Can any one help?

Upvotes: 1

Views: 9079

Answers (4)

Shiv Kumar Ganesh
Shiv Kumar Ganesh

Reputation: 3825

You can go for absolute positioning.I have written the sample code here. Please refer this link http://jsfiddle.net/shivkumarganesh/Fga2z/

Yeah table will also be efficient!

.table{
background:url('your image URL');
background-width:300px;
background-height:200px;
width:300px;
height:200px;
background-repeat:no-repeat"
}

<table class="table">
<tr>
<td></td>
</tr>
</table>
<!--Now make TD and TR tags and give them Custom height so that at least one cell is on the image.Then give that cell <td> a border eg.border:red 2px solid.-->

Upvotes: 1

Drkawashima
Drkawashima

Reputation: 9812

If you can't figure out why you're css doesn't work in the email you might wanna try using inline styles only. In the past I've found that some email clients seem to ignore classes and certain rules within the internal style sheets. the only thing that works properly are inline styles and tags such as B.

Upvotes: 1

avramov
avramov

Reputation: 2114

I have no experience with feature support in email clients, but couldn't you have a div where this image is set as the background-image, and use position:relative to place the other div where you need it?

Upvotes: 0

gherkins
gherkins

Reputation: 14983

From my experience position absolute should be ok to use.

just make sure you add at least position: relative to the container in which you want to position the rectangle. otherwise it'll be positioned absolute to the document body.

something like this should do the trick:

<div class="container">
   <div class="rectangle"></div>
   <img src="....">
</div>

.container{
  position:relative;
}

.rectangle{
  position: absolute;
  bottom: 20px;
  right: 20px; 
  border: 2px solid red;

}

Upvotes: 0

Related Questions