I have the same issue that is asked (and resolved) in this post. However, the solution(s) offered doesn't work for me. I tried both -webkit-text-size-adjust: none and <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> to no avail.
It is a simple HTML page that is text-only
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<title>Pastrami fugiat pork tail ut</title>
</head>
<body bgcolor="#000000" link="#FFFFFF" vlink="#FFFF00">
<h1>Pastrami fugiat pork tail ut</h1>
<p>Pancetta bresaola ham, brisket short ribs tri-tip sed cillum turkey pork loin corned beef venison tail.</p>
</body>
</html>
The CSS
html
{
-webkit-text-size-adjust: none;
}
#font-face{
font-family:"Fertigo";
src: url(Fertigo.otf) format("opentype");
}
body {
padding:0;
margin:1cm;
font-family:"Fertigo", "Georgia";
font-size:56px;
line-height:1.5em;
color:#FFFFFF;
text-align:left;
text-decoration:none;
padding: 0px;
}
h1 {
font-family:"Fertigo", "Helvetica";
color:#FFFFFF;
text-decoration:none;
font-size:1.25em;
font-weight:normal;
margin:0px;
padding:5px 0px 5px 5px;
line-height: 1.5em;
}
h4 {
font-family:"Courier New", "Georgia";
font-size:1em;
color:#FFFFFF;
margin:0px;
padding:0px;
font-weight:normal;
line-height: 1.5em;
}
Try putting your webkit in the body and to every element within body and test it with standard font first like:
body * {
margin:1cm;
font-family:"Georgia";
font-size:56px;
line-height:1.5em;
color:#FFFFFF;
text-align:left;
text-decoration:none;
padding: 0px;
-webkit-text-size-adjust: none;
}
Try this:
body {
padding:0;
margin:1cm;
font-family:"Fertigo", "Georgia";
font-size:56px !important;
line-height:1.5em;
color:#FFFFFF;
text-align:left;
text-decoration:none;
padding: 0px;
-webkit-text-size-adjust: none !important;
}
h1 {
font-family:"Fertigo", "Helvetica";
color:#FFFFFF;
text-decoration:none;
font-size:1.25em !important;
font-weight:normal;
margin:0px;
padding:5px 0px 5px 5px;
line-height: 1.5em;
}
h4 {
font-family:"Courier New", "Georgia";
font-size:1em !important;
color:#FFFFFF;
margin:0px;
padding:0px;
font-weight:normal;
line-height: 1.5em;
}
#media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
html {
-webkit-text-size-adjust: none !important;
}
}
body * { -webkit-text-size-adjust: none; }
seems to work whereas
* { -webkit-text-size-adjust: none; }
..doesn't, interesting.
Related
I am sending emails through a java program using velocity template.
When I open my email in Papercut, the render is looking good but when I open the same email with Outlook, I have a lot of unwanted line breaks.
I have modified the CSS in many ways like adding a specific width for table tag etc, I can see my modifications applied in Papercut but nothing in Outlook in terms of width.
PapercutRender1
OutlookRender1
Here the Html template:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My text </title>
<style>
/* -------------------------------------
GLOBAL RESETS
------------------------------------- */
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
}
body {
background-color: #f6f6f6;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%;
}
table td {
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
}
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
.body {
background-color: #f6f6f6;
width: 100%;
}
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block;
Margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: auto !important;
width: 580px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
box-sizing: border-box;
display: block;
Margin: 0 auto;
max-width: 580px;
padding: 10px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.main {
background: #fff;
border-radius: 3px;
width: 100%;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.footer {
clear: both;
padding-top: 10px;
text-align: center;
width: 100%;
}
.footer td,
.footer p,
.footer span,
.footer a {
color: #999999;
font-size: 12px;
text-align: center;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4 {
color: #000000;
font-family: sans-serif;
font-weight: 400;
line-height: 1.4;
margin: 0;
Margin-bottom: 30px;
}
h1 {
font-size: 35px;
font-weight: 300;
text-align: center;
text-transform: capitalize;
}
p,
ul,
ol {
font-family: sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0;
Margin-bottom: 15px;
}
p li,
ul li,
ol li {
list-style-position: inside;
margin-left: 5px;
}
a {
color: #3498db;
text-decoration: underline;
}
/* -------------------------------------
BUTTONS
------------------------------------- */
.btn {
box-sizing: border-box;
width: 100%;
}
.btn > tbody > tr > td {
padding-bottom: 15px;
}
.btn table {
width: auto;
}
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
}
.btn a {
background-color: #ffffff;
border: solid 1px #3498db;
border-radius: 5px;
box-sizing: border-box;
color: #3498db;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 25px;
text-decoration: none;
text-transform: capitalize;
}
.btn-primary table td {
background-color: #3498db;
}
.btn-primary a {
background-color: #3498db;
border-color: #3498db;
color: #ffffff;
}
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.clear {
clear: both;
}
.mt0 {
margin-top: 0;
}
.mb0 {
margin-bottom: 0;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.powered-by a {
text-decoration: none;
}
hr {
border: 0;
border-bottom: 1px solid #f6f6f6;
Margin: 20px 0;
}
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
#media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body class="">
<table style="width:560px;" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> </td>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<table style="width:560px;" class="main">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper">
<table style="width:560px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!--<img src="http://localhost:8080/wmm-admin/icons/spidex-wmm_original.png" style="width:65%" /> -->
<br/>
<br/>
<p><b>Webb, however, is 100 times more powerful than astronomy's godfather of space telescopes and can peer much deeper into space.
Hubble studies the universe predominantly at ultraviolet and optical, or visible, wavelengths, which is the same type of light we detect with our eyes.
Webb, on the other hand, is set up to specifically look in the infrared, which is invisible to our eyes but allows it to identify the glow from the most distant objects in the universe.
It works in much the same way night vision goggles use thermal imaging technology to capture infrared light.
Because the universe is expanding, just about all of the galaxies that we see from Earth are moving away from us. This means that to us, their light appears to have a longer wavelength, or a redshift.
For very distant objects, this red shift is so large that they can only be observed in the infrared spectrum, which is where Webb comes in, while Hubble focuses on ultraviolet light.
For this reason, the two will work in tandem for a while so that scientists can analyse the data provided by both to help advance our knowledge of the cosmos and how humans first came to be.
Webb began development in 1996 and was originally envisaged to launch in 2007, but a major redesign in 2005 put this back and a series of further delays led to it eventually making it to orbit at the end of last year.
THE JAMES WEBB TELESCOPE
The James Webb telescope has been described as a 'time machine' that could help unravel the secrets of our universe.
The telescope will be used to look back to the first galaxies born in the early universe more than 13.5 billion years ago, and observe the sources of stars, exoplanets, and even the moons and planets of our solar system.
Webb, however, is 100 times more powerful than astronomy's godfather of space telescopes and can peer much deeper into space.
Hubble studies the universe predominantly at ultraviolet and optical, or visible, wavelengths, which is the same type of light we detect with our eyes.
Webb, on the other hand, is set up to specifically look in the infrared, which is invisible to our eyes but allows it to identify the glow from the most distant objects in the universe.
It works in much the same way night vision goggles use thermal imaging technology to capture infrared light.
Because the universe is expanding, just about all of the galaxies that we see from Earth are moving away from us. This means that to us, their light appears to have a longer wavelength, or a redshift.
For very distant objects, this red shift is so large that they can only be observed in the infrared spectrum, which is where Webb comes in, while Hubble focuses on ultraviolet light.
For this reason, the two will work in tandem for a while so that scientists can analyse the data provided by both to help advance our knowledge of the cosmos and how humans first came to be.
Webb began development in 1996 and was originally envisaged to launch in 2007, but a major redesign in 2005 put this back and a series of further delays led to it eventually making it to orbit at the end of last year.
THE JAMES WEBB TELESCOPE
The James Webb telescope has been described as a 'time machine' that could help unravel the secrets of our universe.
The telescope will be used to look back to the first galaxies born in the early universe more than 13.5 billion years ago, and observe the sources of stars, exoplanets, and even the moons and planets of our solar system.
End test:</b> <i>The identified trigger result is higher than the set value.</i> </p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- START FOOTER -->
<div class="footer">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block"></td>
</tr>
</table>
</div>
<!-- END FOOTER -->
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
On the other hand, If I put this text instead, I have no unwanted line break neither in Papercut nor in Outlook:
PapercutRender2
Outlook2
Do you have any idea of how I can get a correct render in Outlook ?
I found out the origin of the problem. I removed the "width: auto !important;" line from the .container class settings:
Before
.container {
display: block;
Margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: auto !important;
width: 580px;
}
And after correction:
.container {
display: block;
Margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: 580px;
}
Then it worked.
do you know how to change background color. i tried using
body.darkmode{
background-color:black;
color: white;
still not working. my code is also very messy because i just started coding in html yesterday. so this is my first time. i'm tring to make a darkmode version. so please dont worry about the content because it just for demonstration. i also make the simmilar post yesterday, but in this case i put some scroll bar and navbar.
<!DOCTYPE html>
<html>
<head>
<title>UwU</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div style="padding:15px 15px 2500px;font-size:15px">
<script>
// When the user scrolls down 20px from the top of the document, slide down the navbar
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
}
</script>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
Settings
</div>
<style>
h1 {text-align: center;}
p {text-align: left;}
div {text-align: left;}
.left {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>UwU</h1>
<p>you just got uwu.</p>
<p>say uwu after you saw master uwu for ton of luck UwU</p>
<div>UwU.</div>
<p></p>
<img src="data:image/jpeg;base64,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" alt="avatar" style="width:300px">
</body>
</html>
<style type ="text/css" >
.footer{
position: fixed;
text-align: left;
bottom: 0px;
width: 100%;
color: black;
}
</style>
</head>
<body>
<div class="footer">Made by rama 4/6/2020
<br>use light mode<a>•••</a>Page 2 UwU
</div>
</body>
You have not added class = "darkmode" to the body tag.
Add this and it should work.
<body class = "darkmode">
I'm needing to add a collapsible sidebar to a mapbox map.
I'm using this example:
https://www.w3schools.com/howto/howto_js_collapse_sidebar.asp
Here is my html file. It shows it load briefly, but then the map renders on top of it.
Ultimately I want to develop a sidebar like what pops up when you click on a feature in Google Maps. I've not quite found something like this, so if anyone knows of a solution, let me know.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Castello Plan: Sidebar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<!-- For Interactive sidebar Head-->
<style>
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
</style>
<!--End Interactive Sidebar Head-->
</head>
<body>
<div id='map'></div>
<!--For Interactive Sidebar Body-->
<div id="mySidebar" class="sidebar">
×
About
Services
Clients
Contact
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Toggle Sidebar</button>
<h2>Collapsed Sidebar</h2>
<p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
<!--End Interactive Sidebar Body-->
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoibml0dHlqZWUiLCJhIjoid1RmLXpycyJ9.NFk875-Fe6hoRCkGciG8yQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/nittyjee/cjowjzrig5pje2rmmnjb5b0y2',
center: [0, 0],
zoom: 0
});
</script>
</body>
</html>
Firstly, add your map to the main div, and set the map css to "position:relative;"
Your open button needed to also be "position:absolute;" and iven a z-depth of 1 tobe above the map.
I added 100% height to the html, body & map css to ensure the content stretches to full height.
Hope this helps.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Castello Plan: Sidebar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width:100%;
height:100%;
}
html, body, #map{
height:100%;
margin: 0px;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
position:absolute;
top:10px;
left:10px;
z-index:1;
border-radius: 3px;
}
.openbtn:hover {
background-color: #444;
}
#main {
position:relative;
transition: margin-left .5s;
padding: 16px;
height:100%;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
</style>
</head>
<body>
<!--For Interactive Sidebar Body-->
<div id="mySidebar" class="sidebar">
×
About
Services
Clients
Contact
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Toggle Sidebar</button>
<div id='map'></div>
</div>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
<!--End Interactive Sidebar Body-->
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoibml0dHlqZWUiLCJhIjoid1RmLXpycyJ9.NFk875-Fe6hoRCkGciG8yQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/nittyjee/cjowjzrig5pje2rmmnjb5b0y2',
center: [0, 0],
zoom: 0
});
</script>
</body>
</html>
I am building an html template for a client which will create a drag and drop builder in mailchimp.
I have used the mso-line-height:exactly attribute globally to control erratic line height applied by Outlook.
However - because of this, when the client inserts an image into the body text using the 'insert image' text editor, the images is clipped at the line height of the text - for example if the line height is 20px, the image only shows the bottom 20px.
The solution I have been provided through research is that I have to remove the mso-line-height attribute globally and only apply it in the html code when I really need it - though this is not something a client can maintain.
How can I remove this attribute on images only? I want the exactly rule to be in place until such time as an image is inserted at which point is it m removed.
I have tried
img {
border:0 !important;
outline:none !important;
display:block !important;
mso-line-height-rule:at-least !important;
mso-height-source:userset !important;
}
And also setting a 'min-height:insert image height !important' manually in the code editor inside the mailchimp interface but nothing works.
At the moment it seems like you only have 2 options
1 - you have correct line height but clients can never insert images amongst the text (the have to be table cells pre-designed to have images in them)
OR
2 - you have incorrect line height and non-clipped images but the ability to insert them when you want.
Is there a solution to this that does not involve editing the html each time but can be handled in in the css?
here is my initial styling
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if gte mso 15]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta content="telephone=no" name="format-detection">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>template</title>
<style type="text/css">
body{
margin:0 !important;
padding:0 !important;
-webkit-text-size-adjust:100% !important;
-ms-text-size-adjust:100% !important;
-webkit-font-smoothing:antialiased !important;
}
/*
#tab Button
#section background-Colour
*/
.button{
/*#editable*/background-color:#e5e5e5 !important;
/*#editable*/color:#000000 !important;
height:43px !important;
margin-right:0 !important;
font-size:15px !important;
padding:0 5px !important;
}
/*
#tab Button_2
#section background-Colour
*/
.button_2{
/*#editable*/background-color:#e5e5e5 !important;
/*#editable*/color:#000000 !important;
margin-right:0 !important;
font-size:15px !important;
padding:0 5px!important;
}
a{
text-decoration:none !important;
color:black !important;
}
span.red-2{
color:#bc3434 !important;
}
span.white-force {
color:#ffffff !important;
text-decoration: none;
}
.white-force a {
color:#ffffff !important;
text-decoration: none;
}
img{
border:0 !important;
outline:none !important;
display:block !important;
}
table{
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0;
}
td{
border-collapse:collapse;
mso-line-height-rule:exactly;
}
a,span{
mso-line-height-rule:exactly;
}
.ExternalClass *{
line-height:100%;
}
.white a{
color:#ffffff;
text-decoration:none;
}
.white1 a{
color:#333333;
text-decoration:none;
background-color:#333333;
}
.white2 a{
text-decoration:none;
}
.black a{
text-decoration:none;
}
.black3 a{
text-decoration:none;
}
.black2 a{
text-decoration:none;
}
.red a{
text-decoration:none;
}
.grey a{
text-decoration:none;
}
.grey1 a{
text-decoration:none;
}
.applewhiltelink a{
color:inherit !important;
text-decoration:none !important;
}
.video img{
width:100%;
height:auto;
}
.mcnTextContent img{
height:auto !important;
}
#media only screen and (min-width:481px) and (max-width:599px){
table[class=wrapper]{
width:100% !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
table[class=main_table]{
width:100% !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
td[class=pad_side]{
padding-left:14px !important;
padding-right:14px !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
td[class=hide],br[class=hide]{
display:none !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
img[class=full_img]{
width:100% !important;
height:auto !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
td[class=text],td[class=black],td[class=black2],td[class=red],td[class=white],td[class=white1],td[class=white2],td[class=grey], td[class=white-force]{
text-align:center !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
td[class=pad_bottom]{
padding-bottom:30px !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
td[class=pad_top],
td[class=pad_top_split]{
padding-top:30px !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
td[class=fix_height]{
height:30px !important;
}
} #media only screen and (min-width:481px) and (max-width:599px){
td[class=video] img{
width:100% !important;
height:auto !important;
}
} #media only screen and (max-width:480px){
table[class=wrapper]{
width:100% !important;
}
} #media only screen and (max-width:480px){
table[class=main_table]{
width:100% !important;
}
} #media only screen and (max-width:480px){
td[class=pad_side]{
padding-left:14px !important;
padding-right:14px !important;
}
} #media only screen and (max-width:480px){
td[class=hide],br[class=hide]{
display:none !important;
}
} #media only screen and (max-width:480px){
img[class=full_img]{
width:100% !important;
height:auto !important;
max-width: none !important;
}
} #media only screen and (max-width:480px){
td[class=text],td[class=black],td[class=black2],td[class=red],td[class=white],td[class=white1],td[class=white2],td[class=grey],td[class=white-force]{
text-align:center !important;
}
} #media only screen and (max-width:480px){
td[class=pad_bottom]{
padding-bottom:30px !important;
}
} #media only screen and (max-width:480px){
td[class=pad_top],
td[class=pad_top_split]{
padding-top:30px !important;
}
} #media only screen and (max-width:480px){
td[class=fix_height]{
height:30px !important;
}
} #media only screen and (max-width:480px){
td[class=video] img{
width:100% !important;
height:auto !important;
}
}
#media only screen and (max-width:480px){
td[class=pad_top_split]{
padding-top:0 !important;
}
}</style></head>
*edit
Each block that contains text (but may not necessarily end up with an image in it, has the class .grey - I tried these options but to no avail
.grey img {
line-height: 100px (random but taller then the test image)!important;
}
And also
.grey img {
line-height:unset !important;
}
I just want any images inserted amongst text to ignore the surrounding line-height.
here is an example block
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper" mc:repeatable mc:variant="text block" style="table-layout:fixed;margin-left:auto;margin-right:auto;">
<tr>
<td valign="top" bgcolor="#000000">
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
<tr>
<td width="50" align="center" class="hide"> </td>
<td valign="top" class="pad_side">
<table width="550" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
<tr>
<td valign="top" height="40" class="fix_height"> </td>
</tr>
<tr>
<td align="center" valign="top" style="font-family:Arial, sans-serif;font-size:15px;line-height:25px;color:#000000;background-color:#000000;" mc:edit="lorem_ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae interdum ligula. Pellentesque feugiat ligula ligula, in interdum dolor aliquet et.</td>
</tr>
<tr>
<td valign="top" height="40" class="fix_height"> </td>
</tr>
</table>
</td>
<td width="50" align="center" class="hide"> </td>
</tr>
</table>
</td>
</tr>
</table>
Try mso-line-height-rule: at-least on your images. It's essentially the opposite to mso-line-height-rule: exactly.
This blog post might offer some more insight.
In my own builds I add this Outlook conditional style block below my other embedded styles. Then on my inline styles, I avoid using mso-line-height rule and only set font-size/line-height as normal
<!--[if mso]>
<style>
td,th,p,a,h1,h2,h3,h4,h5,h6 {
mso-line-height-rule: exactly;
}
<style>
<![endif]-->
I read many similar topics and I tried the suggestions but it seems I can't get this to work.
I am a self-learner, not a professional just building a website for my parents company and I am having a problem with my menu.
This is working fine in IE and Firefox (at least the versions I have) but Chrome and Safari don't like it. Initially in Chrome it looks good but if you zoom out it's breaking and in Safari for iPhone and iPad it's even worse as the last item on my list is never inline with the rest.
What I read is that I need to to have white-space:nowrap; in my code and I do but it's not helping, I was playing with the position attribute as well but none of the values work. Maybe one strange thing about my menu is that each li has an id tag but that's because I want a different image to hover over each item and that's the way I could thing of doing it. I would really appreciate some help, Thanks
Link to the website and code below:http://redcoral-catering.com/index_catering_redcoral.php
Safari iPhone:
HTML:
<div id="navbar">
<ul>
<li id="zero"> за нас</li>
<li id="one"> услуги</li>
<li id="two">нашата кухня</li>
<li id="three" >галерия</li>
<li id="four">филми</li>
<li id="five">кой се е хранил при нас? </li>
<li id="six">контакти </li>
CSS:
#navbar {
width: 894px;
height: 57px;
margin: 0px auto;
padding-left:25px;
padding-top:1px;
/*clear:both;*/
white-space:nowrap;
}
#navbar ul {
font-family: Arial, Verdana;
font-size: 14px;
list-style: none;
margin: 0;
padding: 0;
width:100%;
}
#navbar ul li {
/* display: block; */
display: inline-block;
position: relative;
float: left;
/* border-right: 1px solid #1A1A18;*/
}
#navbar ul li ul { display: none; }
#zero{
background-image: url(images/menu/short.png);
}
#one{
background-image: url(images/menu/short.png);
}
#two{
background-image: url(images/menu/short.png);
}
#three{
background-image: url(images/menu/short.png);
}
#four{
background-image: url(images/menu/short.png);
}
#five{
background-image: url(images/menu/short.png);
}
#six{
background-image: url(images/menu/short.png);
}
#seven{
background-image: url(images/menu/short.png);
}
#navbar ul li a {
display: block;
height: 42px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Calibri, sans-serif;
font-size: 13px;
font-weight: bold;
color: #851212;
border: none;
padding: 10px 28px 5px 28px;
}
#zero a:hover { background-image: url(images/menu/22.png); }
#one a:hover { background-image: url(images/menu/22.png);}
#two a:hover { background-image: url(images/menu/24.png);}
#three a:hover { background-image: url(images/menu/22.png);}
#four a:hover { background-image: url(images/menu/22.png);}
#five a:hover { background-image: url(images/menu/23.png);}
#six a:hover { background-image: url(images/menu/26.png);}
#navbar ul li a:hover {
color: #DF0101;}
Try applying the following settings:
html, body {
margin:0;
padding:0;
}
#navbar {
width: 857px; /* updated width to center properly */
height: 57px;
margin: 0px auto;
/*padding-left:25px;*/
padding-top:1px;
white-space:nowrap;
}
#navbar ul li a {
display: block;
height: 42px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Calibri, sans-serif;
font-size: 13px;
font-weight: bold;
color: #851212;
border: none;
padding: 10px 26px 5px 26px; /* decreased padding very slightly */
}
Also try placing this meta tag in your header:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Let me know if that solves the issue.