This is the code that I trying
CSS
<style>
.myposition {
position:absolute;bottom:0; margin-bottom:0px; margin-top:30px;
}
</style>
Code
<td width="300" valign="top" style="position:relative;">
<div style="top:0">
<table width="310" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">content</td>
</tr>
<tr>
<td align="center" valign="top">content</td>
</tr>
</table>
</div>
<div class="myposition">
<table>
<tr>
<td align="center" valign="bottom">content</td>
</tr>
<tr>
<td valign="top" align="center">content</td>
</tr>
</table>
</div>
</td>
This code is working perfectly in IE as I want but not going well in all other browsers, the div with absolute positioning is overlapping the div above it.
What I am trying to make is this, please check
http://www.spoiledagent.com/ads/Help.jpg
You can check it at http://www.spoiledagent.com/members/about_hanu.php
I have given access to this link
Gecko doesn't support table cells being absolute containing blocks. That's on the one hand a bug in Gecko and on the other a lack in the spec (which explicitly says that the behavior of specifying position: relative on a table cell is not defined).
Related
I want to write the simpliest example of the following image
My example should work in ie6,7,8,9 and so on. So I can't use float or anything helpfull. I made jsFiddle using table
<table width="500px">
<tr>
<td width="45px"><span>e-mail</span>
</td>
<td align="center"> <div style="border-bottom: 1px solid;">test#gmail.com</div></td>
</tr>
<tr>
<td width="45px"></td>
<td align="center"> <span>(email)</span>
</td>
</tr>
</table>
, but the bottom (email) have margin from the line.
And I want that everything was like on my first image. Thanks
I have tried this.
Check this jsFiddle link
<table width="500px" style="padding:0px; border-spacing:1px">
<tr>
<td width="45px" style="padding:0px"><span>e-mail</span>
</td>
<td align="center" style="padding:0px"> test#gmail.com <hr noshade style="border-top:1px; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-top: 0; -webkit-margin-bottom: 0;"/> </td>
</tr>
<tr>
<td width="45px" style="padding:0px"></td>
<td align = "center" style = "margin-top:0px; padding:0px">(email)</td>
</tr>
The “margin” you are referring to is partly spacing between cells, partly padding inside the cell, partly leading, and partly spacing in the font. In your approach, the simplest fix is probably to set cell spacing to zero and to move the cell content upwards a bit, using relative positioning.
<table width="500" cellspacing="0">
<tr>
<td width="45">e-mail
</td>
<td align="center" style="border-bottom: 1px solid">test#gmail.com</td>
</tr>
<tr>
<td width="45"></td>
<td align="center"><span style="position: relative; top: -0.15em">(email)</span>
</td>
</tr>
</table>
apply border-spacing: 0 to the table's style (border-collapse: collapsewould work too, aswell as cellspacing attribute)
add padding: 0 to the tdcontaining <span>(email)</span>
To increase the space between the upper e-mail-adress and the bottom border (which you did not mention explicitly but is not the same as your example image):
move the border-bottom style from div to its parent td
add a padding-bottom to the same td
I'm having trouble with a table's behaviour in Firefox. I want a table consisting of two columns in the ratio 3:1. The first column includes 3 images in a second table which should resize to fit into the column.
In Chrome the images resize to fit into the first column, which is correctly set to 75%. They do this whether I specify a max-width or do not give them any size attributes. However, in Firefox, the images do not resize and instead the cell expands to be greater than 75%, meaning that the contents of the second column becomes squashed.
The structure of the code looks like this:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<table cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td>
<img src="image1.jpg" style="max-width:625px;" />
</td>
<td rowspan="2">
<img src="image2.jpg" style="max-width:240px;" />
</td>
</tr>
<tr>
<td>
<img src="image3.jpg" style="max-width:625px;" />
</td>
</tr>
</tbody>
</table>
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
How can I adapt this code so that it works correctly in Firefox as well as in Chrome? I've read other related questions, but haven't been able to find a solution I can get to work.
P.S. Please no comments on how I shouldn't be using CSS like this. I have my reasons for not using a proper stylesheet while I'm playing around.
Unless I'm missing the boat, why don't you simply assign a relative width to the image? A value of 100% will ensure the image resizes in tandem with its parent table cell:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width:100%;" />
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
ref: http://jsfiddle.net/j26Fm/
The trick here I would say is table-layout: fixed;. It does require some additional rules but table-layout is what brings it all together.
Check out: http://codepen.io/pstenstrm/pen/kLKxz
This is worked for me, in IE, FF and Chrome.
<table style="table-layout: fixed; width: 100%; border: 0; cellspacing: 0; cellpadding: 0;">
and
<tr valign="middle">
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
I've checked out a few posts, and tried them. Didn't work. This may become a decision and tell clients this is what it is, but I don't want to come to that.
So after testing with Litmus, my main issue is the borders(left and right) vs the top and bottom image not lining up correctly on outbook 2007/10 vs everything else.
<body>
<style type="text/css">
body{
color:#415b7c;
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
padding:0;
margin:0;
}
table {border-collapse: collapse;}
</style>
<table width="100%" bgcolor="#ffffff">
<tr>
<td><!-- header -->
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr valign="bottom">
<td>
<table width="600" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr><td>
<img src="http://wearehmc.com/emailTemp/VSAC/top.png" width="600" style="display:block">
</td></tr>
</table>
</td>
</tr>
<tr valign="top">
<td>
<table width="600" align="left" bgcolor="#ffffff" style="border-left-style:solid; border-left-color:#3d5b83; border-left-width:2px; border-right-style:solid; border-right-color:#3d5b83; border-right-width:2px; border-collapse: collapse; ">
<tr>
<td>
client log
</td>
<td>
<table cellpadding="10" style="color:#576276;">
<tr>
<td>
<p style="font-weight:bold">
Text
</p>
<p>
text
</p>
</td>
</tr>
</table>
</td>
<td>
client logo
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="left" cellpadding="0" cellspacing="0">
<tr>
<td style="color:#ffffff; font-size:22px; font-weight:500; line-height:30px">
<table width="600" align="left" bgcolor="#659acf" cellpadding="20" style="border-left-style:solid; border-collapse: collapse; border-left-color:#3d5b83; border-left-width:2px; border-right-style:solid; border-right-color:#3d5b83; border-right-width:2px; border-collapse:collapse;">
<tr>
<td style="color:#ffffff; font-size:24px; ">
text
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="left" cellpadding="0" cellspacing="0">
<tr><td>
<img src="http://wearehmc.com/emailTemp/VSAC/bottom.png" width="600" style="display:block">
</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr></table>
I've taken out client copy and logos.
As I've said it may come down to a decision of not letting it line up in outlook 2007/10, while letting it work in others.
So if anyone has any suggestions, it would be most helpful.
For outlook (And gmail) You need to specify border="0" on your images.
<img src="/" width="" height="" alt="" border="0" style="display:block">
This should be on every image you use in your email, even spacers. (In fact, especially on spacers, since those will create unwanted empty space without any content)
Also, Outlook has trouble rendering cell-padding and spacing (2007 and 2010 both use microsoft WORD as their rendering engine, I'll let you imagine how great that is to render html-emails).
So you should really be using nested tables instead of cell-padding, with spacer images to create the inner spaces of your sections.
Oh, and I see that all your styling is not inline. This will cause problems with your html-email stability. (gmail will strip every styling that is not inline, as well as the #000000 color on links (use #000001 instead)).
Oh also. Border styles and colors. Those will not display properly everywhere. The solution is again nested tables. With bgcolor and 1 / 2px width spacers to give the illusion of borders.
Hope this all helps. (I know this sounds like a lot of errors in your html-email, but once you get the hang of coding for the worst possible mail clients in mind, it'll become second nature! ;) )
I am placing a heading/title on a HTML page using following code:
<table width="100%" height="55px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="height:10px">
</td>
</tr>
<tr>
<td style="width:105px;"></td>
<td align="left" style="padding-right:10px;padding-left:10px">
<div style="font-family:quicksand;font-size: 28px; color:##bdbdc0;z- index:1000000;position:relative;">
De Graef <font size="2">Landelijk & Sfeervol Wonen</font>
</div>
</td>
</tr>
</table>
Other content is in other tables.
When i zoom in or zoom out, or simply change resolution, this text is not moving it's position in sync with the other page elements.
Any ideas?
Change your header row to this :
<tr>
<td align="center" style="font-family:quicksand;font-size: 28px; color:##bdbdc0;margin-left:-50px;background-color:##4D4946;">
<table width="956" border="0" height="100%" cellspacing="0" cellpadding="0" style="background-color:##4D4946;">
<tbody>
<tr>
<td style="background-color:##4D4946;">
<br>
<br>
<img style="background-color:##4D4946;" src="images/logonew.png">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I'm helping you here but should seriously consider rewriting all of it in a clean and modern way, most of your code is deprecated :
Use appropriate HTML markup for segmenting your document
Use <table> only when then you need an actual table
Use separate CSS files for keeping your markup clean
Read the W3C recommendations about all of this
It's been a long day of designing and I ran into a problem today. The website www.dcninc.com/newtest/security_testing.php is a new design I'm working on at work right now.
If you view it in Firefox you will notice there is no padding on the 2 right boxes (I did that on purpose to trouble shoot my problem) However if you view that same page in IE, it adds padding to the right side. Here is my CSS and HTML below.
http://pastebin.com/hRxZp9ub
http://pastebin.com/YwSYn7ti
You have elements nested within each other that have widths of 250.
Like this,
<table width="250"><tr width="250"></tr><table width="250"></table></table>
Since there has been some width used up with padding, there is not 250 pixels of free space for you to put inside the table. I would try lowering the width of the inner elements by 10-20 pixels.
Hope this helps. Here's the markup I was referencing,
<table border="0" cellpadding="0" cellspacing="0" width="250">
<tr>
<td width="250" height="9" style="background:url(Images/right_box_gray_top.png) no-repeat;"></td>
</tr>
<tr>
<td style="background:url(Images/right_box_gray_middle.png) repeat-y" width="250">
<div class="list-right-info">
<table border="0" cellpadding="0" cellspacing="0" width="250">
<tr>
<td width="40"><img src="Images/icons/phonepic.jpg" border="0" /></td>
<td><center>CALL US TODAY<br /> 800.xxx.xxxx</center></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="background:url(Images/right_box_gray_bottom.png) no-repeat" width="250" height="108"></td>
</tr>
</table>
Try to add this to the header
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->