Adjusting iframe within table - html

I need advice on a simple exercise I am trying to do - I do not code to html UI usually.
The following code attempts to load 2 iframes within table cells:
<html>
<body>
<table border="1">
<tr>
<td>
<div id='outerdiv '>
<iframe src="book.jsp" id='outiframe' scrolling=no >< /iframe>
</div>
</td>
</tr>
<tr>
<td>
<div id='summarydiv '>
<iframe src="book-view.jsp" id='inneriframe' scrolling=no >< /iframe>
</div>
</td>
</tr>
</table>
</body>
</html>
Obviously additional attributes have to be added to make the 2 iframes visible.
Currently,IE8 shows the iframes horizontally placed beside each other,with neither displaying in full.
Firefox only displays the top one.
What is the minimum basic template needed here to make the 2 iframes adjust and be visible together - and resize well with the browser size.

The problem is that your closing iframe tags have a space in them
< /iframe>
Should be
</iframe>

No need to add extra div tags. give the id 'outerdiv' and 'summerydiv' to TD and set css style max-height and max-width.
It may able to hold your iFrames in position.

Related

Proportionate html images in Outlook

I have a number of different sized images which I am trying to resize and make proportionate with one another using css width and height attributes on <td> elements, and then making the width and height of the actual images 100% of this <td> element.
I am then trying to use this code in an e-mail campaign. The problem is this code works correctly, as expected, but outlook still seems to render the images with their original width and height values.
Does anybody know how I can prevent this from happening.
Note: I have removed the image src and links from my code.
<table width="100%"> <!-- a width 100% container -->
<tr>
<td></td> <!-- an empty cell, which will adapt its width -->
<td width=250 height=300> <!-- it's like max-width:200px -->
<a href="SOME LINK">
<img width="100%" height= "100%"src="SOME IMAGE LINK" alt="Just for you" title="Just for you" />
</a>
</td>
<td></td> <!-- another empty cell, which will adapt its width -->
</tr>
<tr>
<td></td> <!-- an empty cell, which will adapt its width -->
<td width=250 height=300> <!-- it's like max-width:200px -->
<a href="SOME LINK">
<img width="100%" height= "100%"src="SOME IMAGE LINK" alt="Just for you" title="Just for you" />
</a>
</td>
<td></td> <!-- another empty cell, which will adapt its width -->
</tr>
</table>
Outlook is wonky. It renders via WordHTML, which is silly.
The issue is that without a defined value in the HTML attribute, Outlook views 100% as the total width of the actual image (and sometimes even larger if the resolution of your desktop is different from the resolution of the image).
Your best bet is to either set media queries to change width/height to 100% once it reaches your desktop break point, or to do something even wonkier, like below:
<img width="640" height="240" src="SOME IMAGE LINK" style="width:100%; height:100%" />
You just replace the 640 and 240 properties with the height and width you want your image. The rational behind this is that the vast majority of email clients respect the proper waterfall and place CSS above HTML attributes, but Outlook, like the silly goose it is, will actual ignore the 100% CSS and work based off of the declared HTML attribute.
Now this is not a 100% foolproof message and should be tested extensively.
Your final solution, if nothing else works is to actually resize the original image to the maximum size you want it to display in Outlook.

Basic HTML table formatting for email

I am making a simple newsletter layout that can only contain basic HTML but am getting caught up on formatting it properly. I have very little html experience, if I could use css I could lay this out but this is meant to be low level html that most e-mail clients can display properly.
This is a bit of code that I've done to get the image and a button (in the position of button 2) looking correct but it's getting the top and bottom buttons sitting there correctly that's the issue.
<table width="100%" style="text-align:center;">
<td>
<img src="http://localhost/temp/leftpic.png"></td>
<td>
<img src="http://localhost/temp/button.png"></td>
</table>
This is my design outcome. With the outter border being a table border centered in the middle of the page.
Is it possible to format something relatively close to this without using css?
I appreciate any help, cheers.
You CAN use css, you just have to avoid third-party files. You need to define the CSS rules inline, that is, in the style attribute, as you are already doing it for table. However, your HTML is invalid. You need to have tr elements outside your td elements and it is healthy to actively wrap your tr elements inside a tbody, which should be the child of your table.
By the way: the reason one should avoid third-party css in this case is that it might mess the design of the page of gmail/yahoo.
Something like this will start you off... This is with no CSS and no styling (other than what you have originally).
Although you state no CSS yet your first line is styling (albeit inline). Did you just mean no external file?
This is how we used to do layout before CSS, so this is using HTML tables:
<table width="100%" style="text-align:center;" border="1">
<tr>
<td width="50%">
<img src="http://localhost/temp/leftpic.png" width="390" height="480" />
</td>
<td>
<table>
<tr>
<td><input type="button" value="bn1" /></td>
</tr>
<tr>
<td><input type="button" value="bn2" /></td>
</tr>
<tr>
<td><input type="button" value="bn3" /></td>
</tr>
</table>
</td>
</tr>
</table>
Since you have a fixed height of your image on left, you can also use
<tr height="160">
Since 160 * 3 = 480 (the height of your image)
See an example here https://jsfiddle.net/on6ytfyn/
You probably want to remove the border in the first line of code too.

