Unwanted Spacing in HTML Tables Within Outlook Email Signature - html

A table I create in HTML for use in an Outlook email signature seems to show strange problems, adding extra spacing.
Here is how it looks in Outlook:
Here is how it looks in Chrome:
The code is as below:
<html>
<head>
<title>JohnDoe</title>
<style>
p {
align:justify;
}
#contentTable{
padding-top: 25px;
padding-right: 35px;
padding-bottom: 25px;
padding-left: 35px;
width: 480px;
height: 105px;
}
#logo{
height: 210px;
width: 228px;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
margin: 0;
border: 0;
padding: 0;
display: block;
border-collapse:collapse;
}
.table{
border-collapse:collapse;
}
#nameRow{
height: 18px;
}
#nameField{
font-size: 24;
font-family: "Helvetica";
color: #73A84D;
font-weight: bold;
width: 100%;
}
#dirRow{
height: 14px;
}
#dirField{
font-size: 18;
font-family: "Helvetica";
color: #606062;
}
.descRow{
}
.descField{
font-size: 10;
font-family: "Helvetica";
font-weight: 900;
color: #96989A;
}
.valueField{
font-size: 10;
font-family: "Helvetica";
font-weight: 900;
color: #606062;
text-align: justify;
}
</style>
<body>
<table id="contentTable">
<tr>
<td>
<img src="http://s14.postimg.org/eo35t2l4t/logo.jpg" />
</td>
<td>
<table id="infoTable">
<tr id="nameRow">
<td id="nameField">JOHN DOE</td>
</tr>
<tr id="dirRow">
<td id="dirField">
Attorney
</td>
</tr>
<tr>
<table>
<tr>
<td>
<p id="descFieldPara" class="descField">
PHONE:<br>
EMAIL:<br>
<br>
URL:
</p>
</td>
<td id="valueFieldPara" class="valueField">
<p>+ 12 3456 789 012<br>JOHN.D#BLAHBLAH.COM.US<br>ATTORNEY#BLAHBLAHJOHNDOE.COM.US<br>WWW.BLAHBLAHJOHNDOE.COM.US
</p>
</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
</table>
</body>
</head>
</html>
Can someone tell me what is the reason for this discrepancy?

Related

How to make this web page space-optimized using CSS?

I have this tiny web page:
This is the source code:
<head>
<meta charset="UTF-8">
<style>
body {
margin-left: 20px;
margin-top: 20px;
}
h1 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h2 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h3 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h4 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h5 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h6 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
hr {
height: 3px;
border-radius: 2px;
border-width: 0;
color: lightgray;
background-color: lightgray;
}
.button {
display: inline-block;
background-color: darkgray;
color: white;
text-decoration: none;
border-radius: 2px;
padding: 6px;
margin-left: 2px;
margin-right: 2px;
}
.button:hover {
color: black;
}
.button:visited {
color: white;
}
.button:active {
color: white;
}
a {
color: gray;
}
</style>
</head>
<body nyxt-identifier="0">
<style nyxt-identifier="1">
body {
margin-left: 20px;
margin-top: 20px;
}
h1 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h2 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h3 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h4 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h5 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
h6 {
font-family: Helvetica Neue, Helvetica;
font-weight: 500;
}
hr {
height: 3px;
border-radius: 2px;
border-width: 0;
color: lightgray;
background-color: lightgray;
}
.button {
display: inline-block;
background-color: darkgray;
color: white;
text-decoration: none;
border-radius: 2px;
padding: 6px;
margin-left: 2px;
margin-right: 2px;
}
.button:hover {
color: black;
}
.button:visited {
color: white;
}
.button:active {
color: white;
}
a {
color: gray;
}
</style>
<h1 nyxt-identifier="2">Bindings</h1>
<p nyxt-identifier="3">
</p>
<div nyxt-identifier="4">
<h3 nyxt-identifier="5">override-map</h3>
<table nyxt-identifier="6">
<tbody nyxt-identifier="7">
<tr nyxt-identifier="8">
<td nyxt-identifier="9">C-S
</td>
<td nyxt-identifier="10">search-buffers
</td>
</tr>
<tr nyxt-identifier="11">
</td>
</tr>
</tbody>
</table>
</div>
<div nyxt-identifier="44">
<h3 nyxt-identifier="45">web-cua-map</h3>
<table nyxt-identifier="46">
<tbody nyxt-identifier="47">
<tr nyxt-identifier="48">
<td nyxt-identifier="49">f3
</td>
<td nyxt-identifier="50">search-buffer
</td>
</tr>
<tr nyxt-identifier="51">
</td>
</tr>
</tbody>
</table>
</div>
<div nyxt-identifier="195">
<h3 nyxt-identifier="196">base-cua-map</h3>
<table nyxt-identifier="197">
<tbody nyxt-identifier="198">
<tr nyxt-identifier="199">
<td nyxt-identifier="200">f5
</td>
<td nyxt-identifier="201">reload-current-buffer
</td>
</tr>
<tr nyxt-identifier="202">
</td>
</tr>
</tbody>
</table>
</div>
</body>
The code and image above are a simplification of the real problem. In the real problem, the page is way bigger because the table has more elements than the currently shown.
I would like to use the space in a better way so that printing it would not spend too much paper. There is a lot of space being wasted on the right side of the screen.
The content could be more widespread horizontally instead of only vertically.
Two feasible approaches to achieve this goal would be (i) reducing the font-size, and (ii) making the table be a 2 column-table or 3-column instead of 1-column.
OK. I can reduce the font-size with CSS:
tr { font-size: 10px}
Thus, I would like to ask:
1 - How to make the table be 3-column or 2-column table using CSS?
I tried this approach following the example on W3C:
table {
column-span: all;
}
But it did not work out.
2 - Would you have any suggestions beyond the font and column number tweak to maximize the use of space and reduce the use of paper?

This is not complicated at all. You just have to put all the key bindings and headings in one table instead of each in it's own. Then, we use a little bit of CSS to get a small border line between the table cells - just remove the CSS part if you don't want a border. Like this:
table {
border-spacing: 0;
}
td {
border: 1px solid black;
padding: 10px;
}
<h1>Bindings</h1>
<table>
<tbody>
<tr>
<td colspan="2">
override-map
</td>
<td colspan="2">
web-cua-map
</td>
<td colspan="2">
base-cua-map
</td>
</tr>
<tr>
<td>
C-S
</td>
<td>
search-buffers
</td>
<td>
F3
</td>
<td>
search-buffer
</td>
<td>
F5
</td>
<td>
reload-current-buffer
</td>
</tr>
</tbody>
</table>

Horizontal Line appearing in HTML Email message format - Outlook office 365

