Output rendering in Mozilla different - html

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

Related

How to remove "ghost" line showing up in a coded html email?

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;

Email newsletter: changing color of email output doesn't works in Outlook

I have created a newsletter which displays the email address in the wrong color in Outlook. In the web version the email address is displayed in white without problems and in Outlook it is displayed in blue.
This is the part of the code:
<div class="column" style="width:100%;max-width:320px;display:inline-block;vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" style="border-spacing:0;font-family: roboto, Arial, sans-serif;color:#ffffff;background-color:#393939;" width="100%">
<tbody>
<tr>
<td class="inner" style="padding-top: 5px; padding-bottom: 5px; padding-right: 20px; padding-left: 20px; font-size:0">
<table border="0" cellpadding="0" cellspacing="0" class="contents" style="border-spacing:0;font-family: roboto, Arial, sans-serif;color:#ffffff !important;width:100%;font-size:11px;text-align:left;text-decoration: none;">
<tbody>
<tr>
<td color="color: #ffffff" style="padding:0; color: #ffffff !important">Ipsum Lorem:<br />
<div style="color: #ffffff; font-family: roboto, Arial, sans-serif;">{$EMAIL}</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Does anyone know how to change this?
Thanks in advance
The background property is not supported in Word (only when there is a URL). The fact is that Outlook uses Word for rendering HTML bodies. You can read more about supported and unsupported HTML elements and CSS properties in the following articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)

Font isn't consistent on the old devices and platforms, and design elements break sometimes

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.

HTML Images are misalign on chrome and safari

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>

Website works in firefox but not in chrome or safari. Navigation row does not line up correctly in chrome and safari

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).