Im been trying to make my page work on different browsers and its seems it only works on IE and in other browser all my images are misalign. im not really good at HTML and its been awhile since the last time I use html, please check my codes below. And i need my page to be 640 x 480 px. Thanks
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AD</title>
</head>
<body>
<table width="640" border="0" align="center" cellpadding="0" cellspacing="0">
<div style="{z-index:3;}">
<img src="images/Header.gif" width="640" height="110"
/div>
<div style="{position: absolute; top: 145; left: 310; z-index:3;} font-family:Arial, Helvetica, sans-serif; font-size:22px; color:#000000;">at</div>
<div style="{position: absolute; top: 115; right: 185; z-index:3;}">
<img src="images/Brush.gif" width="100" height="215"
</div>
<div style="{position: absolute; top: 20; right: 145; z-index:3;}">
<img src="images/LOGO.gif" width="330" height="85"
</div>
<tr>
<td align="center" valign="top" bgcolor="#f0f8ff" style="background-color:#f0f8ff; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#000000; padding:8px;"><table width="80%" border="0" cellspacing="0" cellpadding="0" style="margin-top:10px;">
<center> text 1 <br><b>Competitive text2
<br>text3</b>
<br></center></div></td>
<br>
<center> <div style="font-size=20px;"> text4
<br>text5K.<br>
</center></div>
<br>
</tr>
</table></td>
</tr>
<tr>
<tr>
<tr>
<td align="left" valign="top" bgcolor="#00000" style="background-color:#00000;"><table width="100%" border="0" cellspacing="0" cellpadding="7">
<tr>
<td align="left" valign="top" style="color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:16px;"> <center><b>Apply online today at <font color=#6699ff> www.startek.com/careers</font></b>
</td>
<tr>
<td align="center" style="color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:13px;"> <center>address
<br><b>tel.no.</b>
</td>
</tr>
</table></td>
</tr>
</body>
</html>
Make use of CSS layout elements such as position. Your code just works on some browsers because some formatting is not cross browser compatible.
I advise you to use CSS for formatting because some of the HTML formatting you use are already deprecated. Here is a nice CSS tutorial
The same problem was also with me...Since HTML output may vary depending upon the browser, you should use adobe dreamweaver.It has a functionality to output HTML same in all browser by default...by the way..how it does i don't know.
If you can't afford dreamweaver right now..make sure you include position attribute in
div tag properly.
try like this:
<div position=absolute>main panel</div>
Related
Sample Code:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
</head>
<body style="font-family: Arial; margin: 0; padding: 0;">
<table align="center" width="600" cellpadding="0" cellspacing="0" border="0" style="width: 600px; background-color: #000000; font-family: Arial; font-size: 15px;color: #ff0000;">
<tr>
<td style="padding:10px;font-weight: bold;font-size: 20px; color: #ff0000;">Header Title</td>
</tr>
<tr>
<td style="padding:10px;">Here is the content for this section.</td>
</tr>
<tr>
<td style="padding:10px">
<img src="LearnMore.png" width="170" height="38" border="0" alt="Learn More" />
</td>
</tr>
</table>
</body>
</html>
Output for Office 365 in windows 10
All other clients seem to be fine.
Attempted the fixes from here
Looks like if a font size of 12px or 16px doesn't show the line but the requirement is to use 15px
expected result
The problem is often due to a rounding error in the Outlook engine (MS Word) with odd numbers. In your case, you've already identified an even numbered font-size works. Seeing as that's the core error, and it's not a bug in your code, you have to weigh up whether the unsightliness of the line is worse than changing the size of the font.
If that's not acceptable, you may have luck by setting a line-height of 16px like so: font-size:15px; line-height:16px;.
If all else fails, you can set the font-size differently just for Outlook desktops: font-size:15px; mso-ansi-font-size: 16px;
I Have coded an HTML email signature for outlook, it loads alright in my Compose window, but once sent, images won't load on recipient mail. I've been strugggling to show background images and I've finally accomplished to show them, in fact, they're the only ones showing, but the inserted images won't show.
Here's my code:
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- BEGIN : CTA / Background image -->
<!--[if gte mso 9]>
<img src="https://sigurat.mx/firmas/bg_01.jpg" alt="" border="0" width="550" height="200" style="display:block;" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:550; height:200; position:absolute; top:0; left:0; border: 0; z-index: 2">
<v:fill color="#ffffff" opacity="0%" style="z-index: 1;" />
<div>
<![endif]-->
<!-- Containing Table START-->
<table border="0" cellspacing="0" cellpadding="0" style="background-image: url(https://sigurat.mx/firmas/bg_01.jpg); background-repeat: no-repeat; background-position: left bottom;">
<tbody>
<tr>
<td width="170px" style="text-align: center;">
<img src="https://sigurat.mx/firmas/qr-01.png" width="150" height="150" alt=""/>
</td>
<td width="220px" style="margin-left: 20px;">
<p style="font-family: 'Open Sans', sans-serif; font-weight: 700; color:#65656A; font-size: 14px; ">
Name<br><span style="font-family: 'Open Sans', sans-serif; font-weight: 400; color:#96C93D; font-size: 12px;">Directora y Agente Titular</span>
</p>
<p> </p>
<p style="font-family: 'Open Sans', sans-serif; font-weight: 400; color:#65656A; font-size: 12px;">
<img src="https://sigurat.mx/firmas/tel-01.png" width="12" height="12" alt=""/> (55) <span style="font-weight: 700;">123405789</span><br>
<img src="https://sigurat.mx/firmas/cel-01.png" width="12" height="12" alt=""/> (55) <span style="font-weight: 700;">1234 5678</span><br>
<img src="https://sigurat.mx/firmas/mail-01.png" width="12" height="12" alt=""/> <span style="font-weight: 700;"> mail</span>#mail.mx<br>
<img src="https://sigurat.mx/firmas/web-01.png" width="12" height="12" alt=""/> <span style="font-weight: 700;"> sigurat</span>.mx</p></td>
<td></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td></td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr style="padding-top:6px;">
<td style="text-align:left;">
<img src="https://sigurat.mx/firmas/yt.png" width="12" height="12" alt=""/> <img src="https://sigurat.mx/firmas/fb.png" width="12" height="12" alt=""/> <img src="https://sigurat.mx/firmas/in.png" width="12" height="12" alt=""/> <span style="font-family: 'Open Sans', sans-serif; font-weight: 400; color:#FFFFFF; font-size: 12px;">Escanea el QR y guarda mis datos en tu celular.</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<!-- Containing Table END-->
<!--[if gte mso 9]>
</div></v:fill></v:rect><![endif]-->
<!-- END : CTA / Background image -->
</body>
</html>
And this is how it renders on recipients mail once sent:
Background images load perfectly, but all other inserted images are bieng blocked by Microsoft.
Any help would be great. Thanks in advance.
The background-image attribute is not supported in Word. It acts as an email editor so you need to follow the rules applied in Word. You can read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
Ideally, I'd recommend attaching images as embedded images and then using them in the message body using the cid prefix. That is because Outlook may block internet based images (referenced by URLs) by default. For example, you could attach an images and use the following construction in the message to refer to the attached image:
<IMG src="cid:Communications.jpg" width=200>
See Embedding image in email with VBA for more information.
Outlook blocks all external images by default. The recipient (but not the sender) can enable external images on the per-message basis, but if your message is going out to the recipients outside of your control, the only way to show an image is to add its as an attachment and refer to it by its content id in the <img> tags in the HTML body. See Including Pictures in an Outlook Email .
I'm trying to unify the font to appear the same on all operating systems and devices. Also some design elements break on different devices. what am I doing wrong? this is my code below?
<table border="0" cellpadding="0" cellspacing="0" width="768">
<tbody>
<tr>
<td rowspan="4" border="0" cellpadding="0" cellspacing="0" height="100" width="250">
<img src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/West-Coast-Elevators-Email-Signature-Image.jpg" alt="west coast elevators logo" width="350px" height="150" style=" margin-top: 28px">
</td>
<td colspan="4" height="20" width="200px"><p style="font-size:20px; margin-bottom: 5px; line-height: 20px; font-family: 'sans-serif', 'lato';"><strong>Full Name</strong><br>
<span style="font-size: 15px; font-family: 'sans-serif', 'lato'; color: #000000;">Managing Director</span></p></td>
</tr>
<tr height="10px" width="200px">
<td colspan="1" width="120px"><p style="margin-bottom: -0px; font-size: 15px">0000 000 000</p></td>
<td colspan="2" width="80px"><p style="margin-bottom: -0px;font-size: 15px">08 6263 5253</p></td>
</tr>
<tr>
<td height="47" colspan="3" width="220px"><p style="line-height: 0px; margin-top: 0px; font-family: 'sans-serif', 'lato';font-size: 15px">20 Wynyard St, Belmont WA 6104</p>
<p style="text-decoration: none; line-height: 10px; font-family: 'sans-serif', 'lato'; font-size: 15px">westcoastelevators.com.au </p></td>
<td width="180" ><img style="margin-right: 5px; margin-top: 10px" src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/Artboard-3.png" alt="facebook logo"> <img style="margin-top: 10px" src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/Artboard-4.png" alt="instagram logo"></td></tr>
</tbody>
</table>
This is a great tool for cross-browser/platform font issue: https://google-webfonts-helper.herokuapp.com/fonts/ try to download font from here and then import it in the css file.
To make the font constant everywhere, you would have to use a web font as Mr. Lister has said.
You could get fonts from all over the internet, but for now, getting fonts from here would be best.
An example, after selecting your font, you would import it into your HTML or CSS.
For HTML:
<body>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
</body>
or
<style>
#import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
</style>
For CSS:
#import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
Then to use it in your code (Note: This is how I would do it, after seeing what you are trying to do in your code):
<style>
#import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
.p {
font-family: "Lato", sans-serif;
}
<!-- You will have to remove the font-family styling from all the tags though then leave this style tag in. -->
</style>
However, I strongly advise you look into external CSS. It would make your code much easier to work with.
I'm playing with a new layout of the site and I am getting quite hopeless in chrome and opera everything renders the way it should be but in Mozilla I get unformated output from PHP that is causing this and how to fix this.
I have put everything in a fixed cell but it is somehow ignored:
<td width="900px"> <div id="dynamiclist_index"><?php echo $dynamic_list;?></div></td>
The site is: http://musetemplatespro.com/.
but would not recommend putting styles in div's or td best to create separate stylesheet
<td style="width:900px;">
<td style="width:900px; margin: 0px auto;">
style sheet:
.container {width: 900px margin: 0px auto;}
best to have a container example
<div class="container">
<div id="dynamiclist_index">
<td><?php echo $dynamic_list;?></td>
</div>
</div>
it may work or not
There is no need to create a single table for each output.
It is better if you use it like this:
<table width="900" align="left" border="0" cellspacing="10" cellpadding="0">
<tbody>
<?php foreach($your_values as $value){ ?>
<tr style="width:300; float:left;">
<td>
<ul>
<li><img style="border:#666 1px solid;" src="images/theme_pic/3/3.jpg" alt="3" width="300" height="400" border="1"></li>
<li><a style="font-family: Helvetica, Arial, sans-serif; font-weight: lighter; ">1</a></li>
<li><hr></li>
</ul>
</td>
</tr>
<?php } ?>
</tbody>
</table>
There will be need of more styling but this is safer for cross-browser compatibility
Below is my code for my website. It works perfectly on firefox but not in chrome or safari. The only thing that doesn't work is the navigation row displays to the right of the header picture and the home button is the full length of the header picture. I think it has something to do with the display:inline in the css but I'm note sure.
<html>
<head>
<title>Workouts</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id = "page">
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
<tr class = "nav" height="30px" width="100%">
<td></td>
<td>Home</td>
<td>About</td>
<td>Workouts</td>
<td>Trainers</td>
<td>Contact</td>
<td></td>
</tr>
<tr class = "content" width="100%">
<td><img width="100%" src="images/content.png" /></td>
</tr>
</table>
</div>
</body>
</html>
This is my stylesheet
* {
margin-top:0;
padding-top:0;
padding-bottom: 0;
margin-bottom: 0;
}
body{
background:pink;
}
.border{
background-color: #c92f51;
}
.nav a{
text-decoration: none;
color:pink;
}
.nav a:hover{
color:gray;
}
.nav td{
display: inline-table;
width: 14.29%;
height="30px";
text-align: center;
font-size: 24px;
color:pink;
}
tr .content{
background:#c92f51;
}
.content td{
background:white;
padding: 30px 30px 30px 30px;
}
Invalid mark-up without DOCTYPE declaration. Check your code by copy/paste in w3c validator check the errors.
Every table row has to have the same number of columns. If you don't, you need a colspan attribute to make up for it.
Also you should not have <div> tags directly instead a table. How browsers handle these types of errors is not very consistent, so it's best to fix them. Try changing:
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
To
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<tr id = "header">
<td colspan="7">
<img src =images/header_logo2.png />
</td>
</tr>
And also add the same colspan on the last row:
<tr class = "content" width="100%">
<td colspan=7><img width="100%" src="images/content.png" /></td>
</tr>
More generally, using tables for layout like this is not good practice nowadays. If you search google for "css layouts vs tables" you can find out a lot more about it.
Use a validator. Your HTML is invalid and at least one of your errors causes significant differences in how different browsers error recover from it.
Some will move the <div> that is a child element of the <table> so it is outside the table (because it isn't allowed there).
You don't have any tabular data in there, so get rid of all the table markup and use something more appropriate (e.g. a list for your list of links and so on).