So I have to pages which are the same. Each are displaying some articles in a table layout. The table layout and CSS are the same. However, the one page is listing hundreds of archive articles which after it gets about 80% loaded, the table cell that contains all the text shrinks to about 30% of the actual row width.
However, there is nothing different on the layout, properties, CSS. The row containing the cell that is shrinking is the right width. The odd thing is even if I put a "width="100%" on the cell in question, it still is short of the row's width by about 20%.
Any thoughts, suggestions?
NOTE: I removed the text and just left the actual layout and cell/table/row properties.
Correct page:
<tr>
<td>
<table width="100%" cellpadding="4">
<tbody><tr>
<td width="100%" valign="top" align="left">
<a class="docnavigation" href="removed link ">
<strong></strong>
</a>
<br>
<span class="steelNewsArticleDate"> </span> - <span class="Normal">
<br>
</span>
</td>
</tr>
</tbody>
</table>
Problem Page:
<tr>
<td>
<table width="100%" cellpadding="4">
<tbody><tr>
<td width="100%" valign="top" align="left">
<a href="removed link" class="docnavigation">
<strong> </strong>
</a>
<br>
<span class="steelNewsArticleDate"></span> - <span class="Normal">
<br>
</span>
</td>
</tr>
</tbody>
</table>
Look into the width of the <td> that contains the table. Setting the width to 100% only tells the table to expand to 100% of its container's width.
The problem had to do with a missing tag from a Wysiwyg editor cleaning up some bad HTML incorrectly. So it was forcing what would have been a parent row into a child table row.
Related
The structure of my table is
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="404">
<img src="assets/Hero-Image2.png" width="404" height="192" style="width:404px;height:192px;border:0;margin:0;outline:0;"/>
</td>
<td width="396" bgcolor="#00188F">
<h1 style="color:#FFF;font-family:Segoe,Tahoma,Verdana,Arial,sans-serif;font-size:16pt;font-weight:100; margin-bottom:10px;">Simpilfied IT management for any enterprise</h1>
<h2 style="color:#FFF;font-family:Segoe,Tahoma,Verdana,Arial,sans-serif;font-size:14pt;font-weight:100;">Gain control over any hybrid cloud with our cost-effective all-in-one cloud solution</h2>
</td>
</tr>
</table>
aand I want the image inside the first cell to have the same height as the second cell (so that the image blends into the background color of it. I know there are alternative ways of doing this, but I'm constrained since this is an HTML email for Outlook).
Right now the right cell is always having a height of 196px, even if I strip its contents to nothing:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="404">
<img src="assets/Hero-Image2.png" width="404" height="192" style="width:404px;height:192px;border:0;margin:0;outline:0;"/>
</td>
<td width="396" bgcolor="#00188F">
</td>
</tr>
</table>
The right cell is always 196px and this causes the left cell to be the same height. Makes no sense.
If you add a display: block to the style of your image it will be fixed.
<img src="//placehold.it/404x192" style="width:404px; height:192px; display: block" />
The first answer should help you to understand why
EDIT: Actually, you dont need nothing but the display block and the image sizes.
What are the dimensions of your image?
I don't think HTML is "smart" enough to stretch your image to fit to your exact request.
Maybe you should try resizing your image in paint/photoshop to a dimension that has the same height/width ratio as 404:192 and see if that helps.
Here is my page structure with three column: 30-40-30
Here is fiddle: http://codepen.io/karimkhan/pen/BDfhJ
Proble is :
I want to position div in right section at particular height with div-height is 200px.
When I put style="height:150px" in right section div, right div remains on top and left and middle section move at 150px height.
Why?
<table border="0" width="100%">
<tr>
<td style="width:30%">
<div class="left">
Hi
</div>
</td>
<td style="width:40%">
<div class="middle">
<input type="text" id="url" width="80%">
<button type="submit" onclick="GetSentiment()" value="Submit">GetSentiment</button>
</div>
</td>
<td style="width:30%">
<div class="right" style="height:150px">
nice
</div>
</td>
</tr>
</table>
This is because the text in the <td> elements is vertically centered by default. If you apply styles to the <div>s in the other <td> elements, they will also behave. Alternatively, you can do <td valign="top"...> for each <td>.
EDIT: I notice that the code you posted above is much simpler than the code you posted on github. There may be other factors, including JavaScript or other styles affecting your production code. Without the production HTML, CSS, and scripts, it's impossible to determine everything that could be affecting the layout.
I am producing a personalised HTML email which has already been designed. I have coded the email with all the content placed within a table. I need to place text in three different areas in one row in a kind of scattered way. I tried placing the text into a div within the table row and styling it using inline CSS however, when i tested it on emailonacid (email testing website) it doesn't display correctly on the different email programs. Is there a way i can do this so that it works for all email programs?
I would like to position the text like so:
http://i754.photobucket.com/albums/xx182/rache_R/image_zps0604dece.jpg
The black boxes is where the images are.
<tr>
<td>
<div id="cambelts" style="margin-top: -30px;text-transform: uppercase; position: relative; top: 80px; left: 170px;">This is text 1
<br/>
<span style="font-weight: bold;">£#XX.XX#</span></div>
<img src="images/Untitled-1_04.jpg" width="800" height="418" alt="">
<div id="Accessory_Belt_kits" style="text-transform: uppercase; position: relative; top: -235px; left: 20px;">This is text 2
<br/>
<span style="font-weight: bold;">£#XX.XX#</span></div>
<div id="Water_Pumps" style="text-transform: uppercase; float: right; position: relative; top: -80px; right: 40px;">This is text 3
<br/>
<span style="font-weight: bold;">£#XX.XX#</span></div>
</td>
</tr>
You should not concentrate with fancy CSS tricks in E-mail. Email should be more about content and less about CSS positioning and gimmicks.
Having said that Email clients do support certain CSS attributes.
Click here to check which attributes are supported by different Email clients.
Also here is a tool which can allow you to see how your email will be rendered in different E-mail clients.
So my advice is instead of trying to hack your way into getting your content displayed , focus more on what the end user will see rather than how he see's it.
Instead of using CSS, you can also add the another table in the row to adjust the text position. This way you can manage the text position easily.
Set the border of the table to zero (<table border="0">) to make it invisible if necessary.
I am fairly new to creating HTML emails but I have found that not all CSS code really works across all email clients so it is better to stick with as much HTML as possible.
One way you could accomplish this is a table with two columns. In the left column you have text 1 and 3 then in the right column you have text 2. In order to create the spacing, you will need to include empty "cells" that give the spacing.
<table width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="290">
<table align="center">
<tr>
<td>
<h1>Text 1</h1>
</td>
</tr>
<tr>
<td height="20">
</td>
</tr>
<tr>
<td>
<h1>Text 2</h1>
</td>
</tr>
</table>
</td>
<td width="20">
</td>
<td width="290">
<table align="center">
<tr>
<td height="20">
</td>
</tr>
<tr>
<td height="20">
<h1>Text 2</h1>
</td>
</tr>
<tr>
<td height="20">
</td>
</tr>
</table>
</td>
</tr>
</table>
This should give you a solid base to work with and all email clients will render tables properly.
I am new to CSS. When I run the following code in IE it lines up the spans as expected, fixing there widths to 100px and padding the sides with as much space as necessary depending on the window size.
<table ID="tblRecordCount" style="width:100%">
<tr>
<td />
<td style="width:100px">
<span ID="lbl1" runat="server">Records1</span>
</td>
<td style="width:100px">
<span ID="lbl2" runat="server">Records2</span>
</td>
<td style="width:100px">
<span ID="lbl3" runat="server">Records3</span>
</td>
<td />
</tr>
</table>
When you run it in Chrome the browser either sets the first td width to 0px and fills in the last one, or sets the first and last to 0 and stretches the middle ones to fill the space.
Any CSS tricks to tell Chrome to behave? You can see this behavior in jsFiddle.
I'm not primarily an html programmer, but I'm using HTML to format the display of one of my screens in iPhone. So what I have is something that is supposed to be a paragraph like display with an embedded image in the top right, so that while next to the image, the text wraps and doesn't overlap, but will continue to the right once it is below the image.
I hen need a table of comments posted below that, so knowing that my view is 728 pixels wide, I did
<table width="768">
When I do this code in my smaller (240 px wide) view, the comments appear below the image, but in the larger view, it doesn't. Anyone know why this might happen?
Here's a sample of the html I'm using:
<body bgcolor="#FFFFFF">
<p>
<img src="http://www.smspal.com/iPhonePhoto.jpg" width="320" height="480" align="right">
Tweet
</p>
<table width="728" cellpadding="3" cellspacing="0" >
<tr>
<td>
<b>
<font size="2">Parent1 Parent1</font>
</b>
</td>
<td>
<p align="right"><font size="1">Tue. May 3, 2011 at 3:47 PM</font></p>
</td>
</tr>
<tr>
<td colspan="2">
<p align="left">
<font size="2">Add a comment</font>
</p>
</td>
</tr>
</table>
<hr noshade size="1" />
</body>
Your giving an absolute pixel size on your table to match the pixel width of a specific screen. The size is absolute so on a smaller screen size nothing more can be displayed to the left or right of it so it has nowhere to go but down.
Try using a percentage width as that is a relative size that will conform to many different screen sizes.
Why don't you just put the image inside the table? You can use the colspan attribute to keep the image in the right corner.