I have been trying to align 2 different iFrames on a page, one to the right and another to its left. The iFrame to the left needs to have a width of 25% and height 100%, whereas the iFrame to the right needs to have a width of 75% and height 100%. They are placed inside a table having a height and width of 100%. I tried running my code on JSFiddle.net and it more or less looks the way I would have expected, however, it does not appear the same in my application (it definitely is not aligned 25%-75%). Here's a screenshot.
Here's my code snippet for the table:
<table height="100%" width="100%">
<tr style="height:100%">
<td style="width:25%">
<iframe name="ifrTemplateLeftPreview" id="ifrTemplateLeftPreview" width="100%" height="100%"></iframe>
</td>
<td style="width:75%">
<iframe name="ifrTemplateRightPreview" id="ifrTemplateRightPreview" width="100%" height="100%"></iframe>
</td>
</tr>
</table>
I tried replacing '%' with pixels (px) to set the width of both tags, however, it seemed to mess the page up a bit and didn't seem to solve the issue.
The above code is only a part of the entire ASPX page, and I am sure nothing apart from this code snippet is causing any problems with the alignment of the iFrames. I have tried different ways but hasn't helped. Any help will be highly appreciated.
Alright, I sorted the issue myself. Basically I changed the <td>'s to <div>'s and added a float:left attribute to both iFrames and that seems to have sorted the issue:
<table height="100%" width="100%">
<tr>
<td>
<div style="width:100%">
<div style="width:25%; float:left">
<iframe name="ifrTemplateLeftPreview" id="ifrTemplateLeftPreview" width="100%" height="100%"></iframe>
</div>
<div style="width:75%; float:left">
<iframe name="ifrTemplateRightPreview" id="ifrTemplateRightPreview" width="100%" height="100%"></iframe>
</div>
</div>
</td>
</tr>
</table>
Related
I am giving the table and div height, width has 100%. element get the 100% height but when it reach div which present in then div does not height 100%. In chrome and IE this working fine, only getting problem in Firefox. Is that I am doing anything wrong or it's problem of browser please help!
Syntax:
<div style="height:300px;width:300px;background-color:yellow;border:solid black;">
<table style="height:100%;width:100%;">
<tr>
<td>
<div style="height:100%;width:100%;background-color:red;border:solid black;">
</div>
</td>
</tr>
</table>
</div>
JsFiddle:https://jsfiddle.net/7wa7wrkk/4/
You also have to assign the 100% height to the td:
https://jsfiddle.net/yfehv1da/1/
I am also faced same problem in past, I think this is problem of Firefox browser only not fault of your code because it not applying 100% height of to ! In your case simple way handle your problem by giving "Height:100%" style to element. By this way it will work in all browser without any issue.
Syntax:
<div style="height:300px;width:300px;background-color:yellow;border:solid black;">
<table style="height:100%;width:100%;">
<tr>
<td style="height:100%;">
<div style="height:100%;width:100%;background-color:red;border:solid black;">
</div>
</td>
</tr>
</table>
</div>
JsFiddle:https://jsfiddle.net/7wa7wrkk/5/
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.
I am trying to send html emails with images. Images look good in all email clients but in outlook they are too wide. How to fix max-width of image?
<table id="cg-cmgxsgg" class="widget widget-image " width="580" data-widget-code="email-image">
<tbody>
<tr>
<td align="center">
<div><img src="http://vcap.me//file/get/ce2c1e66-2129-41e8-903c-a40300e7bbd0" width="580" alt="" style="float: none; margin-left: auto; margin-right: auto;"></div>
</td>
</tr>
</tbody>
</table>
Regardless of CSS support or HTML attributes, the main factor that is causing the issue in Outlook is the actual size of the image. Outlook usually ignores whatever HTML sizing (width= or height=) or CSS styling (width:, height:) and goes off of the embedded information in teh image. This is all based off DPI setting as well as the renderings of the Word HTML engine.
Mailchimp solutions
Below is snippet explaining the issue in more detail from here
"This issue usually happens when you are using a picture other than 96dpi.
When inserting a picture, Outlook will rescale the image as if it was a 96dpi image. This means that if you have a picture of 150dpi with a height of 88px, it will be displayed as an image of 56px high;
88px/150dpi * 96dpi = 56px
It even gets worse; upon sending, Outlook will convert and compress (re-render) the images to 96dpi with the new dimensions permanently! This means that all the "detailed" picture information is lost and you'll be sending an image of 96dpi which is 56px high. This is of course a severe and very visible quality loss.
If your picture is less than 96dpi, then the opposite happens. A picture of 88px high with a dpi of 32 would then result in a 96dpi image of 264px high. So the result will be a very large image (but this time you can resize it back without the image becoming blurry).
This is a long outstanding issue/function/design choice which goes back all the way to Word 6.0 from 1993."
For setting a max-width on images for Outlook I add a Width="600" attribute to the img tag. Note the lack of px on that size, with px it doesn't work and it must be on the img tag, not any parent element.
E.g.
<img width="600" src="http://www.myimage.co.nz/myimage.jpg" alt="My Image" />
On a side but related note I use a width of 280 for side by side images in a 600 width table. This is because Outlook adds padding (or maybe margin) and they would stack if you made them both 300.
Couple of things, I'd refrain from using floats etc in your emailer code and also would remove that wrapper div, with emailers you've really got to go with simple table markup. Also try to avoid things like p tags etc as they create additional space etc.
For your actual question I'd try something like this, I'd set a height on my image and ive it display:block
<table id="cg-cmgxsgg" class="widget widget-image" width="580" data-widget-code="email-image" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="center">
<img src="http://vcap.me//file/get/ce2c1e66-2129-41e8-903c-a40300e7bbd0" width="580" height="200" alt="" style="display:block;">
</td>
</tr>
</tbody>
</table>
max-width is not a supported CSS style in Outlook 2007. (Neither is float, apparently.) Outlook is notorious for providing very limited CSS support.
Your best solution is to specify a smaller width (and height) in the HTML attributes:
<td align="center">
<div><img src="..." width="500" height="300" alt="" style="margin-left: auto; margin-right: auto;"></div>
</td>
I'm a bit late to the party (got here via Google). What works for me, and what I didn't see in the answers, is conditional comments for Outlook.
They work like this:
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tbody>
<tr>
<td>
<img align="center" alt="" src="[image source here]" width="[desired width here]">
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
What your're doing here is essentially wrapping your image table in another table with fixed width, but only for Outlook.
MailChimp has a nice reference you should check out if you run into problems with Outlook: https://templates.mailchimp.com/development/css/outlook-conditional-css/
Hope this helps some fellow Googlers!
I am using this with perfect success in Outlook 365 (2022):
<img src="https://picsum.photos/1000/1000" width="100%" style="width: 100%;">
How can I achieve the following effect without the use of a table?
Example:
http://enstar.nl/example.php (The example may not be visible at the moment, the nameservers should have been changed, but my hosting isn't that fast in updating them. Should be working later today. I apologize for the inconvenience)
All methods require a header and/or a footer. I don't want that.
What I want is the following:
Pure CSS, no tables
2 columns, fixed fluid (in that order)
if the content hasn't reach the bottom of the viewport, than extend the columns to it. Else extent to the content (so like a sticky footer)
A table at 100%x100% does this naturally. But I really don't want to use a table for this.
Any ideas?
EDIT:
Current HTML
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td id="navigation" valign="top" align="left">
</td>
<td id="content" valign="top" align="left">
</td>
</tr>
</table>
to set a two column there are a couple of options if you don't want to use tables
<div id="wrapper" style="height: 100%;">
<div style="background-color: green;">
<div id="leftCol" style="float: left; width: 200px;">testing</div>
<div style="background-color: red; margin-left: 200px;">
<div id="rightCol" style="height: 900px;" >testing testing testing testing testing testing testing</div>
</div>
<div class="clear"></div>
</div>
</div>
As long as the text inside the rightCol is longer than that in the left col (which can be handled by a min-height on the element) then you shouldn't have any problems with it scaling.
This also nullifies the need for the Javascript to set the second width. The reason is it is set to the width of the parent div which by default is 100% since you margin the red column left 200px it slides the display section over so you can see your left column.
I have a problem that seems to only occurs in IE (i'm currently using IE8). Basically, i have web pages that consist of a header, content area and a footer. I am trying to stretch an image to be displayed as a left and right border in the content area. the image is not a solid color, so simply setting a border property would not work. In all browsers but IE, the image stretches just fine.
The site is heavily table based due to the fact that it is written for a CMS known as NetSuite. A lot of the tables and html are created by the CMS and are very difficult and tricky to modify.
You can see the page in action at - web site page
I have tried numerous combinations of height:100% and different positioning values with little help. One of the problems is that the height of the content area is dynamically set.
The code in place now looks like this:
<table border="0" cellpadding="0" cellspacing="0" width="1020" height="100%" align="center">
<tr style="height:100%;">
<!-- left side image -->
<td style="width:9px; height:100%;"><img src="http://www.marware.com/images/body_outer_border.png" border="0" height="100%" width="9" /></td>
<td valign="top" width="400" align="center">
<!-- right side image -->
<td style="width:9px; height:100%;"><img src="http://www.marware.com/images/body_outer_border.png" border="0" height="100%" width="9" /></td>
</tr>
<td style="height:100%; position:relative;">
<img style="position:absolute; top:0px; left:0px; width:100%; height:100%;" border=0 src="http://www.marware.com/images/body_outer_border.png" width="9" height="100%">
</td>
Make the img absoultely positioned at 0,0 with 100% width and height. And relative positioning on the td so the absolute positioning is relative to it. I'm relatively sure that this absolutely works in IE8.