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.
Related
I'm having trouble getting my HTML email template to render properly when it is sent from Mailchimp to Outlook 2007, 2013 and 2016. The thing is, when I upload the HTML directly for testing on Litmus, the email renders fine across all Outlook previews. When I send the test email from Mailchimp to Litmus, the email looks out of proportion in Outlook 2007, 2013 and 2016 (for Win7).
Is Mailchimp doing something with my Outlook-targeting conditional comments, and how can I work around that?
My conditional comments seem to work sometimes to fix the width on some elements of my MC email (you'll see in the screenshots, the textbox is the right size for the top card but not on the second one). But for the life of me, I can't figure out why one works and the other doesn't, I'm writing the same comment for both.
Screenshots:
when Mailchimp sends the email to Outlook (what went wrong)
when the HTML is rendered for Outlook directly (what it's supposed to look like)
Conditional comments:
I've put in Outlook-specific conditional comments like so:
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<!--BODY TABLE-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
...
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Thank you for the help! Really appreciate it.
I feel your pain, I've had the same issue for templates I was making for a client. I wanted to make the icons retina proof and let the client upload any image size he'd like. Unfortunately after many many hours debugging en searching the web, I read the following on a MailChimp post:
Outlook doesn’t recognize the HTML that constrains images. This means
that if you use HTML to resize an image uploaded to a campaign or
template, it may display at the original size in Outlook. Be sure to
resize your images before you upload them to MailChimp, or use our
built-in image editor.
source: MailChimp Knowledge Base
I didn't really believe that this could actually be true so I kept trying to constrain the images. I've put fixed width on the img, td, tr, table.. nothing helped.
Sadly I can't really explain what happens, hopefully the link to the MC article gives you a better view on it.
But my best answer is to set a max-width & width to your img and td anyway. And tell your client to resize the images to the allowed size. Setting a max-width and width will also display the #px when hovering over the editable image in your MailChimp editor. I also found out that when you do upload a bigger size, MailChimp throws a lil' warning.
If it may help in any way; see my code below that I used in my templates to make it fluid.
<table mc:repeatable mc:variant="Item with image top and CTA" width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;">
<tr>
<td style="padding:30px 20px 40px 20px;" bgcolor="#FFFFFF">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-bottom:15px;max-width:610px;">
<img src="/images/img.jpg" alt="x" style="width:100%; max-width:610px;" width="610" mc:edit="article_image">
</td>
</tr>
</tr>
</table>
</td>
Are you using retina images in your emails? From experience I have found that outlook's, if they are given a big image, they display it at a big size if a specific width is not assigned to the img tag. Below is an example of a code i use for the images in my emails.
<img src="[IMAGE PATH]" width="" height="" style="width:px; height:px;display:block;" border="0">
Also can you post the img tag of the offending element so i can have a look at it better please?
Cheers
I have noticed a 'bug' or whatever with Internet Explorer when viewing HTML emails. I'm using Version 11 and its still present.
If I want to align a table in the center of the page, it is also causing the text in any <td> cells to be centered, even if I set the attribute to align="left" and use inline CSS to specify text-align="left".
Here is some example code (try sending this as a HTML email to your yahoo or gmail account and view it in IE):
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background:#CCC;">
<tr>
<td>
<table width="650px" border="0" align="center" cellpadding="0" cellspacing="0" style="padding-left:11px;padding-right:11px;background:#FFF;">
<tr>
<td align="left" valign="top" style="text-align:left;">Moreover, while in most other animals that I can now think of, the eyes are so planted as imperceptibly to blend their visual power, so as to produce one picture and not two to the brain; the peculiar position of the whale's eyes, effectually divided as they are by many cubic feet of solid head, which towers between them like a great mountain separating two lakes in valleys; this, of course, must wholly separate the impressions which each independent organ imparts.<br><br> The whale, therefore, must see one distinct picture on this side, and another distinct picture on that side; while all between must be profound darkness and nothingness to him. Man may, in effect, be said to look out on the world from a sentry-box with two joined sashes for his window. But with the whale, these two sashes are separately inserted, making two distinct windows, but sadly impairing the view. This peculiarity of the whale's eyes is a thing always to be borne in mind in the fishery; and to be remembered by the reader in some subsequent scenes.</td>
</tr>
</table>
</td>
</tr>
</table>
You should see that the text will be center aligned rather than left aligned. This 'bug' is only present when viewing the code as an HTML email. If you view it as a webpage then it works fine!
I have tested it using web versions of Outlook and Yahoo as well as a different online mail account and the problem is the same only in IE. I tried it in Chrome, Firefox, and Android's built-in browser and it works fine.
I don't understand how to fix it other than not to have my tables centered in the middle of the page. It doesn't look aesthetically pleasing to have my email contents to the left of the page either.
Instead of using align="center" in your parent table tag, try putting it in the parent <td>. Also lose the align="center" on your child table tag, and you don't need CSS text-align:
<table bgcolor="#CCCCCC" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table bgcolor="#FFFFFF" width="650px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" style="padding-left:11px; padding-right:11px;">
Your text here...
</td>
</tr>
</table>
</td>
</tr>
</table>
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.
My site is at http://www.eluonpidu.com
The menu images aren't appearing in chrome the first time you visit the page. IE and Firefox work as expected. If I refresh the page, then the images appear for Chrome.
On the the code below you need to add width="100%":
<td id="manuu">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
That should fix your issue.
My web application is Asp.NET 2.0 and in one page, i'm using HttpWebRequest to load some content into a container page. This works well within Firefox, IE7/8, Safari but it crashes IE6. It hangs or shuts down.
The content page i'm trying to read is called tmp.html and if i call it directly (using IE6) then it seems ok. The html code inside tmp.html is :
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-image: url(images/jpg/alt_right_top.png);
background-repeat: no-repeat;">
<tr>
<td align="center" valign="bottom">
<img src="images/jpg/baslik_icindekiler.jpg" style="margin-top: 20px;"></td>
</tr>
</table>
this crashes the browser but if i remove the line : "background-image: url(images/jpg/alt_right_top.png);" then it shows up correctly even if i call it through HttpWebRequest.
example link : http://www.smilevitamin.com/smilevitamin/vitamin.aspx
Any ideas? Is this an Internet Explorer 6 bug?
why don't you use any JavaScript framework that is tested for these kind of things?
Jquery is a good example.