I have the following code:
<td colspan="7"height=200 valign="top">
<iframe id="myframe" name="myframe" src="index.php?page=1" width=810 height="100" marginheight="0" marginwidth="0" frameborder="1" scrolling="auto"></iframe>
</td>
I have don't see any scoll bar, either vertically or horizontally.
Any ideas?
Thanks
You should only see a scrollbar in the iFrame if the page you are opening in the iFrame is bigger than the size of the iFrame. Therefore, if 'index.php?page=1' will fit on a 810x100 window than the iFrame won't have any scrollbars. If you are expecting to see a scrollbar in the td that holds the iFrame you would need to style it differently. You would need to add style='overflow:auto' to the td that holds the iFrame. By doing this you are telling that td that if it's content is larger than it's max height and width it should have scrollbars.
This renders a horizontal and vertical scrollbar for me in IE7:
<html>
<body>
<table>
<tr><td colspan="7"height=200 valign="top">
<iframe id="myframe" name="myframe" src="http://www.google.se" width=810 height="100" marginheight="0" marginwidth="0" frameborder="1" scolling="auto"></iframe>
</td></tr>
</table>
</body>
</html>
Related
Here is my iframe :
<div class="col-md-5 md-offset-1 col-sm-12" >
<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://app.mailjet.com/widget/iframe/2lW2/4ew" width="100%" height="224"></iframe>
</div>
And here is the result :
As you can see :
there is a scrollbar, although i specified "no".
I need to scoll to access the confirmation button
When I increase the height of iFrame, it doesn't resize the inside box.
Any help ?
can anyone help me with my problem? I try to build newsletter with couple table segments because mailchimp have problem with code and break my mail content if he is not in the table. Main problem for me is image over image. Please, take a look at my code.
Pattern is bottom image and have 100% size (700x50px) and logo is top image (32x32px). Logo must to be on right side and over pattern image with margin-top -20px and margin-right 30px but without using "position" property (mailchimp break all position property).
Right now, my logo is under pattern. I was try to fix this problem with z-index but nothing happens here.
<table class="header_class">
<td>
<img class="pattern_header"src="pattern.jpg" alt="pattern" />
<img class="logo_small"src="logo.jpg" alt="logo" align="right"/>
<h1>July 2017</h1>
</td>
</table>
my css:
pattern_header{
max-width: 700px;
}
logo_small{
margin-right: 30px;
margin-top: -20px;
}
(I am totally beginner and maybe my code isn't ok)
What the header should look like:
For background to work on emails you can use positions (as you have found out). For backgrounds to work in Outlook you need to use VML (vector markup language), this is native to outlook (>2007). All the rest of the email clients should be able to read the background declaration on the td.
Few things to note in the below code:
I have added [HEIGHT OF IMAGE] where you need to add the height for the VML.
You have not provided image dimensions which you will need for logo. Note Outlook doesnt read style attributes on images.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="https://i.stack.imgur.com/UX7Jw.png" style=" background:url(https://i.stack.imgur.com/UX7Jw.png);background-image:url(https://i.stack.imgur.com/UX7Jw.png);">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:700px;height:159;">
<v:fill type="frame" src="https://i.stack.imgur.com/UX7Jw.png" color="#e9e9e9" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right" valign="top" style="padding:30px 30px 30px 0px;"><img class="logo_small" src="https://i.stack.imgur.com/164VA.png" alt="logo" align="right"/></td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Let me know if this works for you.
This is what I need. Logo alignment is not to the top (offset from top 20px and from right 30px). Pattern alignment is top.
Example
A picture is worth a thousand words and so I'll start off with it
As you can see, there is white background appearing in Chrome while in Firefox, the movie fits perfectly.
Here is the embed code:
<embed id="movie" src="movie.swf" loop="false" menu="false" quality="best"
bgcolor="#ffffff" width="250" height="250" scale="aspect" name="movie"
align="middle" allowscriptaccess="always" allowfullscreen="false"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
flashvars="shutter_enabled=1&shutter_url=shutter.mp3&width=250&
height=250&server_width=250&server_height=250">
For the time being, I've used bgcolor=#e0efe8 to merge it with background. But what I'm curious about is why doesn't the movie fit perfectly as it does in Firefox?
I tried to look at css but right clicking over it brings up the flash settings menu.
The embed tag is withing a td and the table has cellspacing = "4" and cellpadding = "3", but I don't think that would cause a problem. The table, tr, or td doesn't have a height property defined so I guess we can tick that off of 'to check' list too.
Is there anything else from my side that needs to be provided to come up a solution?
UPDATE
Throwing in the HTML too if that helps:
<table width="100%">
<tbody>
<tr>
<td>
<embed id="movie" src="movie.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" scale="aspect" name="movie" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="shutter_enabled=1&shutter_url=shutter.mp3&width=250&height=250&server_width=250&server_height=250" align="middle" height="250" width="250">
</td>
</tr>
</tbody>
</table>
Finally managed to view the CSS through Firebug lite. Here is the SS:
Thanks in advance
We'll need to have a look at your CSS file or inline style code, have you tried setting the td padding property to zero?
CSS code:
td {
padding: 0;
}
Edit1: If that doesn't work, maybe this css property:
border-collapse: collapse
Edit2: Try using these CSS properties:
position: relative;
overflow: auto;
Source (someone else having a similar problem): http://productforums.google.com/forum/#!topic/chrome/2EqmQiwApz4
I'm creating an HTML email and since background images can't be used on anything but <body> thought I could get around this by making a border image 100% height within a cell. Perhaps it was wishful thinking? I've searched at the solutions that worked in the past no longer work in modern browsers. Is there any special trick to making this happen without setting a hard height for the cell?
Here are the things I've tried so far:
<td width="25" style="margin:0; padding:0;">
<img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
</td>
stretches the image to 100% height of the entire table (even though the table is nested in a <td>.
<td width="25" height="100%" style="margin:0; padding:0;">
<div style="height:100%; diplay: block;">
<img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
</div>
</td>
ditto
<td width="25" height="1" style="margin:0; padding:0;">
<div style="height:100%; diplay: block;">
<img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
</div>
</td>
setting a smaller td size does not force it to stretch as expected.
I assume you're mostly running into trouble in Outlook?
Hotmail doesn't recognize background images, but it does seem to recognize height="100%."
In my own tests, declaring height="100%" on an image, does successfully stretch it to the height of the cell in the major web-based clients (Hotmail, Gmail, Yahoo).
Outlook only allows image stretching to a fixed size (and the image can only be stretched proportionately in both directions). The other clients allow significant stretching in one direction (up to ~4000% of the original size?)
Tips:
1) Use a tall image sized to fit Outlook, or slightly taller.
2) Using height="100%" will still stretch the image as needed in most non-Outlook clients.
3) Declaring a vertically repeating background image for the table cell is also useful as a fallback (but it won't help you with Outlook or Hotmail.)
Here is my preferred solution for border images:
<td width="25" height="100%" valign="top" style="background:Transparent url('http://www.mysite.com/images/side-left.jpg') repeat-y;margin:0; padding:0;">
<img style="margin:0; padding:0;display:block;" src="http://www.mysite.com/images/side-left.jpg" alt="border" width="25" height="100%" />
</td>
Try making the height of the cell a percentage instead of pixels in css. Like how Jezen Thomas said, use css but this time do it like this.
td {border: 4px solid red; height: /*height in desired percentage*/%; valign:top;}
img {height: 100%; width: 100%;}
Plus formatting webpages or email in just tables is bad practice. You should try to do it entirely in css and use tables only for tabular data. But since it's what you want to do I am not going to stop you.
Is it ok if you get the rest of the html so I can show the proper css way to do it if you are interested?
Never use div's in emails, gmail and android does not support this.
Its not possible for at image to have a 100% height or width in an e-mail.
You have to type the exact size in px. Its pretty annoying
I've added a Wordpress "contact us" page to my web site. But i couldnt align the content normally. I added a contact form and a google maps iframe. But i cant shown them at the same level together. The page's sidebar is hidden and I dont need it. How can this problem be solved?
http://www.mersinhatayrestaurant.com/?page_id=10
I also try using tables
<table>
<tr>
<td>[si-contact-form form='1']</td>
<td>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=tr&geocode=&q=Hatay+Restaurant,+Yeni%C5%9Fehir,+Adnan+Menderes+Bulvar%C4%B1,+Mersin,+T%C3%BCrkiye&aq=0&sll=36.804204,34.638567&sspn=0.194075,0.528374&g=mersin&ie=UTF8&hq=Hatay+Restaurant,&hnear=Adnan+Menderes+Blv,+Mersin%2FYeni%C5%9Fehir,+T%C3%BCrkiye&ll=36.778016,34.586682&spn=0.006295,0.011489&output=embed"></iframe>
</td>
</tr>
</table>
But nothing changed. I am waiting for your solutions. Thank you.
try a float:left on both the iframe and div for the contact form without the table. or add a vertical-align: top; to the TD with the contact form. you have statically assigned height and width to iframe, and if that is taller than the contact form, then it will fill the entire TD cell and the contact form will move to the bottom as the default behavior for TD is vertical-align: bottom;
EDIT:
Added the vertical align dynamically to your site and it worked, just add it in below.
<table>
<tr>
<td style="vertical-align:top;">[si-contact-form form='1']</td>
<td>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=tr&geocode=&q=Hatay+Restaurant,+Yeni%C5%9Fehir,+Adnan+Menderes+Bulvar%C4%B1,+Mersin,+T%C3%BCrkiye&aq=0&sll=36.804204,34.638567&sspn=0.194075,0.528374&g=mersin&ie=UTF8&hq=Hatay+Restaurant,&hnear=Adnan+Menderes+Blv,+Mersin%2FYeni%C5%9Fehir,+T%C3%BCrkiye&ll=36.778016,34.586682&spn=0.006295,0.011489&output=embed"></iframe>
</td>
</tr>
</table>