I am creating a website for the first time and have run into an issue with the way my page is displayed in Internet Explorer. The page should have a banner with the logos of our sponsors as links to the sponsor's website. It works in Chrome, displaying like
this, a webpage with small, reasonably sized images for the logos. But in IE (version 11), it looks like this, a webpage where I can't even see the whole logo because it is so big. Can someone look at my code and tell me what to change (preferably in simple language since I am a beginner)? Thank you!
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>LTP | Home</title>
<meta name="description" content="Welcome to Language Training Programme">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Microsoft Theme" content="none, default">
<meta name="Microsoft Border" content="none, default">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styling.css" type="text/css" rel="stylesheet">
<!--WHY SPACING SOMETIMES WRONG??-->
</head>
<body>
<!--UNRELATED CODE-->
<table class="sponsors" width=100%>
<tr>
<td width=40%>
<h1>Thank You Sponsors</h1>
</td>
<td rowspan="2">
<img src="Po-Leung-Kuk-logo.png" height="10%">
</td>
<td rowspan="2">
<img src="UBS_logo_logotype_emblem.png" height="3.5%">
</td>
<!--LOOKS BAD IN EXPLORER??-->
</tr>
<tr>
<td class="chinesethankyou">
<h1>谢谢赞助商</h1>
</td>
<td></td>
<td></td>
</tr>
</table>
</body>
* {
margin: 0px;
}
h1 {
font-family:Arial;
color:white;
font-size:25px;
}
h2 {
font-family:Arial;
color:rgb(0,121,194);
font-size: 36px;
padding:20px 0px;
}
.tdlinks {
font-family:Arial;
color:rgb(144,38,143);
font-size: 1.5vw;
font-weight: bold;
padding-bottom: .7vw;
}
.tablelinks {
margin:30px 30px 5px 0px;
}
.sponsors {
background-color: rgb(144,38,143);
box-sizing: border-box;
width: 100%;
padding: 20px 30px;
}
p { /*line spacing*/
font-family:Arial;
color:black;
font-size:14px;
padding:10px 0px;
}
a,a:visited {
color: rgb(144,38,143);
text-decoration: none;
}
.line {
margin:0px 0px 0px 0px;
}
.chinesethankyou{
padding-top: 10px;
}
Getting things to work in other browsers besides chrome can be a little tricky. I recommend checking this site out, if you haven't already W3Schools. My best advice is use Google Chrome first and then move on to another browser. Google Chrome is pretty easy to use without having to do anything extra for its browser.
Setting image height and width will work
.sponsors img{
width: 150px;
height: 150px;
display: inline-block;
}
Related
I`m having this issue when I am viewing the email using Gmail App (Mobile):
The table columns are stacking on mobile on all email clients except the Gmail App
I noticed that the styles are not working on google, but if i put the CSS using inline (Ex. style="background-color:red") it works.
I saw a lot of articles saying that the does not works on gmail, but another saying that works if you put it inside the tag.
Main Layout:
#using Sitecore.Mvc.Analytics.Extensions
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
<!-- Used for storing title of the email -->
#Html.Sitecore().Field("Subject")
</title>
<!-- The VisitorIdentification control ensures that people viewing this page with a traditional web browser will be classified as humans not bots. This control is not required if people only view messages using Email clients -->
#Html.Sitecore().VisitorIdentification()
#if (Sitecore.Context.PageMode.IsExperienceEditorEditing)
{
<link href="~/Assets/5-Components.min.css" rel="stylesheet" />
}
<style type="text/css">
body {
margin: 0px !important;
padding: 0px !important;
}
.wrapper > tbody > tr > td {
box-sizing: border-box;
}
##media only screen and (max-width:720px) {
.wrapper {
width: 90% !important;
margin: auto;
}
.templateColumnContainer {
display: block !important;
/* padding: 0 !important; */
width: 100% !important;
}
.marginBtm {
margin-bottom: 0px;
}
.footerLeft {
border-right: 5px #c2c2c2 solid;
border-bottom: 0px #c2c2c2 solid !important;
}
.footerRight {
border-left: 5px #c2c2c2 solid;
border-top: 0px #c2c2c2 solid !important;
}
}
</style>
</head>
<body style="min-height: 97vh; background-color:#c2c2c2; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box" class="#((Sitecore.Context.PageMode.IsExperienceEditorEditing) ? "edit-mode" : string.Empty)">
<div style="min-height: 97vh; margin:0; padding-top: 16px; background-color:#c2c2c2; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box">
<center>
#Html.Sitecore().Placeholder("mail-body")
</center>
</div>
</body>
</html>
Component Placeholder:
#model XX.Project.EXM.Models.ColumnComponent
<table width="600" cellpadding="0" cellspacing="0" class="wrapper">
<tbody>
<tr>
<td width="50%" class="templateColumnContainer marginBtm" style="background-color: #Model.BackgroundColor; border: 5px #c2c2c2 solid; Padding: #Model.getFormattedPaddingDistance(); color:#Model.TextColor;">
#Html.Sitecore().DynamicPlaceholder("mail-left-double-column")
</td>
<td width="50%" class="templateColumnContainer" style="background-color: #Model.BackgroundColor; border: 5px #c2c2c2 solid; Padding: #Model.getFormattedPaddingDistance(); color:#Model.TextColor;">
#Html.Sitecore().DynamicPlaceholder("mail-right-double-column")
</td>
</tr>
</tbody>
</table>
When GMail encounters an error in your CSS, it will remove the entire <style> block from the head.
You have 2 # symbols in front of your media query.
##media only screen and (max-width:720px) {
I have following table:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TTT</title>
<style>
/* on both */
body {
overflow-x: hidden;
}
.full-width {
position: relative;
margin: 0 -9999rem;
padding: .25rem 9999rem;
background-color: #000;
color: white;
font-size: 1.125rem;
}
</style>
</head>
<body>
<table class="full-width" style="background-color: #000;">
<td style="color: #FFF">
Text
</td>
<td style="color: #FFF">
Text 2
</td>
</table>
</body>
</html>
Setting html overflow-x: hidden is not an option. Would work but destroy my outbound table. Only on Safari I've a scrollbar. And here.
Snippet partly from here: https://css-tricks.com/full-browser-width-bars/
I am currently building an HTML email and I inherited some code to work with, my current issue is that there is a section on the email that was built using tags and they are not display correctly on several email services.
What alternatives do I have for blockquote? I have added my code below for your reference, I need to keep the same look but make it work.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Example Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting"> <!-- prevent automatic off-centered scaling in iOS -->
<style type="text/css">
#outlook a {
padding:0; /* trigger read in browser link in Outlook */
}
body, #bodyTable {
width:100% !important;
height: 100% !important;
-webkit-text-size-adjust:100%; /* disable auto-enlarge of text in mobile */
-ms-text-size-adjust:100%;
margin:0;
padding:0;
background-color:#eeeeee;
}
/* Outlook fixes */
/* Styles */
img, a img {
display: block; /* Remove extra space */
border: 0;
outline: none;
text-decoration: none;
-ms-interpolation-mode:bicubic; /* image resize fix for IE */
}
#main td, p, #subs td {
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
line-height: 22px;
color: #505050;
}
blockquote {
background:url('https://email.jmls.edu/USnews/2019/lawyering-skills/images/quote.png') left top no-repeat, url('https://email.jmls.edu/USnews/2019/lawyering-skills/images/endquote.png') right bottom no-repeat;
background-color:#f8f8f8;
padding: 30px 40px 30px 40px;
margin: 14px 30px;
}
blockquote p {
margin-top: 2px;
margin-bottom:2px;
font-weight:bold;
font-size:14px;
}
/* mobile-specific styles */
</style>
<table width="100%" id="bodyTable" border="0" cellpadding="0" cellspacing="0">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" id="main" style="background-color: #ffffff; border:1px solid #444444;">
<tbody>
<tr>
<td>
<tr>
<td style="padding: 10px 15px 20px;">
<blockquote><p>“It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.” </p>
<p style="text-align:right; font-weight:normal;">—Chicago </p></blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</td>
</tr>
</td>
</tr>
</tbody>
</table>
</table>
</head>
</html>
Hello and thank you for taking the time to look inside my post.
I am currently building an HTML email and I inherited some code to work with, my current issue is that there is a section on the email that was built using tags and they are not display correctly on several email services.
What other alternatives do I have for blockquote?? I have added my code below for your reference, I need to keep the same look but make it work. Thanks a lot!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Example Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting"> <!-- prevent automatic off-centered scaling in iOS -->
<style type="text/css">
#outlook a {
padding:0; /* trigger read in browser link in Outlook */
}
body, #bodyTable {
width:100% !important;
height: 100% !important;
-webkit-text-size-adjust:100%; /* disable auto-enlarge of text in mobile */
-ms-text-size-adjust:100%;
margin:0;
padding:0;
background-color:#eeeeee;
}
/* Outlook fixes */
/* Styles */
img, a img {
display: block; /* Remove extra space */
border: 0;
outline: none;
text-decoration: none;
-ms-interpolation-mode:bicubic; /* image resize fix for IE */
}
#main td, p, #subs td {
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
line-height: 22px;
color: #505050;
}
blockquote {
background:url('https://email.jmls.edu/USnews/2019/lawyering-skills/images/quote.png') left top no-repeat, url('https://email.jmls.edu/USnews/2019/lawyering-skills/images/endquote.png') right bottom no-repeat;
background-color:#f8f8f8;
padding: 30px 40px 30px 40px;
margin: 14px 30px;
}
blockquote p {
margin-top: 2px;
margin-bottom:2px;
font-weight:bold;
font-size:14px;
}
/* mobile-specific styles */
</style>
<table width="100%" id="bodyTable" border="0" cellpadding="0" cellspacing="0">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" id="main" style="background-color: #ffffff; border:1px solid #444444;">
<tbody>
<tr>
<td>
<tr>
<td style="padding: 10px 15px 20px;">
<blockquote><p>“It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.” </p>
<p style="text-align:right; font-weight:normal;">—Chicago </p></blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</td>
</tr>
</td>
</tr>
</tbody>
</table>
</table>
</head>
</html>
I am new to HTML but have been programming for over 50 years. I am trying to place an image in a table. I can see from googling that this is possible. NuHtml chcker keeps keeps rejecting the code. What have I done wrong ?
What I had originally included was a snippet where I was having a problem Thanks for your help & sorry that I may have wasted your time. I had developed it in Word in the mistaken belief that I could just save as HTML & all would be OK. After 50 years with computers, I should have known better. The structure of the page is 2 columns with multiple rows - some rows merging into 1 column.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Wed, 25 Apr 2018 14:13:29 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>ND Mailshot_2</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<table>
<img src="Reminder-1_files/image001.jpg" height="204" alt="ND Logo" title="ND Logo" style="float: left; width: 30%; margin-right: 1%; margin-left:5%; margin-bottom: 0.5em;"/>
<style>.centered {
position: absolute;
top: 30%;
left: 55%;
transform: translate(-50%, -50%);
color: red;
font-family: "Trebuchet MS", Helvetica, sans-serif ;
font-size:150%;
font-weight: bold;
text-shadow: 2px 2px white;
}
</style>
<div class="container">
<a href="https://www.youtube.com/watch?v=Cg8Zo2SrqXI&feature=youtu.be&t=15s?rel=0&autoplay=1">
<img src="Reminder-1_files/image002.gif" height="206" alt="" title="Mod Meter" style="float: left; width: 30%; margin-right: 5%; margin-left:5%; margin-bottom: 0.5em;"/></a></div>
<p style="clear: both;">
</tr><tr>
<span>
<style>
p {
color: rgb(0,44,132);
text-align: justify;
max-width:40%;
font-size:150%;
font-family: "trebuchet MS", Helvetica, sans-serif;
font-weight: bold;
}
</style>
<p>Hi Kris<br>
Just a quick reminder of some of our metering products. In particular the MultiCube Modular Meter (above right) and the Cube 950 triple 3 Meter (below). If you need any more information just click on the image for more info on the product or follow this link to our website.
Alternatively - or possibly as well - you might try this link. You'll need your sound ON and I hope that you enjoy it.</p>
</span>
<span>
<a href="https://www.ndmeter.co.uk/current-transformers.html">
<img src="Reminder-1_files/image004.jpg" height="206" alt="" title="Mod Meter" style="float: right; width: 30%; margin-right: 5%; margin-left:5%; margin-bottom: 0.5em;"/></a>
<div class="centered">Remote Display now available</div>
</td>
</span>
</tr>
</table>
</body>
</html>
To be honest, I have no idea what is going on with your HTML but I tried to fix it (which is not perfect yet):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
<style>
.centered {
position: absolute;
top: 30%;
left: 55%;
transform: translate(-50%, -50%);
color: red;
font-family: "Trebuchet MS", Helvetica, sans-serif ;
font-size:150%;
font-weight: bold;
text-shadow: 2px 2px white;
}
p {
color: rgb(0,44,132);
text-align: justify;
max-width:40%;
font-size:150%;
font-family: "trebuchet MS", Helvetica, sans-serif;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<td>
<a href="https://www.youtube.com/watch?v=Cg8Zo2SrqXI&feature=youtu.be&t=15s?rel=0&autoplay=1">
<img src="https://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" alt="" title="Mod Meter" style="float: left; width: 30%; margin-right: 5%; margin-left:5%; margin-bottom: 0.5em">
</a>
</td>
<td>
<p>Hi Kris</p>
</td>
</tr>
</table>
</div>
</body>
</html>
ALWAYS use <!DOCTYPE html>, close your tags (as long as they are closable) and only use inline CSS if you really need to.
Start to learn HTML on https://www.w3schools.com/html/html_intro.asp