I am trying to send an email from outlook (office 365) as HTML format. There is a thin line appearing in a large screen monitor(27 inch or more) or with a zoom level 175%. The below code doesn't show any horizontal line with 100% zoom in office 365 outlook, but if I increase the zoom (Click tab , Format Text --> Zoom) to (170%-200%), a horizontal line appears randomly below some part of header ex; Information -2 header, title header (image attached).
Here is my html that I am inserting in outlook mail.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Request Submitted</title>
<style type="text/css">
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" button. */
body {
width: 100% !important;
/*line-height: 100%;*/
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
/* Force Hotmail to display emails at full width */
body {
-webkit-text-size-adjust: none;
}
/* Prevent Webkit platforms from changing default text sizes. */
/* Reset Styles */
body {
margin: 0;
padding: 0;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
.ExternalClass * {
line-height: 100%;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
table,
u,
td,
p {
margin: 0;
margin-bottom: 0;
padding: 0;
}
body {
padding: 0;
font-family: "Segoe UI Light", "Segoe UI", "Arial";
}
h1 {
font-size: 24px;
font-weight: normal;
margin: 10px 0px;
}
h2,
.h2 {
display: block;
padding: 5px 10px;
background-color: rgb(195, 203, 211);
color: rgb(52, 73, 94);
font-size: 16px;
}
h4 {
margin-left: 9px;
}
div.statusLabel {
display: block;
height: 20px;
padding: 10px;
background-color: rgb(195, 203, 211);
margin-bottom: 10px;
margin-right: 20px;
}
div.statusLabel.partialStatus {
height: 36px;
}
div.statusLabel p {
color: #FFFFFF;
font-size: 16px;
line-height: 16px;
text-align: center;
text-transform: uppercase;
}
div.statusLabel span {
display: none;
}
div.statusLabel.partialStatus span {
display: inline;
}
div.statusTile {
display: block;
width: 98px;
height: 98px;
padding: 10px;
background-color: rgb(195, 203, 211);
border: 1px solid rgb(183, 192, 202);
margin-bottom: 20px;
margin-left: 10px;
float: left;
}
div.statusTile.leftTile {
margin-left: 0px !important;
}
div.statusTile p {
position: relative;
top: 36px;
color: #FFFFFF;
font-size: 16px;
text-align: center;
}
div.statusTile span {
display: none;
}
div.statusTile.twoLine span {
display: block;
}
div.statusTile.twoLine p {
top: 24px;
}
/*Colors*/
.submitted {
background-color: #0078D7 !important;
}
.approved {
background-color: #107C10 !important;
}
.reserved {
background-color: #FFB900 !important;
}
.noRibbon {
border: 0 !important;
}
table table table {
margin-top: -10px !important;
}
</style>
</head>
<body style="font-family: " Segoe UI ", open-sans, Geneva, Verdana, sans-serif;font-weight:lighter;">
<table id="tblMain" cellpadding="0" cellspacing="0" height="100%" width="100%" border="0">
<tbody>
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" width="800" border="0">
<tbody>
<tr>
<td>
<p style="font-size:16px;margin:0px"><b><i>Email Heading.</i></b> </p>
<h1>This is a Test Email.</h1>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td width="28%" valign="top" style="padding:10px 0px 20px 0px;">
<table width="90%" border="0" cellspacing="10" cellpadding="10">
<tbody>
<tr style="padding-top:10px;">
<td style="padding:10;background-color:#0078D7;">
<p style="color:#FFFFFF;font-size:15px;line-height:17px;margin:0px;text-align:center;text-transform:uppercase;">Title - 1</p>
</td>
</tr>
<tr>
<td style="padding:10;background-color:rgb(195,203,211);">
<p style="color:#FFFFFF;font-size:15px;line-height:17px;margin:0px;text-align:center;text-transform:uppercase;">Title - 2</p>
</tr>
<tr>
<td style="padding:10;background-color:rgb(195,203,211);">
<p style="color:#FFFFFF;font-size:15px;line-height:17px;margin:0px;text-align:center;text-transform:uppercase;">Title - 3</p>
</td>
</tr>
<tr>
<td style="padding:10;background-color:rgb(195,203,211);">
<p style="color:#FFFFFF;font-size:15px;line-height:17px;margin:0px;text-align:center;text-transform:uppercase;">Title - 4</p>
</td>
</tr>
<tr>
<td style="padding:10;background-color:rgb(195,203,211);">
<p style="color:#FFFFFF;font-size:15px;line-height:17px;margin:0px;text-align:center;text-transform:uppercase;">Title - 5</p>
</td>
</tr>
</tbody>
</table>
</td>
<td width="72%" valign="top" style="padding:10px 0px 20px 0px;">
<!--Intro Text-->
<p style="line-height:20px;">Hello User,
</p>
<br /> Please ignore this email.
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="background-color:rgb(195,203,211);color:rgb(52,73,94);font-size:15px;padding:10px;"> <b style="color:rgb(52,73,94);">
Information - 1</b>
</td>
</tr>
<tr>
<td style="padding-top:10px; padding-bottom:20px;">
<table cellpadding="0" cellspacing="10" width="100%">
<tbody>
<tr>
<td width="50%"><b>Header 1</b>: <span></span> </td>
<td width="50%"><b>Header 2</b>: <span></span> </td>
</tr>
<tr>
<td width="50%"><b>Header 3</b>: <span></span> </td>
<td width="50%"><b>Header 4</b>: <span></span> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding:5px 10px;background-color:rgb(195,203,211);"> <b style="color:rgb(52,73,94);font-size:16px;">Information - 2</b> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I have modified the td padding, the line disappears for td padding 10px, but that is not consistent. Can you please help me how can I remove the horizontal line for zoom level 180%? This issue can be seen with a monitor 27 inch or more.
Thank you.

Can not place 2 tables side-to-side

I'm fairly new to HTML so please bear with me. I'm trying to create a printable invoice in html. I'm having an issue with placing the top 2 tables side by side. Despite using inline-block, the tables are not being stacked next to each other
What am I doing wrong? Any help or suggestion would be greatly appreciated!
body {
padding: 1%;
padding-top: 3%;
font-family: Arial, Arial Black;
font-size: small;
}
.RetailerLogo {
position: absolute;
top: 0px;
width: 250px;
}
.RetailerLogo img {
width: 100%;
}
.RetailerOrderData {
position: absolute;
top: 20px;
right: 20px;
font-size: small;
}
.PageTitle {
font-family: Arial Black, Arial;
font-size: x-large;
border-bottom: 5px;
}
table thead {
font-family: Arial Black, Arial;
background: Pink;
color: Red;
height: 15px;
}
table thead td {
border-bottom: solid thin black;
}
table.Info {
width: 50%;
margin-bottom: 20px;
margin-right: 2%;
border-style: solid;
border-width: thin;
border-color: Red;
}
table.Info tbody td {
font-family: Arial;
height: 60px;
padding-top: -3px;
}
table.Contents {
width: 99%;
display: block;
text-align: center;
border-style: solid;
border-width: thin;
border-color: Black;
font-family: Arial;
font-size: small;
}
table.Contents tbody {
border-style: solid;
border-width: thin;
border-color: Black;
}
table.Contents tbody td {
padding-top: 0px;
margin-bottom: -5px;
}
table.Contents tbody tr {
padding-top: 0px;
margin-bottom: -5px;
}
<div class="RetailerLogo">
<img class="RetailerLogo" src="filepath" alt="Retailer Logo" />
</div>
<BR>
<BR>
<BR>
<BR>
<center>
<div class="PageTitle">Package Summary</div>
</center>
<BR>
<BR>
<BR>
<BR>
<BR>
<div class="RetailerOrderData">
<span style="FONT-SIZE: 10pt; FONT-FAMILY: AdvC39c; FONT-SIZE: 12pt; font-stretch:expanded;">
*%RETAILERORDERNUMBER%*
</span><br /> Order #: %RETAILERORDERNUMBER%<br /> Order Date: %RETAILERORDERDATE%<br /> Ship Method: %SHIPPINGMETHOD%<br/>
</div>
<table border="0" class="Info ShippingReturn">
<thead>
<tr>
<td>
Contact Info: Company Name
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGRETURNADDRESS%<br/> Email: orders#gifpop.io
</td>
</tr>
</table>
<table class="Info ShipTo">
<thead>
<tr>
<td>
Shipped to: %CUSTOMERNAME%
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGADDRESS%
</td>
</tr>
</table>
<table class="Contents">
<thead>
<tr>
<td width="125"><b>Image</b></td>
<td width="75"><b>Qty</b></td>
<td width="150"><b>Code</b></td>
<td width="320"><b>Description</b></td>
</tr>
</thead>
%SHIPMENTDETAILWITHIMAGE%
<tr>
<td width="125"> </td>
<td width="75"> </td>
<td width="150"> </td>
<td width="320"> </td>
</tr>
</table>
<b>
<b>
<b>

check out this hope this would work..capsule tables inside div and adjust using float property hope it would solve ur issue..
.floatLeft { width: 50%; float: left; }
.floatRight {width: 50%; float: right; }
.container { overflow: hidden; }
body {
padding: 1%;
padding-top: 3%;
font-family: Arial, Arial Black;
font-size: small;
}
.RetailerLogo {
position: absolute;
top: 0px;
width: 250px;
}
.RetailerLogo img {
width: 100%;
}
.RetailerOrderData {
position: absolute;
top: 20px;
right: 20px;
font-size: small;
}
.PageTitle {
font-family: Arial Black, Arial;
font-size: x-large;
border-bottom: 5px;
}
table thead {
font-family: Arial Black, Arial;
background: Pink;
color: Red;
height: 15px;
}
table thead td {
border-bottom: solid thin black;
}
table.Info {
width: 50%;
margin-bottom: 20px;
margin-right: 2%;
border-style: solid;
border-width: thin;
border-color: Red;
}
table.Info tbody td {
font-family: Arial;
height: 60px;
padding-top: -3px;
}
table.Contents {
width: 99%;
display: block;
text-align: center;
border-style: solid;
border-width: thin;
border-color: Black;
font-family: Arial;
font-size: small;
}
table.Contents tbody {
border-style: solid;
border-width: thin;
border-color: Black;
}
table.Contents tbody td {
padding-top: 0px;
margin-bottom: -5px;
}
table.Contents tbody tr {
padding-top: 0px;
margin-bottom: -5px;
}
<div class="RetailerLogo">
<img class="RetailerLogo" src="filepath" alt="Retailer Logo" />
</div>
<BR>
<BR>
<BR>
<BR>
<center>
<div class="PageTitle">Package Summary</div>
</center>
<BR>
<BR>
<BR>
<BR>
<BR>
<div class="RetailerOrderData">
<span style="FONT-SIZE: 10pt; FONT-FAMILY: AdvC39c; FONT-SIZE: 12pt; font-stretch:expanded;">
*%RETAILERORDERNUMBER%*
</span><br /> Order #: %RETAILERORDERNUMBER%<br /> Order Date: %RETAILERORDERDATE%<br /> Ship Method: %SHIPPINGMETHOD%<br/>
</div>
<div class="container">
<div class="floatLeft">
<table border="0" class="Info ShippingReturn">
<thead>
<tr>
<td>
Contact Info: Company Name
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGRETURNADDRESS%<br/> Email: orders#gifpop.io
</td>
</tr>
</table>
</div>
<div class="floatRight">
<table class="Info ShipTo">
<thead>
<tr>
<td>
Shipped to: %CUSTOMERNAME%
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGADDRESS%
</td>
</tr>
</table></div>
</div>
<table class="Contents">
<thead>
<tr>
<td width="125"><b>Image</b></td>
<td width="75"><b>Qty</b></td>
<td width="150"><b>Code</b></td>
<td width="320"><b>Description</b></td>
</tr>
</thead>
%SHIPMENTDETAILWITHIMAGE%
<tr>
<td width="125"> </td>
<td width="75"> </td>
<td width="150"> </td>
<td width="320"> </td>
</tr>
</table>
<b>
<b>
<b>
i used ur code and mould it little like wrapping tables inside div and add css accordingly

The easiest : You can turn those 2 tables into table-cell, so they'll stick together side by side (demo below),
else: you'll need to float them or a wrapper to hold them and some extra CSS to keep them side by side no matter what the width avalaible. (possibly inline-block along white-space )
.Info {
display:table-cell;
}
body {
padding: 1%;
padding-top: 3%;
font-family: Arial, Arial Black;
font-size: small;
}
.RetailerLogo {
position: absolute;
top: 0px;
width: 250px;
}
.RetailerLogo img {
width: 100%;
}
.RetailerOrderData {
position: absolute;
top: 20px;
right: 20px;
font-size: small;
}
.PageTitle {
font-family: Arial Black, Arial;
font-size: x-large;
border-bottom: 5px;
}
table thead {
font-family: Arial Black, Arial;
background: Pink;
color: Red;
height: 15px;
}
table thead td {
border-bottom: solid thin black;
}
table.Info {
width: 50%;
margin-bottom: 20px;
margin-right: 2%;
border-style: solid;
border-width: thin;
border-color: Red;
}
table.Info tbody td {
font-family: Arial;
height: 60px;
padding-top: -3px;
}
table.Contents {
width: 99%;
/*display: block;*/
text-align: center;
border-style: solid;
border-width: thin;
border-color: Black;
font-family: Arial;
font-size: small;
}
table.Contents tbody {
border-style: solid;
border-width: thin;
border-color: Black;
}
table.Contents tbody td {
padding-top: 0px;
margin-bottom: -5px;
}
table.Contents tbody tr {
padding-top: 0px;
margin-bottom: -5px;
}
<div class="RetailerLogo">
<img class="RetailerLogo" src="filepath" alt="Retailer Logo" />
</div>
<BR>
<BR>
<BR>
<BR>
<center>
<div class="PageTitle">Package Summary</div>
</center>
<BR>
<BR>
<BR>
<BR>
<BR>
<div class="RetailerOrderData">
<span style="FONT-SIZE: 10pt; FONT-FAMILY: AdvC39c; FONT-SIZE: 12pt; font-stretch:expanded;">
*%RETAILERORDERNUMBER%*
</span><br /> Order #: %RETAILERORDERNUMBER%<br /> Order Date: %RETAILERORDERDATE%<br /> Ship Method: %SHIPPINGMETHOD%<br/>
</div>
<table border="0" class="Info ShippingReturn">
<thead>
<tr>
<td>
Contact Info: Company Name
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGRETURNADDRESS%<br/> Email: orders#gifpop.io
</td>
</tr>
</table>
<table class="Info ShipTo">
<thead>
<tr>
<td>
Shipped to: %CUSTOMERNAME%
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGADDRESS%
</td>
</tr>
</table>
<table class="Contents">
<thead>
<tr>
<td width="125"><b>Image</b></td>
<td width="75"><b>Qty</b></td>
<td width="150"><b>Code</b></td>
<td width="320"><b>Description</b></td>
</tr>
</thead>
%SHIPMENTDETAILWITHIMAGE%
<tr>
<td width="125"> </td>
<td width="75"> </td>
<td width="150"> </td>
<td width="320"> </td>
</tr>
</table>
<b>
<b>
<b>

Try implementing the declaration display: grid to build your tables side-by-side. The grid value offers fully responsive 'boxes' that can be stacked as you wish.
This is a simple layout~
HTML
<section class="tableGrid">
<div>
<div>
<p>Row 1 - Table 1</p>
</div>
<div>
<p>Row 2 - Table 1</p>
</div>
</div>
<!-- ********************** -->
<div>
<div>
<p>Row 1 - Table 2</p>
</div>
<div>
<p>Row 2 - Table 2</p>
</div>
</div>
</section>
and CSS
.tableGrid {
margin: 4vh 8vw;
padding: 16px;
display: grid;
grid-template-rows: auto;
grid-gap: 16px;
}
.table {
border: 4px dotted red;
}
#media (min-width: 800px) {
.tableGrid {
margin: 8vh 16vw;
padding: 32px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(auto-fit: minmax(88px 1fr);
grid-gap: 24px;
}
}
Check out this pen and if you like what you see learn more about using grid here.

li items are overlaid over each other when i change the menu to display:inline

I want the .menu-box-middle ul list items to display inline, however all the list items overlap each other! I can't figure out how to change it. Ideally I want them evenly spaced across the page within the main-container.
HTML and CSS can be found here: http://codepen.io/anon/pen/Mbbbmv
HTML:
<!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="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Anthony and Nicola's wedding</title>
<link href="tplcss/samplestyle/style.css" rel="stylesheet" type="text/css" />
<link href="http://default.gettingmarried.co.uk/src/css/common.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="http://default.gettingmarried.co.uk/favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="http://default.gettingmarried.co.uk/src/js/common.js"></script>
<script src="http://default.gettingmarried.co.uk/src/js/prototype-1603-minified.js" type="text/javascript"></script>
<script src="http://default.gettingmarried.co.uk/src/editjs/src/scriptaculous.js" type="text/javascript"></script>
<meta name="description" content="Nicola Bobins and Anthony Cross are getting married on Wednesday 13th January 2010." />
<meta name="keywords" content="wedding,Anthony,Nicola,Nicola Bobins and Anthony Cross,wedding site,www.gettingmarried.co.uk,Anthony and Nicola's wedding" />
<script src="http://default.gettingmarried.co.uk/src/sifr436/js/sifr.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://default.gettingmarried.co.uk/src/sifr436/css/sifr.css" type="text/css">
<!-- font: This part is editable via your control panel -->
<SCRIPT LANGUAGE="JavaScript">
var myfont = { src: 'http://default.gettingmarried.co.uk/src/sifr436/fonts/PalaceScriptMT[regular]436.swf' };
sIFR.activate(myfont);
sIFR.replace(myfont, {
selector: 'h1',wmode: 'transparent',
css: [ '.sIFR-root {color: #000000 ;font-size: 60px;}' ]
});
</SCRIPT>
</head>
<body>
<!-- Overlay shaded div for hover window -->
<div id="overlayfilm" style="display:none"></div>
<div class="main-container">
<div class="top-thin-bar"><span class="main-table-top-banner"><strong>Wednesday 13th January 2010 - </strong> 52 days to go</span></div>
<!-- <div id="weatherbox">10 days before?<br />
<br />
Show weather here!</div> -->
<div class="left-panel">
<div class="menu-box-top1"></div>
<div class="menu-box-middle">
<ul>
<li>The Wedding
<ul id="Aitem_list">
<li id="Aitem_65" class="selected">
<a href="Home.htm" title="Home" class="menu">Home
</a>
</li>
<li id="Aitem_66" >
<a href="About_Us.htm" title="About Us" class="menu">About Us
</a>
</li>
<li id="Aitem_68" >
<a href="Reception.htm" title="Reception" class="menu">Reception
</a>
</li>
<li id="Aitem_67" >
<a href="Ceremony.htm" title="Ceremony" class="menu">Ceremony
</a>
</li>
<li id="Aitem_69" >
<a href="Timetable.htm" title="Timetable" class="menu">Timetable
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="menu-box-bottom1"></div></div>
<div class="right-panel" id="right-panel-frame">
<div class="intro-panel"> <h1>Our Wedding</h1><img height="333" border="0" align="right" width="250" class="photo-align-right" alt="image" src="http://www.gettingmarried.co.uk/siteimages/thumbnail_200903021623420000006dfda5a286177a3903c2c31b11c20bb4.jpg"/> <span id='homepage_intro'>This is a sample file that contains most elements that you may require to create a new CSS style.<br><br>Sadly we are unable to change the HTML template layout, but the CSS file is fully editable by you.<br><br>Once you have finished, please email the files as a ZIP archive to support#gettingmarried.co.uk. We will then import your CSS style into the GettingMarried.co.uk system.<br><br>Please note: by sending us your CSS file and images, you agree to transfer any copyright or ownership of the design to GettingMarried.co.uk. You also confirm that you have not used any copyrighted images without permission from the copyright holder. You will accept full liability for breach of copyright. You also confirm that your CSS file may be used on our other members' sites, and by sending us your files, you are confirming your agreement of these terms and conditions.</span><br/>
<br style="clear:both;">
</div>
<div class="front-page-boxes-wrapper">
<div class="front-page-boxes-left">
<p><em>The Wedding</em></p>
<p class="front-page-boxes-text">My Wedding box testing</p>
<p><img height="19" border="0" width="20" alt="Bullet" src="http://default.gettingmarried.co.uk/images/css-img/bullet-grey.gif"/> </p>
</div>
<div class="front-page-boxes-middle">
<p><em>Organisation</em></p>
<p class="front-page-boxes-text">My wedding box</p>
<p><img height="19" border="0" width="20" alt="Bullet" src="http://default.gettingmarried.co.uk/images/css-img/bullet-grey.gif"/> </p>
</div>
<div class="front-page-boxes-right">
<p><em>Memories</em></p>
<p class="front-page-boxes-text">My Wedding Box</p>
<p><img height="19" border="0" width="20" alt="Bullet" src="http://default.gettingmarried.co.uk/images/css-img/bullet-grey.gif"/> </p>
</div>
</div>
<!-- ABOUT US -->
<h1>About Us</h1>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody><tr>
<td align="left" width="50%" valign="top" class="aboutus-cells"><p><strong>Penny</strong></p>
<p><img height="147" align="left" width="100" alt="Penny" class="photo-profiles" src="http://www.gettingmarried.co.uk/images/home-img/photo-filler-bride-100px.jpg"/><span id="about_bride" >Age: 26<br/><br/>Middle Name: Rose<br/><br/>Likes: Bunting! <br/><br/>Dislikes: Getting up in the morning </span></p></td>
<td align="left" width="50%" valign="top" class="aboutus-cells"><p><strong>Andrew</strong></p>
<p><img height="147" align="left" width="100" alt="Andrew" class="photo-profiles" src="http://www.gettingmarried.co.uk/images/home-img/photo-filler-groom-100px.jpg"/><span id="about_groom" >Age: 27<br/><br/>Middle Name: Donald<br/><br/>Likes:Everything to be tidy<br/><br/>Dislikes: Penny's Topshop Account </span></p></td>
</tr>
</table>
<p><strong>How we met...</strong></p>
<span id="about_howmet" >Way way back at guide and scout camp in 1995 </span><p></p>
<p><strong>The proposal...</strong></p>
<span id="about_proposal" >Sleep deprived and slightly drunk on mojitos in Cuba, December 2007 </span><p></p>
<!-- GIFT LIST -->
<h1>Gift List</h1>
<p><span id="giftlist_intro" >Introduction text for the giftlist page.</span></p>
<p><strong>The Online Gift List</strong></p>
<p>Please remember to click the "Mark as purchased" link to mark items as purchased to prevent duplications.</p>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody><tr>
<td class="giftlist-header-row">Shop Name</td>
<td class="giftlist-header-row">Description</td>
<td class="giftlist-header-row">Cost</td>
<td class="giftlist-header-row">Quantity</td>
<td class="giftlist-header-row">Options</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Argos.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1966" onclick="JT_show('ajax-purchase-giftview.php?giftid=1966&gifturl=giftgo.php%3Fid%3D1966',this.id,this.name);" name="Did you buy this Gift?" id="giftID1966">3 tier steamer</a></td>
<td class="giftlist-row-purchased">£19.99</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Debenhams.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=3031" onclick="JT_show('ajax-purchase-giftview.php?giftid=3031&gifturl=giftgo.php%3Fid%3D3031',this.id,this.name);" name="Did you buy this Gift?" id="giftID3031">Black 19cm rectangular stoneware dish</a></td>
<td class="giftlist-row-purchased">£15</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1963" onclick="JT_show('ajax-purchase-giftview.php?giftid=1963&gifturl=giftgo.php%3Fid%3D1963',this.id,this.name);" name="Did you buy this Gift?" id="giftID1963">blue spice jar</a></td>
<td class="giftlist-row-purchased">£2.44</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1960" onclick="JT_show('ajax-purchase-giftview.php?giftid=1960&gifturl=giftgo.php%3Fid%3D1960',this.id,this.name);" name="Did you buy this Gift?" id="giftID1960">blue spice jar set</a></td>
<td class="giftlist-row-purchased">£10.76</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Drinkstuff.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1859" onclick="JT_show('ajax-purchase-giftview.php?giftid=1859&gifturl=giftgo.php%3Fid%3D1859',this.id,this.name);" name="Did you buy this Gift?" id="giftID1859">Cocktail starter pack</a></td>
<td class="giftlist-row-purchased">£39.92</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Welch.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=2805" onclick="JT_show('ajax-purchase-giftview.php?giftid=2805&gifturl=giftgo.php%3Fid%3D2805',this.id,this.name);" name="Did you buy this Gift?" id="giftID2805">cookn=book stand - light blue</a></td>
<td class="giftlist-row-purchased">£27.25</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-rowa">Debenhams.com </td>
<td class="giftlist-rowa"><a target="_blank" href="giftgo.php?id=3017" onclick="JT_show('ajax-purchase-giftview.php?giftid=3017&gifturl=giftgo.php%3Fid%3D3017',this.id,this.name);" name="Did you buy this Gift?" id="giftID3017">Cream piglets salt and pepper pots</a></td>
<td class="giftlist-rowa">£15.50</td>
<td class="giftlist-rowa">1</td>
<td class="giftlist-rowa"><a target="_blank" href="giftgo.php?id=3017" onclick="JT_show('ajax-purchase-giftview.php?giftid=3017&gifturl=giftgo.php%3Fid%3D3017',this.id,this.name);" name="Did you buy this Gift?" id="giftID3017">View</a> | <a onclick="JT_show('ajax-purchase-gift.php?giftid=3017&gifturl=giftgo.php%3Fid%3D3017',this.id,this.name);return false;" name="Please Confirm Your Details..." id="giftID3017" href="#">Mark as purchased</a></td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1962" onclick="JT_show('ajax-purchase-giftview.php?giftid=1962&gifturl=giftgo.php%3Fid%3D1962',this.id,this.name);" name="Did you buy this Gift?" id="giftID1962">cream spice jar</a></td>
<td class="giftlist-row-purchased">£2.44</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1961" onclick="JT_show('ajax-purchase-giftview.php?giftid=1961&gifturl=giftgo.php%3Fid%3D1961',this.id,this.name);" name="Did you buy this Gift?" id="giftID1961">cream spice jar set</a></td>
<td class="giftlist-row-purchased">£10.76</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Lauraashley.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1696" onclick="JT_show('ajax-purchase-giftview.php?giftid=1696&gifturl=giftgo.php%3Fid%3D1696',this.id,this.name);" name="Did you buy this Gift?" id="giftID1696">duck egg bed linen - oxford pillowcases</a></td>
<td class="giftlist-row-purchased">£14.69</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Debenhams.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=3032" onclick="JT_show('ajax-purchase-giftview.php?giftid=3032&gifturl=giftgo.php%3Fid%3D3032',this.id,this.name);" name="Did you buy this Gift?" id="giftID3032">Granite petite round casserole dish</a></td>
<td class="giftlist-row-purchased">£10</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
</tbody></table>
</tbody></table>
<h1>Our Wedding</h1>
<p>Upload your high resolution wedding photos to Andrew and Penny's online photo album here. <br/><br/>Our site will automatically create web-friendly images, whilst the high resolution images will also be stored, allowing us to design a beautifully-printed photobook of our special day through our guests' eyes.</p>
<form action="uploadimages.php" method="POST" name="gbook">
<div class="front-page-boxes">
<strong>Upload your photos</strong> (Step 1 of 2)
<br/><table border="0" cellspacing="0" cellpadding="5">
<tr>
<td>Your name: </td>
<td><input name="name" type="text" id="name" size="30"/></td>
</tr>
<tr>
<td nowrap="nowrap">Email address: *</td>
<td><input name="email" type="text" id="email" size="30"/></td>
</tr>
<SCRIPT LANGUAGE="JavaScript">
<!--
function callme(){
var row = document.getElementById("showme");
if(document.gbook.usealbum.value=='0'){
row.style.display='';
}else{
document.gbook.newname.value='';
row.style.display='none';
}
}
//-->
</SCRIPT>
<tr>
<td nowrap="nowrap">Select destination album:</td>
<td>
<select name="usealbum" OnChange="callme();"><option>Please Select</option><option value='0' selected>Create a new photo album</option>
<option value="from your American " >Test album 1</option>
<option value="Scotty's photos of the big day" >Test album 2</option>
</select>
</td>
</tr>
<tr ID='showme' >
<td nowrap="nowrap">Title for your new album:</td>
<td><input name="newname" type="text" id="email" size="30"/></td>
</tr>
<tr>
<td valign="top" nowrap="nowrap"> </td>
<td align="left"><input type="submit" name="Submit" id="Submit" value="Go >" /></td>
</tr>
<tr>
<td colspan="3">
<font size="1">* Note: email address is stored <b>only</b> for Name1 and Name2's private use</font>
</td>
</tr>
</table>
</div>
</form>
<br/>Please note: all photos must be personally approved by us before they go live on the site, so there may be a slight delay before you see it in the albums.
</div>
<p> </p>
<br class="clearbreak" />
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* BASIC ELEMENTS */
/* NB: The h1 style is set up separately on the "customise design page" */
body {
background-image: url(../../tplcss/samplestyle/images/bg-small-2.gif);
background-repeat: repeat;
background-position: center;
padding-left: 0px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: 'Playfair Display', serif;
font-size: 12pt;
}
a {
color: #1d192f;
font-size: 14px;
text-decoration: none;
border-bottom: 1px solid #1d192f;
}
form {
margin: 0px;
padding: 0px;
}
.submit-button {
background-color: #FFFFCC;
margin-top: 10px;
border: 1px solid #DC5050;
height: 30px;
}
/* ----------- GENERAL ELEMENTS ---------------- */
.main-table {
background-color: #FFFFFF;
background-repeat: no-repeat;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
padding: 0px;
}
.main-content {
padding-top: 30px;
padding-left: 25px;
padding-right: 15px;
font-family: 'Playfair Display', serif;
font-size: 12pt;
}
.main-container {
background-color: #ffffff;
background-repeat: no-repeat;
background-position: 0px 0px;
width: 900px;
margin-top:-16px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
position: relative;
}
.main-container .top-thin-bar {
visibility: hidden;
background-repeat: no-repeat;
height: 22px;
width: 1100px;
top: 160px;
position: absolute;
background-position: 0px 0px;
text-align: center;
padding-top: 7px;
left: 0px;
margin-left: -122px;
font-size: 10pt;
}
.main-container .right-panel .intro-panel {
width: auto;
min-height: 333px;
font-size: 14px;
line-height: 20px;
color: #193429;
}
.main-footer {
width: 880px;
margin-right: auto;
margin-bottom: 0px;
background-repeat:no-repeat;
margin-left: auto;
height: 60px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #FFB9B9;
border-bottom-color: #FFB9B9;
border-left-color: #FFB9B9;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
clear: both;
}
.main-footer .left-links {
width:300px;
height:100%;
float:left;
}
.main-footer .right-logo {
visibility: hidden;
width:400px;
float:right;
text-align:right;
}
.left-panel {
width: auto;
margin-top: 15px;
padding-left: 20px;
margin-bottom: 20px;
}
.right-panel {
width: auto;
margin-top: 220px;
margin-right: 30px;
margin-bottom: 35px;
}
.leftmenu {
padding-left: 15px;
width: 200px;
padding-top: 30px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
}
.clearbreak {
clear:both;
height:10px;
overflow:hidden;
}
.main-table-top-banner {
visibility: hidden;
text-align: center;
background-repeat: no-repeat;
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color: #999999;
}
.main-table-top-banner-sub {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
}
.main-bottom-strip {
padding: 10px;
border-top: 1pt solid #CCCCCC;
background: #EEEEEE;
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: normal;
}
.main-bottom-strip a {
color: #666666;
}
.main-bottom-strip a:visited {
color: #666666;
}
.main-bottom-strip a:hover {
color: #AAAAAA;
}
.table-light-padding {
padding: 3px;
padding-bottom: 7px;
}
.redtext {color: #DC5050}
.smaller-text-indent {
font-size: 10pt;
padding-left: 20px;
}
.text-indent {
padding-left: 20px;
}
.editingtextarea {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
background-color: #FFFFFF;
border: 1px dotted #E98E95;
}
/* Menu bar */
.menu-box-top1 {
height: 0px;
width: 180px;
background-repeat: no-repeat;
margin: 0px;
background-position: bottom;
}
.menu-box-middle {
background-color: #FFFFFF;
margin: 0px;
padding-top: 1px;
padding-right: 10px;
padding-bottom: 1px;
padding-left: 10px;
}
.menu-box-middle p {
font-style: italic;
padding-bottom: 0px;
}
.menu-box-middle ul {
margin-top: 5px;
margin-bottom: 20px;
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color: #996666;
letter-spacing: 2px;
}
.menu-box-middle li {
list-style: none;
margin-left: -30px;
margin-bottom: 4px;
font-style: none;
font-weight: bold;
}
.menu-box-middle li li {
/*bookmark this is where i got to display inline :( */
display: inline;
text-transform: none;
margin-bottom: 4px;
font-weight: normal;
margin-left: -40px;
font-family: Georgia;
letter-spacing: 0px;
}
.menu-box-middle li ul {
padding-top: 0px;
background-repeat: no-repeat;
}
.menu-box-middle a {
color: #E96461;
text-decoration: none;
border-bottom: 1px solid #b0c5bc;
line-height: 25px;
}
.menu-box-middle a:visited {
color: #E96461;
}
.menu-box-middle a:hover {
color: #EF8F8D;
}
.menu-box-bottom1 {
background-image: url(http://default.gettingmarried.co.uk/images/css-img/bottom-rounded.gif);
background-repeat: no-repeat;
width: 180px;
height: 10px;
margin: 0px;
}
/* ----------- FRONT PAGE ELEMENTS ------------- */
/* Front three boxes */
.front-page-boxes-wrapper {
float: right;
width: 640px;
margin-right: 0px;
margin-bottom: 40px;
margin-top: 20px;
height: 170px;
}
.front-page-boxes-wrapper em {
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color:#666666;
letter-spacing: 2px;
font-style: normal;
font-weight: bold;
}
.front-page-boxes-wrapper p {
margin-top:0;
}
.front-page-boxes {
border: 1px dotted #FFA8A8;
padding: 10px;
}
.front-page-boxes a {
color: #3399CC;
}
.front-page-boxes a:visited {
color: #3399CC;
}
.front-page-boxes a:hover {
color: #3399CC;
}
.front-page-boxes-text {
font-size: 10pt;
line-height: 18px;
color: #253630;
}
.front-page-boxes-left {
border: 5px solid white;
padding: 10px;
width: 170px;
float: left;
height: 100%;
background-color: #D7EBFF;
color: #0066FF;
}
.front-page-boxes-middle {
border: 5px solid white;
padding: 10px;
width: 170px;
float: left;
margin-left: 20px;
height: 100%;
background-color: #FADBDA;
}
.front-page-boxes-right {
border: 5px solid white;
padding: 10px;
width: 170px;
float: left;
margin-left: 20px;
height: 100%;
background: #D7EBFF;
}

To make it work I have added following css styles and removed your old css styles:
Removed
.menu-box-middle ul {
margin-top: 5px;
margin-bottom: 20px;
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color: #996666;
letter-spacing: 2px;
}
.menu-box-middle li {
list-style: none;
margin-left: -30px;
margin-bottom: 4px;
font-style: none;
font-weight: bold;
}
.menu-box-middle li li {
/*bookmark this is where i got to display inline :( */
display: block;
text-transform: none;
margin-bottom: 4px;
font-weight: normal;
margin-left: -40px;
font-family: Georgia;
letter-spacing: 0px;
}
.menu-box-middle li ul {
padding-top: 0px;
background-repeat: no-repeat;
}
Added Lines:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
Fiddler: https://jsfiddle.net/mayankN/nrL32cen/1/
Make the changes relevant to your style from old file.

Just add a margin on :
.menu-box-middle li li {
/*bookmark this is where i got to display inline :( */
display: inline;
text-transform: none;
margin-bottom: 4px;
font-weight: normal;
margin-left: -40px;
font-family: Georgia;
letter-spacing: 0px;
margin:12px;
}

Cannot debug email template for Gmail Mobile

http://codepen.io/anon/pen/dOGWQW
Screenshots of what is wrong:
http://imgur.com/a/JjNLn
No matter what I try to change, I can't get the part that says "May we suggest", or below that where it says "Want more products?", to be centered in gmail's mobile app.
If you turn the phone in landscape mode it all displays right, but with the normal vertical view the width of the block is not 100% even though the text is still centered.
Then the footer text is just text aligned left for some reason.
On gmail.com on Chrome mobile, the whole template looks like its not at all designed for mobile and is full desktop width.
How do I debug this?
I can't use any kind of dev tool in these programs and nothing I can think of in the code should be making it do this.
<!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></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<style type="text/css">
/* Basics */
body {
Margin: 0;
padding: 0;
min-width: 100%;
background-color: #fff;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #123050;
}
td {
padding: 0;
}
table, tbody, tr, td {
border: none;
border-color: #fff;
}
img {
border: 0;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.webkit {
max-width: 600px;
border: 1px solid #e1e1e1;
box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.15);
}
.outer {
Margin: 0 auto;
width: 100%;
max-width: 600px;
background: #fff;
}
.inner {
padding: 10px;
}
.contents {
width: 100%;
}
p {
Margin: 0;
}
a {
color: #ed9d2a;
text-decoration: none;
}
.h1 {
font-size: 21px;
font-weight: bold;
Margin-bottom: 18px;
}
.h2 {
font-size: 18px;
font-weight: bold;
Margin-bottom: 12px;
}
.full-width-image img {
width: 100%;
max-width: 600px;
height: auto;
}
/* One column layout */
.one-column .contents {
text-align: left;
}
.one-column p {
font-size: 14px;
Margin-bottom: 10px;
}
/*Two column layout*/
.two-column {
text-align: center;
font-size: 0;
}
.two-column .column {
width: 100%;
max-width: 300px;
display: inline-block;
vertical-align: top;
}
.two-column .contents {
font-size: 14px;
text-align: left;
border:1px solid #dedede;
border-radius: 3px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
}
.two-column img {
width: 100%;
max-width: 280px;
height: auto;
}
.two-column .image {
padding: 9px 5px 0;
}
.two-column .text {
padding: 0 5px 17px;
padding-top: 10px;
}
/*Three column layout*/
.three-column {
text-align: center;
font-size: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.three-column .column {
width: 100%;
max-width: 200px;
display: inline-block;
vertical-align: top;
}
.three-column img {
width: 100%;
max-width: 180px;
height: auto;
}
.three-column .contents {
font-size: 14px;
text-align: center;
}
.three-column .text {
padding-top: 10px;
}
/* Left sidebar layout */
.left-sidebar {
text-align: center;
font-size: 0;
}
.left-sidebar .column {
width: 100%;
display: inline-block;
vertical-align: middle;
}
.left-sidebar .left {
max-width: 100px;
}
.left-sidebar .right {
max-width: 500px;
}
.left-sidebar .img {
width: 100%;
max-width: 80px;
height: auto;
}
.left-sidebar .contents {
font-size: 14px;
text-align: center;
}
.left-sidebar a {
color: #85ab70;
}
/* Right sidebar layout */
.right-sidebar {
text-align: center;
font-size: 0;
}
.right-sidebar .column {
width: 100%;
display: inline-block;
vertical-align: middle;
}
.right-sidebar .left {
max-width: 100px;
}
.right-sidebar .right {
max-width: 500px;
}
.right-sidebar .img {
width: 100%;
max-width: 80px;
height: auto;
}
.right-sidebar .contents {
font-size: 14px;
text-align: center;
}
.right-sidebar a {
color: #70bbd9;
}
h2.featured {
font-size: 39px;
letter-spacing: -1px;
font-weight: bold;
font-style: italic;
color: #ffad38;
text-align: center;
margin: 0 auto 0px;
}
.subtitle {
font-size: 14px;
font-style: italic;
color: #7c8697;
text-align: center;
margin-bottom: 30px;
}
.bold {
font-weight: bold;
}
.header {
text-align: center;
padding-bottom: 25px;
}
.header-wrap {
background: #123050 center bottom no-repeat;
display: block;
width: 100%;
}
img.header-desktop {
display: block;
width: 100%;
}
img.header-mobile {
display: none;
height:1px;
width: 1px;
}
h3 {
color: #123050;
font-size: 27px;
text-align: center;
font-weight:900;
text-transform: uppercase;
letter-spacing: -1px;
margin-top: 0;
margin-bottom: 20px;
}
h4.suggest {
text-transform: uppercase;
font-weight: 900;
font-size: 17px;
letter-spacing: -1.5px;
margin-top: 0;
margin-bottom: 10px;
}
td.suggest {
padding-top: 31px;
}
h5 {
text-transform: uppercase;
font-weight: bold;
margin-top: 10px;
margin-bottom:3px;
}
h3.fancy {
margin: 0 0 43px;
}
h3.fancy a {
color: #123050;
font-size: 24px;
text-transform: none;
font-weight: 600;
letter-spacing: 0;
margin: 0 0 43px;
}
h3.fancy a span {
color: #367eeb;
transition: 75ms ease-in color;
}
h3.fancy a:hover span {
color: #123050;
}
h4.fancy {
font-size: 17px;
font-weight: normal;
font-style: italic;
margin: 0 0 10px;
}
p.phone {
margin-bottom: 5px;
}
.category {
font-size: 13px;
font-style: italic;
margin-bottom: 30px;
}
p.feature-desc {
color: #414d62;
max-width: 465px;
margin: 0 auto;
margin-bottom: 40px;
}
a.button {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: -0.5px;
border: 2px solid #ffaf3d;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
height: 37px;
width: 127px;
line-height: 37px;
text-decoration: none;
display: inline-block;
}
.button img {
display: none;
}
a.button-view {
background: #ffaf3d;
color: #fff;
}
a.button-info {
color: #ffaf3d;
width: 103px;
}
a.button-view:hover {
border-color: #ed9d2a;
background: #ed9d2a;
color: #fff;
}
a.button-info:hover {
background: #ffaf3d;
color: #fff;
}
.td-button {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: -0.5px;
border: 2px solid #ffaf3d;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
height: 37px;
width: 127px;
line-height: 37px;
text-decoration: none;
display: inline-block;
}
.td-view {
background: #ffaf3d;
color: #fff;
}
.td-info {
color: #ffaf3d;
width: 103px;
}
.td-view a {
color: #fff;
height: 37px;
width: 127px;
line-height: 37px;
display: block;
text-align: center;
}
.td-info a {
color: #ffaf3d;
height: 37px;
width: 103px;
display: block;
}
.td-view:hover {
border-color: #ed9d2a;
background: #ed9d2a;
color: #fff;
}
.td-info:hover {
background: #ffaf3d;
color: #fff;
}
.td-view:hover a {
border-color: #ed9d2a;
background: #ed9d2a;
color: #fff;
}
.td-info:hover a {
background: #ffaf3d;
color: #fff;
}
a.small-button {
color: #152845;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
margin: 3px 0;
text-decoration: none;
}
img.separator {
width: auto;
height: 10px;
display: inline-block;
padding: 0;
margin: 0;
}
a.small-button-view {
}
a.small-button:hover {
color: #384c69;
}
.shadow {
box-shadow: 0px 5px 9px -5px rgba(0,0,0,0.2);
border-bottom: 1px solid #ddd;
padding-top: 37px;
padding-bottom: 35px;
}
.more {
padding-top: 22px;
padding-bottom: 47px;
text-align: center !important;
box-sizing: border-box;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
.footer {
background: #123050;
}
.footer p {
color: #fff;
height: 45px;
padding-top: 10px;
margin: 0;
text-align: center;
}
.footer a {
color: #fff;
display: inline-block;
height: 40px;
}
.footer span {
padding-right: 5px;
}
.center, .text, h4, h5 {
text-align: center;
}
#media (max-width:599px) {
/* img.header-mobile {
display: inline !important;
height: auto;
width: auto;
}
img.header-desktop {
display: none;
height: 1px;
width: 1px;
}
*/
.one-column .contents {
text-align: center !important;
}
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse;}
</style>
<![endif]-->
</head>
<body>
<center class="wrapper">
<div class="webkit">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center">
<tr>
<td>
<![endif]-->
<table class="outer" align="center">
<tr>
<td class="header">
<a class="header-wrap" href="">logo</a>
</td>
</tr>
<tr>
<td>
<h2 class="featured">Featured Product</h2>
</td>
</tr>
<tr>
<td>
<p class="subtitle">Recommendations for <span class="bold">All Star Marketing</span></p>
</td>
</tr>
<tr>
<td class="full-width-image">
<img src="http://www.inventionhome.com/dev/hotlink/images/featured.jpg" width="600" alt="" />
</td>
</tr>
<tr>
<td class="one-column">
<table width="100%">
<tr>
<td style="padding-top: 37px; padding-bottom: 35px;" class="inner contents shadow">
<h3>Item Name</h3>
<p class="feature-desc">Item Name is an electronic warmer, featuring a lightweight design that enables easy transportation of a hot food item between locations.</p>
<div style="width: 243px; margin: 0 auto; text-align: center;">
<table width="100%; max-width: 243px;">
<tr>
<td class="td-button td-view" valign="middle" align="center">
<p style="display: block;">View Product</p><p style="display: block; height: 7px;"> </p>
</td>
<td>
<img src="http://www.inventionhome.com/dev/hotlink/images/5x20.png" alt="" />
</td>
<td class="td-button td-info" valign="middle" align="center">
<p style="display: block;">More Info</p><p style="display: block; height: 7px;"> </p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="one-column">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td style="padding-top: 31px;" class="inner contents suggest">
<h4 class="suggest" vspace="50">May we also suggest</h4>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
</td>
</tr>
<tr>
<td class="two-column">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td class="image">
<img src="http://www.inventionhome.com/dev/hotlink/images/1.jpg" width="280" alt="" />
</td>
</tr>
<tr>
<td class="text">
<h5>Item Name</h5>
<p class="category">Kitchen</p>
<p>
<a class="small-button small-button-view" href="" title="">View Product</a>
<img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" />
<a class="small-button small-button-info" href="" title="">More Info</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td class="image">
<img src="http://www.inventionhome.com/dev/hotlink/images/2.jpg" width="280" alt="" />
</td>
</tr>
<tr>
<td class="text">
<h5>Item Name</h5>
<p class="category">Kitchen</p>
<a class="small-button small-button-view" href="" title="">View Product</a>
<img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" />
<a class="small-button small-button-info" href="" title="">More Info</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="two-column">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td class="image">
<img src="http://www.inventionhome.com/dev/hotlink/images/two-column-01.jpg" width="280" alt="" />
</td>
</tr>
<tr>
<td class="text">
<h5>Item Name</h5>
<p class="category">Kitchen</p>
<a class="small-button small-button-view" href="" title="">View Product</a>
<img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" />
<a class="small-button small-button-info" href="" title="">More Info</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td>
<img src="http://www.inventionhome.com/dev/hotlink/images/4.jpg" width="280" alt="" />
</td>
</tr>
<tr>
<td class="text">
<h5>Item Name</h5>
<p class="category">Kitchen</p>
<a class="small-button small-button-view" href="" title="">View Product</a>
<img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" />
<a class="small-button small-button-info" href="" title="">More Info</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="one-column">
<table width="100%">
<tr>
<td class="inner contents more">
<h4 class="fancy">Want more products?</h4>
<h3 class="fancy">Visit <span>Us Here</span></h3>
<h4 class="fancy">Contact us at</h4>
<p class="center phone"><strong>1-888-888-7777</strong></p>
<p class="center"><a style="font-weight: bold;" href="mailto:marketing#inventionhome.com" title="email">marketing#company.com</a></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background: #123050;" class="one-column footer">
<table width="100%">
<tr>
<td class="inner contents">
<p class="center"><span style="color: #fff;">Connect with us</span> <a class="social-icon" href="https://www.facebook.com/invention.home/" title=""><img src="http://www.inventionhome.com/dev/hotlink/images/facebook.png" alt="Facebook" /></a><a class="social-icon" href="https://twitter.com/Inventionhome" title=""><img src="http://www.inventionhome.com/dev/hotlink/images/twitter.png" alt="Twitter" /></a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>

I sent an email to my gmail account with your code in it, then viewed it on my phone and it looks absolutely perfect.
But as you said, if I use the chrome browser and log into to gmail it looks just how you described.
The reason is that GMAIL is stripping away your inline Stylesheet, when viewed in the browser. The original message is intact, but the client renders it without the stylesheets.
To get around the issue, you need to code the styles using the style attribute on the HTML Element, like this.
<table style="text-align:center">
Now your next question is how do I know this? I hit F12 in google chrome on my desktop, then view the email. This allows me to see the HTML and the Styles applied. Then within the Developer tools I click on the Toggle Device Toolbar then select the device I want to emulate in this case I choose iPhone 6+.
Then you can look at the html and adjust it and correct it within the tools.
I would also suggest you do some Inbox Testing, looking over the content of the email I think you're going to hit the spam box at a few locations.