I have this:
<html>
<head>
<link rel="icon" type="image/ico" href="../images/logo.ico" />
<title> About Dideban </title>
</head>
<body>
<table cellpadding="0" align="center">
<tr>
<td> <img src="../images/header.jpg" width="800" align="center" /> </td>
</tr>
</table>
<table border="1" cellpadding="0" style="font-family:tahoma; font-size:12; margin-left:130; margin-bottom:200">
<tr>
<td >
<br>
<b> txt </b> txt txt
<br>
txttxttxttxttxttxt
<br>
txttxttxttxttxt
<br>
txttxttxt
<br>
txttxttxttxttxttxttxttxt
<b> Snort </b>.
<br><br>
<b> Dideban Team </b>
<li> <font color="blue"> Manager: </font> Dr. Masood Hashemi</li>
<li> <font color="blue"> Designer&Developer:</font>txttxt</li>
<li> <font color="blue"> Supporter:</font>txttxt</li>
<li> <font color="blue"> Developer:</font> txttxt</li>
<li> <font color="blue"> Designer:</font> txttxttxt</li>
<br>
<!--<input class="but" type="button" value="close" onclick="window.close();" style="margin-top:200">-->
</td>
</tr>
</table>
</body>
<table cellpadding="0" align="center">
<tr>
<td><img src="../images/footer.jpg" width="800" align="center" /> </td>
</tr>
</table>
</html>
My problem is that when I see it the table is in the center and bottom of my above image
I want the table be in the left hand but when i tried align="left"
in the table tag nothing changed what can i do?
in my linux system it shows me right but in XP it is not fixed.
Thanks In advance.
Try to insert your "header" table in the body tag. The formating works only for tables that are within it. The head tag is not for your web page header. It's a header for a web browser to provide information about your page and etc - more
That should work:
<html>
<head />
<body>
<table cellpadding="0" align="center">
<tr>
<td> <img src="../images/header.jpg" width="800" align="center" /> </td>
</tr>
</table>
<table border="1" cellpadding="0" style="font-family:tahoma; font-size:12px; margin-left:130px; margin-bottom:200px">
<tr>
<td >
<br>
<b> Sometext </b> Sometext
</td>
</tr>
</table>
<table cellpadding="0" align="center">
<tr>
<td><img src="../images/footer.jpg" width="800" align="center" /> </td>
</tr>
</table>
</body>
</html>
I don't understand anything after this edits. Everything looks fine. Remember that you have margin-left:130 in your content table. This is why it is not glued to the left side of the page. Was that the case?
The problems you are having with the browsers rendering your page differently are caused by errors in your code. The markup is not correct and the browsers have a hard time guessing what you actually want them to do.
Some of the problems with your code include:
<li> tags with no <ul> or <ol> parent
invalid style declarations: values should also include the measure units ( margin-left:130px; )
Instead of copying and pasting different solutions found over the internet, you should take your time and learn the basics of HTML. There are many tutorials on the web that are actually outdated by today's standards (the font tag is deprecated in HTML4 and should be replaced with CSS styles) so you should be careful in the resources you read.
This is a great resource for learning about HTML and it's relatives (CSS and JS):
https://developer.mozilla.org/en-US/learn
You can also use this validate your code:
http://validator.w3.org/
If you don't take your time to learn the proper way of coding webpages, you will have no luck finding developers willing to help you.
Related
I created an email template that uses a two-column layout. This was my approach:
<table>
<tr>
<td colspan="2" align="center">
<h1>Header of my email template</h1>
</td>
</tr>
<tr>
<td>
<img src="image1.jpg" alt="Image 1" />
</td>
<td>
<img src="image2.jpg" alt="Image 2" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<p>Footer of my email template</p>
</td>
</tr>
</table>
It works great on desktop! I have a two-column layout exactly as I wanted it. The problem is on phones because screens are too small for a two-column layout. I need one picture per row, not two, for mobile devices. What I could do is to use float:left;width:100% for the <td> elements that contain the images so that I have the one column layout that I need. However, that float:left;width:100% should apply only when #media screen and (max-width:450px) for example. But there is no way to use #media screen and (max-width:450px) using inline CSS. Remember, this is for an email template. So I cannot invoke external CSS files or add CSS to the <head> of the page because this is code that will be sent for an email template.
I found at https://kb.benchmarkemail.com/using-css-in-html-emails/ this advice, but that is not a solution for responsive tables:
Things To Do
Use tables for layout. Tables are more consistently supported. We
recommend that you place your CSS code inline to your content. It
should look something like this: Your content
here.... Declare width, cellpadding, and cellspacing for all
tables and table cells. This will result in a fixed width for the
template. Use hspace and vspace tag attributes to add whitespace
around an image. Margin and padding inline styles are supported by
most, but not all email clients
Any ideas? Thank you.
Google offers CSS support: https://developers.google.com/gmail/design/css as A. Meshu pointed out in his comments to my question.
I found at https://templates.mailchimp.com/development/responsive-email/ that they say this:
"You can leave the media query styles in the <head> of your email, as
clients that support media queries don’t strip out the <head> or
<style> areas."
That made me think I had to send a complete <HTML> document, so I even included <html><head><style type="text/css">..........</style></head><body>...........</body></html>.
For my other email templates I just send code for the <body>. I start the template with a <div> and everything works. But for this template now I am using this structure:
<html>
<head>
<style type="text/css">
#media screen and (max-width:450px) {
.responsive {
float:left!important;
width:100%!important
}
}
</style>
</head>
<body>
..........
</body>
</html>
Thanks to A. Meshu for providing very important hints in his comments to my question to figure it out.
Since table elements are block-level, I would say to change those tds into nested tables like it's 1999, and then float the first one left:
<table>
<tr>
<td colspan="2" align="center">
<h1>Header of my email template</h1>
</td>
</tr>
<tr>
<td>
<table style="float:left;">
<tr>
<td>
<img src="image1.jpg" alt="Image 1" />
</td>
</tr>
</table>
<table>
<tr>
<td>
<img src="image2.jpg" alt="Image 2" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<p>Footer of my email template</p>
</td>
</tr>
</table>
I have an email that is working properly in any other computer or mobile display, except the Gmail app and Gmail in laptop. 2 issues :
I added a #media code in the css in order for the images to be responsive when viewed on mobile (width:100%), but gmail app (tested both in a samsung phone and apple phone) seems to be ignoring it. So my images appear smaller, with the fixed width specified for big screens.
Here is the result : http://screencast.com/t/nm3jyc47K. The expected result, is to have the images filling 100% of the table (almost all the screen if we exclude the spacers), and obviously centered.
On the Gmail laptop website, my spacers between the tables seems to be ignored, therefore inline elements are touching each other. Here is the result : http://screencast.com/t/3D7H0Fqly. The expected result is a 24px spacer in between. (PD : Don't bother about the size, I was doing some testing, the size on desktop appear properly)
Here is the HTML code of the images, 3 images and 2 spacers in between.
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;">
<tbody>
<tr>
<td align="center">
<a href="img-1.png" style="border:none; display:block;height:136px" width="170px" /></a>
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="24"><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-24" style="max-width:24px;">
<tbody>
<tr>
<td height="1" style="font-size:1px;line-height:1px"> </td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="170" valign="top"><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;">
<tbody>
<tr>
<td align="center">
<a href="img-2.png" style="border:none; display:block;height:136px" width="170px" /></a>
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="24"><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-24" style="max-width:24px;">
<tbody>
<tr>
<td height="1" style="font-size:1px;line-height:1px"> </td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="170" valign="top"><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;">
<tbody>
<tr>
<td align="center">
<a href="img-3.png" style="border:none; display:block;height:136px" width="170px" /></a>
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</tbody>
</table>
And now the css code, in the head part of the email :
<style type="text/css">
body{width:100% !important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin:0;padding:0;background-color:#ffffff}
* {-webkit-font-smoothing:antialiased}
.ExternalClass * {line-height:100%}
table td {border-collapse:collapse}
.wlf {width:600px}
.w-420 {width:420px}
.w-170 {width:170px}
.w-120 {width:120px}
.w-24 {width:24px}
.w-15 {width:15px}
#media only screen and (max-width:590px) {
.full-width {width:100% !important}
.m-width {width:100% !important;max-width:100% !important;float:none !important}
.m-block {display:block}
.m-none {display:none}
.m-img-ft {width:100% !important;height:auto !important;max-width:250px !important}
div {box-sizing:border-box !important}
}
</style>
And again, I have no issue whatsoever with all the other email programs. Any idea what may be wrong in order to fixed these both issues ? (Without compromising the display in the others ?)
Thanks
Unfortunately you found the reason that most HTML email developers have very little hair and a slight twitch in their left eye. There is unfortunately no 'standard' for HTML for email across each email client, so you get a great diversity in not just what tags/styles are accepted, but also on what exactly each of those will do.
For your issue, the reason it seems to be ignoring it is because it is stripping your style tag out completely. (ref) Gmail app (on desktop and mobile) pretty much strips everything out of the head and Gmail web client has very limited 'hacky' support on stylesheets.
A great resource to see what is accepted by the major email clients: CampaignMonitor/CSS
Keep in mind, when you fix it on Gmail, it will likely wind up breaking it on a different email client. I would recommend getting an acid testing service like Email on Acid or Litmus, etc.
You will likely need to start designing for Gmail App first and then using CSS / 'Ghost tables' or MSO conditionals to make it work for desktop.
Sample places for Fluid Responsive templates:
http://tedgoas.github.io/Cerberus/
https://www.emailonacid.com/blog/article/email-marketing/our-gift-to-you-a-free-fluid-hybrid-email-template
http://labs.actionrocket.co/the-hybrid-coding-approach-2
Gmail doesn't support the <style> tag, so you have to inline all CSS. All other email clients support the <style> tag, so if it weren't for Gmail we'd be able to write html email like a web page. It's safest to inline CSS by hand, though there are a few CSS inlining tools that can speed things up.
Regarding spacers, something like this works across email clients:
<!-- Clear Spacer : BEGIN -->
<tr>
<td height="40" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
Note: I wrote the first sample template referenced in Gortonington's answer (hello!) and can vouch that all CSS and spacers within that repo work in Gmail / Gmail app.
I am using a base tag with an iframe tag and I would like to know how I can restrict certain links that open in the iframe.
e.g I have a menu panel and when clicked on menu link that desired page is displayed in the iframe.
<div class="start">
<h1 class="start">Geek Box <img src="box_icon.png" alt="Box width=" 40" height="40"></h1>
<hr />
</div>
<div class="table">
<table class="table" border="1" align="center">
<tr>
<td>
Home
</td>
<td>Tech Charts</td>
<td>Videos</td>
<td>About Me</td>
</tr>
</table>
</div>
<hr />
<br />
<div>
<table border="1" width=100% height="500px" style="text-align:center">
<tr>
<td width="25%">Smart Phones</td>
<td width="25%">Laptops</td>
<td width="25%">Dektops</td>
<td width="25%">Tablets</td>
</tr>
<base target='display' />
<tr><td colspan="4"><iframe name="display" frameborder=0 width="100%" height="500px" /> </td></tr>
</table>
</div>
If I understand correctly, you would like some of the pages to open in the iframe, and others in either the same window or another one (or whatever other way), ie. not in the iftame.
This won't work with the base tag using your example because...
The HTML <base> element specifies the base URL to use for all relative URLs contained within a document.
...and also
There can be only one <base> element in a document.
...so using another base tag would not make it work the way you want it.
Instead you'll have to get rid of the base tag, and add the target attribute to each of those links that you want to appear in the iframe.
So assuming you would like to open only the "sub-menus" (so they seem at least, ie. phone, laptop... etc) in the iframe, this is what I suggest you change your code to:
<div>
<table border="1" width=100% height="500px" style="text-align:center">
<tr>
<td width="25%"><a href="phone.html" target='display'>Smart Phones</a></td>
<td width="25%"><a href="laptop.html" target='display'>Laptops</a></td>
<td width="25%"><a href="Desktop.html" target='display'>Dektops</a></td>
<td width="25%"><a href="Tablets.html" target='display'>Tablets</a></td>
</tr>
<!-- Notice I have removed the 'base' tag! -->
<tr><td colspan="4"><iframe name="display" frameborder=0 width="100%" height="500px" /> </td></tr>
</table>
</div>
...and you can leave the rest of your code intact.
Quoted source: <base - HTML | MDN
I need help with getting a number text to change color once clicked on. When I click on the text it goes to a next html file, but when I return to the main html. the number is still the same color so Im unable to determine the already visited files. Here is an example of what I've created.
<Center> <font size="6"><a href="question2.html"><font color="#FFCC00">Taylor</font>
</td></Center>
<td bgcolor="#0000CC">
<Center> <font size="6"><a href="question3.html"><font color="#FFCC00">Sanders</font>
</td></Center>
<td bgcolor="#0000CC">
This will set the colors for your links:
<body link="#FF0000" vlink="#00FF00" alink="#0000FF">
But you'll also need to edit your code example too. Remove the <font color="#FFCC00"> tags, which are overriding the browser's default href colors, and add closing tags to your anchors:
<font size="6">Taylor
</td>
<td bgcolor="#0000CC">
<font size="6">Sanders
</td>
<td bgcolor="#0000CC">
If you want to use <center>, you should move the opening and closing tags inside the <td></td> tags.
Try this
<html>
<body link="Orange" vlink="White" alink="Yellow">
<table>
<tr>
<td bgcolor="#0000CC" align="center">
<font size="6">Taylor</font>
</td>
<td bgcolor="#0000CC" align="center">
<font size="6">Sanders</font>
</td>
</tr>
</table>
</body>
</html>
Why is my gray div only showing half? This is my code :-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div style="margin-top: 10px;font-family: helvetica,sans-serif;color: white;background: #212121;" class="round" >
<center>
<h4 style="font-family: Verdana;font-style: italic;">Alumni Activities</h4>
</center>
<div style="margin-left: 10px;">
<p>
The institution has an alumni association that performs various activities to disseminate knowledge among students regarding Education, Technology, Trends and Industry. Apart from this, it organizes technical competitions for students to effectively develop their competitive skills and arranges alumni programs that promote effective networks amongst its members.</p>
<p>
Events organized by Alumni Association of are as given below:</p>
<table align="left" border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="40">
<p>
1.</p>
</td>
<td valign="top" width="363">
<p>
<strong>Event Name: </strong>Alumni Meet 2010</p>
<p>
<strong>Date of Event: </strong> 27-Feb-2010</p>
<p>
<strong>Purpose: </strong> Annual General Meeting and Get together</p>
<p>
<strong>Number of Alumni Present: </strong> 75</p>
</td>
</tr>
<tr>
<td valign="top" width="40">
<p>
2</p>
</td>
<td valign="top" width="363">
<p>
<strong>Event Name: </strong> Expert Talk</p>
<p>
<strong>Name of the Alumni: </strong> Mr. Nachiket Patel, Essar Ltd.</p>
<p>
<strong>Date of Event: </strong> 22-Sep-2009</p>
<p>
<strong>Purpose: </strong> To enhance the knowledge of students</p>
</td>
</tr>
</table>
<p>
</p> </div>
</div>
</div>
It looks to me like the classic 'collapsed parent' problem, created by a floated element. In your case it's the align=left attribute on the table.
Removing this attribute is the easiest solution, otherwise there are four CSS solutions, although one of the main two should work for you:
Either add the css overflow:hidden to your main div, or add a clear float, e.g. <div style="clear:both;"></div> as the last thing inside your main div.
This article explains the theory and the other two possible solutions:
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
Problem was in messy align="left" property in table tag. See normal version: http://www.jsfiddle.net/pereskokov/UMUFt/1/
May I know the round class? I think the div is floated. When you use float div, you need to "clear:both" the div to clear the float element so the other tag won't float too.
First of all you are specifying the Transitional DTD level which is the highest level and requires apart of well formed document, that you use only HTML elements winch are accepted for such level, second you have a div that is closed but not opened, third remove the align="left" attribute of your table:
<div style="margin-top: 10px;font-family: helvetica,sans-serif;color: white; background:#212121;"
<center>
<h4 style="font-family: Verdana;font-style: italic;">Title</h4>
</center>
<div style="margin-left: 10px; " >
<table border="1" cellpadding="0" cellspacing="0">
<tr><td/>Cell Content</td></tr>
</table>
</div>