I am following an in-line style method to develop this layout. When I make it responsive, the body and footer content is not getting aligned. As you can see in the image shared on the link, contents are not well aligned when it is responsive:
and here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Throttle Up Coaching</title>
</head>
<style type="text/css">
#media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body{width: 400px;}
.gutter img p{width: 400px;}
.content{width: 400px;}
.social-connect {width: 100%;}
}
</style>
<body bgcolor="#EEE">
<div class="content">
<table width="646" cellspacing="0" cellpadding="0" style="color: #D8D8D8; text-align: left; border-collapse: collapse; border-spacing: 0; margin: 0 auto; border: 0;">
<tr>
<td colspan="3" style='color: #fff; margin: 0 auto; padding: 0; font: bold 12px/28px "Trebuchet", "Trebuchet MS", serif;' align="center" bgcolor="#D8D8D8" valign="top">
<a style="color: white; text-decoration: none;" href='/emailer'>CLICK TO VIEW THIS EMAIL IN YOUR BROWSER</a>
</td>
</tr>
<tr>
<td class="gutter" width="60" style="color:black; font-weight: normal; margin: 0;" align="left" bgcolor="#fff" valign="top">
<img src="https://i.ibb.co/bPKhXJG/logo.png" align="top" width="200" style="padding: 30px 40px;">
<img src="https://i.ibb.co/0J1Tdqv/background-image.png" border="0" width=100%>
<div style="padding-left: 50px; padding-right:50px; line-height: 30px;">
<p >My Matching Interview has enrolled you in an interview<br>
<h1 style="font-size: 20px; font-weight: bold;">Sprint: Solve Big problems and test ideas in just five day</h1>
access and complete your interview
</p><br>
COMPLETE YOUR INTERVIEW
<br><br>
<hr>
<p style="font-size: 14px; color: #7A7A7A; line-height: 2; padding-right: 50px;">If you have any questions, please contact support#throttleupcoaching.com or call to our toll free number <b style="color: #000;">+372 800 1800</b></p><br>
</div>
</td>
</tr>
</table>
</div><br><br>
<div class="social-connect" style="font-size: 13px; text-align: center; color: #7A7A7A;">
<table align="center" style="display:inline-block;">
<tr>
<td>
<img src="https://i.ibb.co/Xytf49L/icon-48.png" height="24" alt="LinkedIn">
<img src="https://i.ibb.co/cDyVv3r/icon-49.png" height="24" alt="Facebook">
<img src="https://i.ibb.co/QFpjGhH/icon-50.png" height="24" alt="Google plus">
<br><br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; font-size:12px; font-weight:400; line-height:22px; color:#445566;">
You are receiving this email advertisement because you registered with Throttle Up Coaching by<br>
Javelin Corporation® All Rights Reserved.(123 Main Street, Austin, TX 78701) and agreed to<br>
receive emails from us regarding new features, events and special offers.<br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;font-weight:bold;line-height:16px;text-align:center;color:#445566;">
<a class="footer-link" href="#" target="_blank" style="color: #888888;">Privacy</a>
<a class="footer-link" href="#" target="blank" style= "color:#888888;">Unsubscribe</a>
</div>
</div>
</td>
</tr>
</table>
</div><br><br>
</body>
</html>
Any help to fix this issue will be greatly appreciated. Thank you!
There were a few things (I think) was wrong with your HTML.
Body of the mobile device was set to 400px
content was set to 400px
I have added a new class container to change the width of the outer table on mobile devices.
Below is the update code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Throttle Up Coaching</title>
</head>
<style type="text/css">
#media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
.social-connect {width: 100%;}
.container{width:100% !important;}
}
</style>
<body bgcolor="#EEE">
<div class="content container">
<table width="646" cellspacing="0" cellpadding="0" style="color: #D8D8D8; text-align: left; border-collapse: collapse; border-spacing: 0; margin: 0 auto; border: 0;" class="container">
<tr>
<td colspan="3" style='color: #fff; margin: 0 auto; padding: 0; font: bold 12px/28px "Trebuchet", "Trebuchet MS", serif;' align="center" bgcolor="#D8D8D8" valign="top">
<a style="color: white; text-decoration: none;" href='/emailer'>CLICK TO VIEW THIS EMAIL IN YOUR BROWSER</a>
</td>
</tr>
<tr>
<td class="gutter banner" width="60" style="color:black; font-weight: normal; margin: 0;" align="left" bgcolor="#fff" valign="top">
<img src="https://i.ibb.co/bPKhXJG/logo.png" align="top" width="200" style="padding: 30px 40px;">
<img src="https://i.ibb.co/0J1Tdqv/background-image.png" border="0" width=100%>
<div style="padding-left: 20px; padding-right:20px; line-height: 30px;" class="">
<p >My Matching Interview has enrolled you in an interview<br>
<h1 style="font-size: 20px; font-weight: bold;">Sprint: Solve Big problems and test ideas in just five day</h1>
access and complete your interview
</p><br>
COMPLETE YOUR INTERVIEW
<br><br>
<hr>
<p style="font-size: 14px; color: #7A7A7A; line-height: 2; padding-right: 50px;">If you have any questions, please contact support#throttleupcoaching.com or call to our toll free number <b style="color: #000;">+372 800 1800</b></p><br>
</div>
</td>
</tr>
</table>
</div><br><br>
<div class="social-connect" style="font-size: 13px; text-align: center; color: #7A7A7A;">
<table align="center" style="display:inline-block;">
<tr>
<td>
<img src="https://i.ibb.co/Xytf49L/icon-48.png" height="24" alt="LinkedIn">
<img src="https://i.ibb.co/cDyVv3r/icon-49.png" height="24" alt="Facebook">
<img src="https://i.ibb.co/QFpjGhH/icon-50.png" height="24" alt="Google plus">
<br><br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; font-size:12px; font-weight:400; line-height:22px; color:#445566;">
You are receiving this email advertisement because you registered with Throttle Up Coaching by<br>
Javelin Corporation® All Rights Reserved.(123 Main Street, Austin, TX 78701) and agreed to<br>
receive emails from us regarding new features, events and special offers.<br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;font-weight:bold;line-height:16px;text-align:center;color:#445566;">
<a class="footer-link" href="#" target="_blank" style="color: #888888;">Privacy</a>
<a class="footer-link" href="#" target="blank" style= "color:#888888;">Unsubscribe</a>
</div>
</div>
</td>
</tr>
</table>
</div><br><br>
</body>
</html>
Related
I have created HTML newsletter template and i am using this simple media query but it is not working on gmail IOS app. I have removed all other css from file. I tried #media with screen also
<style>
#media (min-width: 639px) {
.strict-responsive{
background-color: yellow;
width: 50% !important; max-width: 50% !important; display: table-cell !important; margin: 0 auto !important; text-align: center !important;
}
}
#media (max-width: 640px) {
.strict-responsive{
background-color: blue;
width: 100% !important; max-width: 100% !important; display: table !important; margin: 0 auto !important; text-align: center !important;
}
}
</style>
I have added
<!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" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml" lang="en">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and HTMLS are below. Links and urls are working and productions based.
<div id="section_1633119029896" class="hse-section">
<div class="hse-column-container hse-border" style="background-color:#ffffff;">
<div id="column_1633119029896_0" class="strict-responsive">
<div id="hs_cos_wrapper_module_16331191216405" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="module">
<table class="hse-image-wrapper" role="presentation" width="100%" cellpadding="0" align="center" cellspacing="0">
<tbody>
<tr>
<td align="center" valign="top" style="text-align:center;padding:10px 15px 10px 10px; font-size:0px;">
<a href="mobile-phones/iphone-13?capacity=128GB&color=Pink&contractTerm=36" target="_blank" data-hs-link-id="0">
<img alt="iPhone 13" src="/iPhone%2013.jpg" style="max-width:100%;font-size:16px;" width="254" align="middle" class="stretch-on-mobile"></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="column_1633119029896_1" class=" strict-responsive">
<div id="hs_cos_wrapper_module_16331191444106" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="module">
<table class="hse-image-wrapper" role="presentation" width="100%" cellpadding="0" align="center" cellspacing="0">
<tbody>
<tr>
<td align="center" valign="top" style="text-align:center;padding:10px 15px 10px 10px; font-size:0px;">
<a href="mobile-phones/iphone-12?capacity=128GB&color=Blue&contractTerm=36" target="_blank" data-hs-link-id="0">
<img alt="iPhone 12" src="/iPhone%2012.jpg" style="max-width:100%;font-size:16px;" width="254" align="middle" class="stretch-on-mobile"></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I wasn't able to replicate the issue you're seeing, however I did notice you're missing a head tag after the html tag.
With this missing, the background colours weren't rendering which flags that there is an issue.
With/without adding that in, the MQs were still working for me, however one tip would be to format your MQs like this:
#media only screen and (max-width:600px) {...}
Let us know how making these changes work for you.
I am in the process of developing a BootStrap wrapper for an ASP.NET website that works with almost everything I have used in it -- with the only exception being that content in the main panel does not center itself properly when shrinking the browser window's width, despite the header and footer being completely responsive.
I have a fiddle for this problem: https://dotnetfiddle.net/6dmcaX.
PLEASE NOTE that this wrapper is applied to the master page, and not directly onto the pages that I'm testing with.
For the header, I use a div with the following class attributes: d-flex justify-content-center flex-md-rows align-items-center shadow-sm border-menus fixed-top. Inside that is an UpdatePanel and ContentTemplate, with holds a bunch of markup for the BootStrap navbar.
Meanwhile, here is the markup for the main content panel:
<div class="container d-flex justify-content-center flex-md-rows align-items-center">
// the container acts the same with or without the text to the right of "d-flex"
<div id="content" class="row" style="margin-left: auto; margin-right: auto;">
<div id="divContMain" runat="server" style="width: auto;">
<asp:UpdatePanel ID="contentUPanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<center>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</center>
</ContentTemplate>
</asp:UpdatePanel>
</div>
…
</div>
</div>
The container divContMain needs to run on the server because just below the main content is a sidebar which may or may not be needed, depending on the page being called. By default, the class for divContMain is col-12. One thing I tried doing to fix this problem was I changed the main container to a container-fluid and changed divContMain's width to be inherited instead of "auto" -- and while this did a better job keeping contents in the center, it eventually stops working once the window gets small enough.
I'm very close to figuring this one out, but I wanted to ask and see if anyone else knew. Any help would be appreciated!
It is possible to use combination of the Bootstrap classes to justify content when display: flex is used:
d-flex justify-content-center
So you can add new css class for h1:
#MainContent_ctl00 > h1 {
text-align: center;
}
and add d-flex justify-content-center styles for div which contains your table:
<div class="container d-flex justify-content-center" style="overflow-x: visible;">
<table class="datatable datatable-striped"
id="MainContent_dgReqs" style="border-collapse:collapse;"
border="1" rules="all" cellspacing="0" cellpadding="5">
<!-- The other code is omitted for the brevity -->
</table>
</div>
In addition, text can be aligned through text-align: center inside of <h1>.
An example:
.tableint {
font-size: 15px;
font-family: Estrangelo Edessa, Verdana;
border: Solid 1px #666666;
border-collapse: collapse;
color: Black;
}
.thint {
background-color: #EE8322;
color: Black;
font-weight: bold;
font-size: 14px;
border: solid 1px #666666;
border-collapse: separate;
font-variant: small-caps;
margin-bottom: 5px;
}
.textboxint {
background-repeat: repeat-x;
border: 1px solid #d1c7ac;
font-size: 14px;
border-style: inset;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
font-family: Estrangelo Edessa, Verdana;
color: Black;
width: 175px;
}
.dropdownint {
background-repeat: repeat-x;
border: 1px solid #d1c7ac;
font-size: 12px;
border-style: inset;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
font-family: Estrangelo Edessa, Verdana;
color: Black;
width: 175px;
}
.buttonint {
margin: 5px;
font-family: Estrangelo Edessa, Verdana;
font-size: 14px;
background-color: #EE8322;
color: Black;
text-align: center;
border-top-style: groove;
border-left-style: groove;
border-right-color: Black;
border-bottom-color: Black;
height: 22px;
}
.buttonint:hover {
font-family: Estrangelo Edessa, Verdana;
font-size: 14px;
background-color: #FFFFCC;
color: #006699;
margin: 5px;
}
#MainContent_ctl00 > h1 {
text-align: center;
}
<div class="container-fluid my-hs d-flex justify-content-center flex-md-rows align-items-center">
<div class="row justify-content-center" id="content"
style="margin-left: auto; margin-right: auto; padding-top: 1rem;">
<!-- <div id="divContMain" style="width: inherit;">may just remove -->
<div id="contentUPanel">
<div id="MainContent_ctl00">
<br>
<h1>Purchasing Requisitions</h1>
<br>
<div>
<table width="325" align="center" class="tableint" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td align="center" class="thint" colspan="2">Filter</td>
</tr>
<tr>
<td align="left" style="width: 50%">Request Start:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text">
</td>
</tr>
<tr>
<td align="left" style="width: 50%">Request End:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text">
</td>
</tr>
<tr>
<td align="left" style="width: 50%">Part Number:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="left" style="width: 50%">Account:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="left" style="width: 50%">Vendor No:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="left" style="width: 50%">Vendor Name:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="center" colspan="2">
<input class="buttonint" type="submit" value="Search">
</td>
</tr>
</tbody>
</table>
</div>
<br>
<div class="container d-flex justify-content-center" style="overflow-x: visible;">
<table class="datatable datatable-striped" id="MainContent_dgReqs" style="border-collapse:collapse;"
border="1" rules="all" cellspacing="0" cellpadding="5">
<tbody>
<tr align="center" class="thint" style="color:Black;background-color:#EE8322;font-weight:bold;">
<td>Row1</td>
<td>Row2</td>
<td>Row3</td>
</tr>
<tr align="center" class="gridview">
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
<tr align="center" class="gridview" style="background-color:#FFE1CD;">
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src=" index.js"></script>
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
UPDATE:
I saw you edited your fiddle. So the items are aligned, however we need to align the above div container. So to do this, it is necessary to add the following styles:
<div class="row" id="content mx-auto" style="display:flex; justify-content: center;">
<!-- The other code is omitted for the brevity -->
</div>
With some help from StepUp, I was able to find out what exactly was going wrong. The main container needs its position set to absolute and the content group just below the container needs its content justified to the center, like this:
<div class="container-fluid mt-5" style="position: absolute;">
<div id="content" class="row" style="display: flex; justify-content: center;">
…
</div>
</div>
Now everything scales and is properly centered!
I am having trouble trying to line up the "open/close" icon on a Bootstrap Collapse panel... it is always either above the title text or below it... I want it all on one one
Here's an image of what what I get and what I want..
...And here's the markup of the BAD version...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
#Basket {
}
#Basket .panel-title .trigger:before {
content: '\e114';
font-family: 'Glyphicons Halflings';
vertical-align: middle;
text-decoration: none;
color: green;
}
#Basket .panel-title .trigger.collapsed:before {
color: green;
content: '\e080';
text-decoration: none;
}
</style>
<title></title>
</head>
<body id="Basket">
<div class="panel-group">
<div class="panel panel-danger" style="padding: 0px;">
<div class="panel-heading" style="padding: 5px;">
<div class="panel-title" style="padding: 20px">
<a role="button" style="text-decoration: none" data-toggle="collapse" href="#collapse" class="trigger collapsed">
<table style="width: 100%">
<tr>
<th style="padding: 20px; text-align: left;">Data Item 1</th>
<th style="padding: 20px; width: 150px; text-align: right;">Data Item 2</th>
<th style="padding: 20px; width: 150px; padding-left: 5px;">Data Item 3</th>
</tr>
</table>
</a>
</div>
<div id="collapse" class="panel-collapse collapse">
<div class="panel-body">
<table style="width: 100%">
<tr>
<td>
Just some plain old text
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I did it please run the code.
I juts used the tag inside of the "td"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
#Basket {
}
#Basket .panel-title .trigger:before {
content: '\e114';
font-family: 'Glyphicons Halflings';
vertical-align: middle;
text-decoration: none;
color: green;
}
#Basket .panel-title .trigger.collapsed:before {
color: green;
content: '\e080';
text-decoration: none;
}
</style>
<title></title>
</head>
<body id="Basket">
<div class="panel-group">
<div class="panel panel-danger" style="padding: 0px;">
<div class="panel-heading" style="padding: 5px;">
<div class="panel-title" style="padding: 20px">
<table style="width: 100%">
<tr>
<th style="padding: 20px; text-align: left;"><a role="button" style="text-decoration: none" data-toggle="collapse" href="#collapse" class="trigger collapsed">     Data Item 1</a></th>
<th style="padding: 20px; width: 150px; text-align: right;">Data Item 2</th>
<th style="padding: 20px; width: 150px; padding-left: 5px;">Data Item 3</th>
</tr>
</table>
</div>
<div id="collapse" class="panel-collapse collapse">
<div class="panel-body">
<table style="width: 100%">
<tr>
<td>
Just some plain old text
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
#Basket {
}
#Basket .panel-title .trigger:before {
content: '\e114';
font-family: 'Glyphicons Halflings';
vertical-align: middle;
text-decoration: none;
color: green;
}
#Basket .panel-title .trigger.collapsed:before {
color: green;
content: '\e080';
text-decoration: none;
}
</style>
<title></title>
</head>
<body id="Basket">
<div class="panel-group">
<div class="panel panel-danger" style="padding: 0px;">
<div class="panel-heading" style="padding: 5px;">
<div class="panel-title" style="padding: 20px">
<table style="width: 100%">
<tr>
<th style="padding: 20px; text-align: left;"><a role="button" style="text-decoration: none" data-toggle="collapse" href="#collapse" class="trigger collapsed"></a>    Data Item 1</th>
<th style="padding: 20px; width: 150px; text-align: right;">Data Item 2</th>
<th style="padding: 20px; width: 150px; padding-left: 5px;">Data Item 3</th>
</tr>
</table>
</div>
<div id="collapse" class="panel-collapse collapse">
<div class="panel-body">
<table style="width: 100%">
<tr>
<td>
Just some plain old text
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I have the following code, I would like the cells to collapse when the screen's width is less than a specific figure.
Normally I am used to having problems with IE, but in this case both IE and Firefox work well, it's Chrome which wouldn't react to that I'm trying to do.
Any ideas?
My code is:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#media screen and (max-width: 432px) {
.dynTd {display: block;}
}
</style>
</head>
<table style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';font-size:12px;">
<tr>
<td style="vertical-align: top">
<img src="https://xxxxxxxxxx/ccccccc.jpg" width="95" height="85">
</td>
<td style="vertical-align: top; display: block;">
<span style="color:#eb6909;font-size:14px;"><b>Name Surname</b></span><br>
<div style="font-size: 5px;"> </div>
<span>Title</span>
<div style="font-size: 10px;"> </div>
<span style="color:#eb6909;font-size:10px;">TEL</span> <span>+00 000000 000000</span><br>
<span style="color:#eb6909;font-size:10px;">MOBILE</span> <span>+00 000000 000000</span><br>
<span style="color:#eb6909;font-size:10px;">MAIL</span> <span>email#email.com</span><br>
<div style="font-size: 12px;"> </div>
</td>
<td class="dynTd" style="width: 12px;"></td>
<td class="dynTd" style="vertical-align: top;">
<img src="https://xxxxxxxxxx/cccccccc.jpg" alt="Company Name" width="118" height="18">
<div style="font-size: 8px;"> </div>
Company Name<br>
Company Address<br>
Zip code and City<br>
<div style="font-size: 5px;"> </div>
<b>www.company-url.de</b>
</td>
</tr>
</table>
</html>
Turning a td into a block while leaving the tr as is will cause the browsers to compensate - according to the Tables specification,
If a child C of a 'table-row' box is not a 'table-cell', then generate an anonymous 'table-cell' box around C and all consecutive siblings of C that are not 'table-cell' boxes.
And the td elements with display:block are not 'table-cell's anymore!
Therefore, the browsers create such an anonymous table-cell. And apparently, Chrome does so in a different way than FF and IE.
The solution is to make sure this does not happen; for instance to turn all the elements in the table into blocks so that no anonymous table-cells are needed.
#media screen and (max-width: 432px) {
table, tr, td {display: block;}
}
<table style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';font-size:12px;">
<tr>
<td style="vertical-align: top">
<img src="https://xxxxxxxxxx/ccccccc.jpg" width="95" height="85">
</td>
<td style="vertical-align: top; display: block;">
<span style="color:#eb6909;font-size:14px;"><b>Name Surname</b></span><br>
<div style="font-size: 5px;"> </div>
<span>Title</span>
<div style="font-size: 10px;"> </div>
<span style="color:#eb6909;font-size:10px;">TEL</span> <span>+00 000000 000000</span><br>
<span style="color:#eb6909;font-size:10px;">MOBILE</span> <span>+00 000000 000000</span><br>
<span style="color:#eb6909;font-size:10px;">MAIL</span> <span>email#email.com</span><br>
<div style="font-size: 12px;"> </div>
</td>
<td class="dynTd" style="width: 12px;"></td>
<td class="dynTd" style="vertical-align: top;">
<img src="https://xxxxxxxxxx/cccccccc.jpg" alt="Company Name" width="118" height="18">
<div style="font-size: 8px;"> </div>
Company Name<br> Company Address<br> Zip code and City<br>
<div style="font-size: 5px;"> </div>
<b>www.company-url.de</b>
</td>
</tr>
</table>
This will look the same in all browsers. The you can work towards a way to make it look the way you want again...
I started writing html for e-mails using tables. Now, for first time I tried to write using divs, but this is causing a problem: I cannot center align everything I used to be able to center.
Maby what I wrote is not correct, but this is only way that I find, to be able after writing to copy everything from browser to Gmail.
Can someone to tell me how I can center align in this code?
If someone can also tell me if there are better ways to write this code I would be happy to recieve criticism and helpful information.
P.S: I tried padding, positioning, margin, put height and width, but with these options in most results HALF of my bacground or my background is going off at all.
<!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" />
<title>Untitled Document</title>
<style type="text/css">
div#Container {
width: 895px;
height: 525px;
position: absolute;
left: 9px;
top: 15px;
}
div#Room {
padding-left: 245px;
padding-top: 80px;
width: 625px;
}
#Room span {
font-family: Times New Roman, Times, serif;
font-weight: bold;
font-size: 23px;
color: #522405;
}
#D { padding-left: 70px;
}
#GD { padding-left: 103px;
}
#GPV { padding-left: 53px;
}
div#Content {
padding-left: 245px;
padding-top: 10px;
width: 625px;
}
#Right {
position: absolute;
left: 872px;
top: 222px;
}
img.Spacer {
margin-left: 10px;
}
div.content {
font-family: Arial, Helvetica, sans-serif;
color: black;
font-size: 17px;
font-weight: bold;
}
.BP {
vertical-align: text-top;
margin-top: 10px;
margin-left: 245px;
}
.table {
vertical-align: text-top;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
color: #002b55;
margin-left:245px;
}
.TD {
margin-left: 30px;
}
.adress {
font-family: Times New Roman, Times, serif;
font-size: 10px;
text-align: center;
font-weight: bold;
color: #100073;
}
.OOT {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #100073;
text-align:center;
}
.res {
vertical-align: top;
padding-left: 25px;
}
</style>
</head>
<body>
<div>
<img style="position: relative;" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/BK_zpsa93ab347.png" alt="Background" />
</div>
<div id="Container">
<div id="Room" >
<a href="http://bit.ly/XSyPG5" title="Deluxe" target="_blank" >
<img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/D_zpsf4ea5de8.jpg" border="0px" alt="Deluxe" />
</a>
<a href="http://bit.ly/XSyPG5" title="Grand Deluxe" target="_blank" >
<img class="Spacer" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/GD_zpse78278b7.jpg" border="0px" alt="Grand Deluxe" />
</a>
<a href="http://bit.ly/XSyPG5" title="Grand Pool Villa" target="_blank" >
<img class="Spacer" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/GPV_zpsb381cd33.jpg" border="0px" alt="Grand Pool Villa" />
</a>
<br />
<span id="D">Deluxe</span>
<span id="GD">Grand Deluxe</span>
<span id="GPV">Grand Pool Villa</span>
</div>
<div id="Content" class="content">Situated on a hill, Ayara Kamala offers a beautiful garden and ocean view rooms. The place of the hotel provides quiet, calm and romantic holiday away from all other hotels on Kamala Beach.
<br />
<br />
Big size of rooms, king size beds and impressive bathrooms, are making Ayara Kamala perfect selection for couples who are looking for privacy and relaxing holiday.
</div>
<table class="table" style="border-collapse: separate; border-spacing: 1px;" width="625" border="0">
<tr>
<td align="right" style="padding-left: 20px;" width="302"><img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/BP_zps15c948a1.png" border="0px" alt="Best Rate"/></td>
<td width="321" valign="top"><table class="TD" style="border-collapse: separate; border-spacing: 0px;" border="0px">
<tr>
<td height="30" class="res" align="center"><span>www.b2b.onlyonetour.com</span></td>
</tr>
<tr>
<td class="res" height="30" align="center"><span>Tel : (66) 02 - 688 - 8883 </span> </td>
</tr>
<tr>
<td class="res" height="30" align="center"><span>rsvn#onlyonetour.com</span></td>
</tr></table>
</td>
</tr>
</table>
<div align="center" id="Right"><a style="text-decoration: none;" href="http://bit.ly/XSyPG5" title="Only One Tour & Travel Group Co., Ltd." target="_blank"><img width="149px" height="90px" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/logoOOT_zps24c21653.png" border="0px" alt="Logo" /></a>
<a style="text-decoration: none;" href="http://bit.ly/XSyPG5" title="Only One Tour & Travel Group Co., Ltd." target="_blank"><span class="OOT">Only One Tour & Travel<br />Group Co., Ltd.</span></a><br /><br />
<a style="text-decoration: none;" href="http://on.fb.me/XXqq56" title="Only One Tour Facebook Page" target="_blank"> <img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/facebook-logo-png-format-i18_zps83b6a9aa.png" width="145px" height="50px" border="0px" alt="FB"/></a><br /><br />
<span class="adress">2128/9-11 Charoenkung Rd.,</span><br />
<span class="adress">Watprayakrai, Bangkorleam,</span><br />
<span class="adress">10120 Bangkok, Thailand.</span><br />
<a class="adress" href="http://bit.ly/XSyPG5" target="_blank">www.b2b.onlyonetour.com</a><br />
<a class="adress" href="http://on.fb.me/XXqq56" target="_blank">www.onlyonetour.com (offline)</a>
</div>
</div>
</body>
</html>
Now add <div align="center"></div> only for newsletter
as like this
<div align="center">
<img style="position: relative;" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/BK_zpsa93ab347.png" alt="Background" />
</div>
<div id="Container" align="center">
// your code
</div>
<!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" />
<title>Untitled Document</title>
<style type="text/css">
body{
background: url(http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/BK_zpsa93ab347.png) no-repeat top#FFF;
}
#wrapper
{
width:950px;
margin:0px auto;
padding:0px;
}
div#Container {
width: 895px;
height: 525px;
position: absolute;
left: 9px;
top: 15px;
}
div#Room {
padding-left: 410px;
padding-top: 80px;
width: 625px;
}
#Room span {
font-family: Times New Roman, Times, serif;
font-weight: bold;
font-size: 23px;
color: #522405;
}
#D { padding-left: 70px;
}
#GD { padding-left: 103px;
}
#GPV { padding-left: 53px;
}
div#Content {
padding-left: 410px;
padding-top: 10px;
width: 625px;
}
#Right {
position: absolute;
left:1030px;
top: 222px;
}
img.Spacer {
margin-left: 10px;
}
div.content {
font-family: Arial, Helvetica, sans-serif;
color: black;
font-size: 17px;
font-weight: bold;
}
.BP {
vertical-align: text-top;
margin-top: 10px;
padding-left: 410px;
}
.table {
vertical-align: text-top;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
color: #002b55;
padding-left: 410px;
}
.TD {
margin-left: 30px;
}
.adress {
font-family: Times New Roman, Times, serif;
font-size: 10px;
text-align: center;
font-weight: bold;
color: #100073;
}
.OOT {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #100073;
text-align:center;
}
.res {
vertical-align: top;
padding-left: 25px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="Container">
<div id="Room" >
<a href="http://bit.ly/XSyPG5" title="Deluxe" target="_blank" >
<img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/D_zpsf4ea5de8.jpg" border="0px" alt="Deluxe" />
</a>
<a href="http://bit.ly/XSyPG5" title="Grand Deluxe" target="_blank" >
<img class="Spacer" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/GD_zpse78278b7.jpg" border="0px" alt="Grand Deluxe" />
</a>
<a href="http://bit.ly/XSyPG5" title="Grand Pool Villa" target="_blank" >
<img class="Spacer" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/GPV_zpsb381cd33.jpg" border="0px" alt="Grand Pool Villa" />
</a>
<br />
<span id="D">Deluxe</span>
<span id="GD">Grand Deluxe</span>
<span id="GPV">Grand Pool Villa</span>
</div>
<div id="Content" class="content">Situated on a hill, Ayara Kamala offers a beautiful garden and ocean view rooms. The place of the hotel provides quiet, calm and romantic holiday away from all other hotels on Kamala Beach.
<br />
<br />
Big size of rooms, king size beds and impressive bathrooms, are making Ayara Kamala perfect selection for couples who are looking for privacy and relaxing holiday.
</div>
<table class="table" style="border-collapse: separate; border-spacing: 1px;" width="625" border="0">
<tr>
<td align="right" style="padding-left: 20px;" width="302"><img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/BP_zps15c948a1.png" border="0px" alt="Best Rate"/></td>
<td width="321" valign="top"><table class="TD" style="border-collapse: separate; border-spacing: 0px;" border="0px">
<tr>
<td height="30" class="res" align="center"><span>www.b2b.onlyonetour.com</span></td>
</tr>
<tr>
<td class="res" height="30" align="center"><span>Tel : (66) 02 - 688 - 8883 </span> </td>
</tr>
<tr>
<td class="res" height="30" align="center"><span>rsvn#onlyonetour.com</span></td>
</tr></table>
</td>
</tr>
</table>
<div align="center" id="Right"><a style="text-decoration: none;" href="http://bit.ly/XSyPG5" title="Only One Tour & Travel Group Co., Ltd." target="_blank"><img width="149px" height="90px" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/logoOOT_zps24c21653.png" border="0px" alt="Logo" /></a>
<a style="text-decoration: none;" href="http://bit.ly/XSyPG5" title="Only One Tour & Travel Group Co., Ltd." target="_blank"><span class="OOT">Only One Tour & Travel<br />Group Co., Ltd.</span></a><br /><br />
<a style="text-decoration: none;" href="http://on.fb.me/XXqq56" title="Only One Tour Facebook Page" target="_blank"> <img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/facebook-logo-png-format-i18_zps83b6a9aa.png" width="145px" height="50px" border="0px" alt="FB"/></a><br /><br />
<span class="adress">2128/9-11 Charoenkung Rd.,</span><br />
<span class="adress">Watprayakrai, Bangkorleam,</span><br />
<span class="adress">10120 Bangkok, Thailand.</span><br />
<a class="adress" href="http://bit.ly/XSyPG5" target="_blank">www.b2b.onlyonetour.com</a><br />
<a class="adress" href="http://on.fb.me/XXqq56" target="_blank">www.onlyonetour.com (offline)</a>
</div>
</div>
</div>
</body>
</html>
i changes your code and make it center alignment.for using div first u have set the main id(div which named as warapper) and set the margin as margin:0px auto; which automatically align your page center to all browsers
Give the container the whole width of the page by setting width: 100%;, then set the margins of the div you want centered to auto:
margin-left: auto;
margin-right: auto;