iframe size on iPad

I have an HTML file as follows;
<table height="100%" cellspacing="0" cellpadding="0" border="0" width="646" class="data border">
<tbody>
<tr>
<td valign="top" class="noPad">
<iframe height="100%" frameborder="0" width="100%" scrolling="no" name="studentFrame" src="delete2.html"></iframe>
</td>
</tr>
</tbody>
</table>
The iframe page delete2.html has a table of width = 846 i.e. it is more than the containing td width
So this only shows around 646 width of the iframe content on page load and rest scrolls..
But on the iPad, the complete 846px of iframe content gets displayed and it kind of appears to flow outside the table width..so it appears broken..
How can I fix this issue?
Starting in version 4.2.1 of Safari iOS, and still going as of 4.3.3, the entire content of an iFrame is forcibly shown. If your iFrame's content is in the same security sandbox as the outer page, you can surround the iframe with a div tag and use that to do the scrolling.
This fiddle doesn't work because of security sandbox restrictions, but it should work find for you if both pages have the same domain: iPad iFrame single finger scrolling
Just put scrolling="no" in the iframe-tag. Notice that you still need to do something about the scrolling, as #CobaltBlue said.

iframe in table - cant overlay

This is my scenario
<div>
<table>
<tr>
</tr>
<tr>
<td>
<div id="innerDiv">
This div contains background image</div>
<iframe></iframe>
</td>
</tr>
<tr id="thirdTR">
<td>
<%--i have table here with a div that has a background image--%>
</td>
</tr>
</table>
</div>
Now when i try to have the "innerDiv" over the "thirdTR" along with the iframe, the div goes behind the "thirdTR". I even tried setting the zindex as high as possible. Can anyone please help me?
Regards,
Lakxman Kumar C
Edited: This is the css that i have for the innerDiv
position:absolute;
z-index:999
you can't lay a div over an iframe, simply impossible. you'll have to find a workaround (maybe using a div and AJAX to replace the iframe... or changing your layout so you don't need something above the frame)
You aren't allowed to put things over iframes in the html standard. If you could, people could hide links on other pages and phish more easily etc.

Stacked images in HTML email template have a space between them

I'm building a template for an HTML email I'll being sending via .NET. I don't do this often and I know I have to stick to tables and inline CSS. I just sliced up some images and I have two that need to stack. I understand there are issues with this in terms of whitespace in the HTML code. As a result, I've tried it all on one line, e.g.
<td valign="top" style="width: 314px;"><img src="/i/header_logo.jpg" width="314" height="92" alt="Logo" /><br /><img src="/i/woman.jpg" width="314" height="617" alt="Woman" /></td>
I'm previewing this in my browser and the two images are separated by some space. I also have a global line of CSS resets at the top like:
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;}
</style>
Does anyone know how to stack two images in a <td> and have them flush against each other?
Update: It turns out I had a doctype at the top like a normal web page and that caused the issue. It had nothing to do with my HTML/CSS combo.
I figured out the problem. I didn't have a doctype defined and therefore the rendering mode was really messed up.
alternatively try align="left" on your images. Works in some email clients.
You could cheat, and embed another table within the column containing the pics.
<td>
<table>
<tr><td align="left"><img1 ...></td></tr>
<tr><td align="left"><img2 ...></td></tr>
</table>
</td>
Is that what you mean by stacked and flush?