My site has a width of 100%. My site often contains wide tables, and sometimes these tables gets wider than the 100% (of the viewport).
When that happens, a horizontal scrollbar appears (which is fully natural). But when I scroll horizontally, the menu is not following the width of the widest table.
I have tried various code examples available on the Internet, but none seems to help me all the way. Below is my latest code, and it works with the horizontal scrolling (because of the fixed position of the menu). But, when the page gets "high", and vertical scrolling is needed, the menu is always visible and fixed at its original viewport position (again, natural behaviour).
Is there any way to make the behave like it does now when scrolling horizontally, but acting normally when scrolling vertically?
If anyone has any suggestions, I'd be more than grateful.
<!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>
<title>Untitled Page</title>
<style type="text/css">
.myTable { width: auto; float: left; width: 100%; color: #666; border: 2px solid #666; }
.myTable td { padding: 5px 25px 5px 25px; margin: 2px; border: 1px solid #ccc; }
.myMenu { text-align: center; background: #666666; float: left; width: 100%; height: 30px; margin-bottom: 20px; color: #fff; }
.myMenu ul { margin: 0px; padding: 0px; margin-right: auto; margin-left: auto; width: 300px; list-style-type: none; text-align: center; }
.myMenu ul li { float: left; padding: 5px 20px 5px 20px; }
body { margin:0; padding:50px 0 0 0; }
div#header { top:0; left:0; width:100%; height:50px; position: fixed; }
* html body { overflow:hidden; }
* html div#content { height:100%; overflow:auto; }
</style>
</head>
<body>
<div id="header">
<div class="myMenu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="content">
<table class="myTable">
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
</table>
</div>
</body>
</html>
EDIT: I managed to get it to work in IE8, but IE7 still suffers from the same disease :(
What made it work in IE8 was actually changing width: 100%; into min-width: 100%;, but IE7 doesn't seem to agree.
Anyone?
<!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>
<title>Untitled Page</title>
<style type="text/css">
body { margin: 0px; padding: 0px; }
#container { min-width: 100%; width: auto; margin: 0px; padding: 0px; float: left; }
#myMenu { width: auto; min-width: 100%; background: #666; float: left; margin-bottom: 15px; }
#myMenu ul { padding: 5px 0px 5px 0px; margin: 0px; width: 300px; margin-left: auto; margin-right: auto; }
#myMenu ul li { float: left; padding: 0px 15px 0px 15px; margin: 0px; }
.myTable { width: auto; float: left; color: #666; border: 2px solid #666; }
.myTable td { padding: 5px 25px 5px 25px; margin: 2px; border: 1px solid #ccc; }
#filter { margin-bottom: 10px; border: 1px solid red; height: 50px; min-width: 100%; float: left; }
</style>
</head>
<body id="myBody">
<div id="container">
<div class="myMenu" id="myMenu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="filter">
some content
</div>
<table class="myTable potential">
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
</table>
<table class="myTable potential" id="myTable">
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
</table>
</div>
</body>
</html>
Answer to my own question:
After hours and days of trying, I finally made it work in both IE7/IE8, which was the goal. The only limitation goes for IE7, where the menu is not centered when the table is too wide.
The solution was to use min-width instead of width, which lets the content grow outside of the viewport but still covering the whole screen if the content is less wide than the viewport.
I will post the code here, if anyone else in the future is facing the same terrible issue:
<!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>
<title>Untitled Page</title>
<style type="text/css">
body { margin: 0px; padding: 0px; min-width: 100%; width: auto; margin: 0px; padding: 0px; float: left; }
#container { min-width: 100%; width: auto; margin: 0px; padding: 0px; float: left; }
#myMenu { background: #666; float: left; min-width: 100%; }
#myMenu ul { padding: 5px 0px 5px 0px; margin: 0px; width: 300px; margin-left: auto; margin-right: auto; }
#myMenu ul li { float: left; padding: 0px 15px 0px 15px; margin: 0px; }
.myTable { width: auto; float: left; color: #666; border: 2px solid #666; }
.myTable td { padding: 5px 25px 5px 25px; margin: 2px; border: 1px solid #ccc; }
#filter { background: yellow; }
html>body #myMenu { *min-width: auto; background: #666; *float: none; margin-bottom: 15px; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body id="myBody">
<div id="container">
<div class="myMenu" id="myMenu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="filter">
some content
</div>
<table class="myTable potential">
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
</table>
<table class="myTable potential" id="myTable">
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
</table>
</div>
</body>
</html>
Thanks for the support!
The best I could come up with after playing was setting the same explicit width on both the body and the div.myMenu (e.g. 1800px or 150em). To do this, however, you would need to know both which pages had the wide tables and approximately how wide to make them. Problematic I expect.
Related
I can't seem to get media queries to work - at least for the one relevant style which needs to work - padding for the table-wrapper class. The padding set inline always wins.
I believe I need to have !important set for the media query so I do have that.
Media queries are at the top of the html
This is at the top of the html - <meta name="viewport" content="width=device-width">
The rest of the styles are inline / done by an app.
Anyone know what I might be missing?
https://codepen.io/lg00/pen/LvrXVY
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title></title>
<style>
/* Responsive */
#media screen and (max-width: 700px) {
.table-wrapper {
width: 100% !important;
margin-top: 0px !important;
border-radius: 0px !important;
padding: 5px 15px !important;
}
.header {
border-radius: 0px !important;
}
.header-title {
padding-left: 20px !important;
padding-right: 20px !important;
}
.header-title h1 {
font-size: 25px !important;
}
}
</style>
<div class="email-wrapper" style="background-color:#F5F6F7">
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<!-- PADDING SET HERE -->
<table cellpadding="0" cellspacing="0" class="table-wrapper" style="margin:auto; margin-top:50px; background-color:#fff; padding:64px 100px">
<tbody>
<tr>
<td class="container header" style="background-repeat:no-repeat; border-top-left-radius:6px; border-top-right-radius:6px; text-align:center; color:#000; padding-bottom:32px; display:block !important; margin:0 auto !important; clear:both !important">
<div class="header-title" style="font-weight:bold">Test</div>
</td>
</tr>
<tr>
<td class="content" style="border-bottom-left-radius:6px; border-bottom-right-radius:6px; margin:0 auto !important; clear:both !important">
<div class="header-title" style="color:#000; text-align:center">
<h1 style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif; margin-bottom:15px; color:#47505E; margin:0px 0 10px; line-height:1.2; font-weight:200; line-height:45px; font-weight:bold; margin-bottom:30px; font-size:28px; line-height:40px; margin-bottom:32px; font-weight:400; color:#000; padding-top:0px">Test The Length of the Title - Will it Wrap</h1>
</div>
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="text-center" style="text-align:center">
Test
</td>
</tr>
</tbody>
</table>
<table class="data-table bordered" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px; border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
<tbody>
<tr>
<td class="data-table-title" style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; font-weight:bold; font-size:20px; padding-top:0px">Test</td>
</tr>
<tr>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
<td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
</tr>
<tr class="bordered" style="border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">Test</td>
<td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">test</td>
</tr>
</tbody>
</table>
<table class="data-table" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px">
<tbody>
<tr>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
<p style="margin-top: 0px; ">
<span class="bold" style="font-weight:bold">Test</span><br>
test<br>
</p>
</td>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; width: 20%"></td>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
<p style="margin-top: 0px; ">
<span class="bold" style="font-weight:bold">Test2</span><br>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class="footer" style="width:100%; text-align:center; clear:both !important">
<p class="text-center" style="text-align:center; font-size:12px; color:#666">Test</p>
</div>
<br>
</td>
</tr>
</tbody>
</table>
</div>
It is a specificity issue in your media queries. Move .header-title above .table-wrapper since the padding is overriding what is being set in .table-wrapper
.header-title {
padding-left: 20px !important;
padding-right: 20px !important;
}
.table-wrapper {
width: 100% !important;
margin-top: 0px !important;
border-radius: 0px !important;
padding: 5px 15px !important;
}
.header {
border-radius: 0px !important;
}
Change your css to this, I hope it will work.
<style>
//Default styling
.table-wrapper {
width: 50%;
margin-top: 0px;
border-radius: 0px;
padding: 5px 15px;
}
/* Responsive */
#media screen and (max-width: 700px) {
.table-wrapper {
width: 100%;
margin-top: 0px;
border-radius: 0px;
padding: 5px 15px;
}
.header {
border-radius: 0px;
}
.header-title {
padding-left: 20px;
padding-right: 20px;
}
.header-title h1 {
font-size: 25px;
}
}
</style>
Please check the CSS specificity, as you said the in-line style is the most specific selector and "wins".
CSS specificity:
Inline Style
ID, Class
Pseudo-class, atributes
Elements, pseudo-element
I'm creating an email templates using Marketo app. Once created, I tried sending a sample mail to myself and it all looks good:
As you can see all the elements [table] shows fine, all together and neat, but when I try forwarding the same email, this happens:
As you can see the header is broken from the body. This also happens for the footer. Why is this happening?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mizona</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
#logo img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: block;
}
td {
word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; font-family:'Verdana', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0;
}
#content-subsection-right-img td, #content-subsection-plain td, #content-subsection-left-img td {
color: #555555;
}
.desktop-only {
display: block;
}
.mobile-only {
display: none;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.no-spacing {
padding:0px;
margin: 0px;
}
.pad-cell5 td{
padding: 5px !important;
}
.mobile-center {
text-align: left !important;
}
#socialicons img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: inline-block !important;
border: none;
}
img {
max-width: 100%;
}
#graphic img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
float: none !important;
clear: both;
display: inline-block !important;
}
table[class="body"] .columns td.one {
width: 8.333333% !important;
}
table[class="body"] .column td.one {
width: 8.333333% !important;
}
table[class="body"] .columns td.two {
width: 16.666666% !important;
}
table[class="body"] .column td.two {
width: 16.666666% !important;
}
table[class="body"] .columns td.three {
width: 25% !important;
}
table[class="body"] .column td.three {
width: 25% !important;
}
table[class="body"] .columns td.four {
width: 33.333333% !important;
}
table[class="body"] .column td.four {
width: 33.333333% !important;
}
table[class="body"] .columns td.five {
width: 41.666666% !important;
}
table[class="body"] .column td.five {
width: 41.666666% !important;
}
table[class="body"] .columns td.six {
width: 50%;
}
table[class="body"] .column td.six {
width: 50%;
}
table[class="body"] .columns td.seven {
width: 58.333333% !important;
}
table[class="body"] .column td.seven {
width: 58.333333% !important;
}
table[class="body"] .columns td.eight {
width: 66.666666% !important;
}
table[class="body"] .column td.eight {
width: 66.666666% !important;
}
table[class="body"] .columns td.nine {
width: 75% !important;
}
table[class="body"] .column td.nine {
width: 75% !important;
}
table[class="body"] .columns td.ten {
width: 83.333333% !important;
}
table[class="body"] .column td.ten {
width: 83.333333% !important;
}
table[class="body"] .columns td.eleven {
width: 91.666666% !important;
}
table[class="body"] .column td.eleven {
width: 91.666666% !important;
}
table[class="body"] .columns td.twelve {
width: 100% !important;
}
table[class="body"] .column td.twelve {
width: 100% !important;
}
.pad-right-5 {
padding-right: 5px;
}
.pad-right-10 {
padding-right: 10px;
}
.pad-top-10 {
padding-top: 10px;
}
#media only screen and (max-width: 600px) {
.pad-right-10 {
padding-right: 0px;
}
.desktop-only {
display: none !important;
}
.mobile-only {
display: block;
}
#logo img {
width: 100% !important;
}
#logo-mobile img {
width: 80% !important;
}
#graphic img {
width: 100% !important;
height: auto !important;
}
*[class].center {
text-align:center !important;
margin:0 auto !important;
}
*[class].bottom-pad{ padding-bottom:35px !important;}
table[class="body"] table.columns td {
width: auto !important;
}
.social-icon td img {
width: 40px !important;
height: 40px !important;
}
}
</style>
</head>
<body style="width:100% !important; min-width:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-align:left; line-height:19px; font-size:12px; margin:0; padding:0; background:#eeeeee; color: #555555;">
<table class="body" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; height:100%; width:100%; line-height:19px; font-size:12px; background:#eeeeee; margin:0; padding:0; " bgcolor="#EEEEEE">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" align="center" valign="top" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:center; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0; ">
<center style="width:100%; min-width:600px; ">
<table class="container" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; vertical-align:top; text-align:left; margin:0; padding:0;" align="left" valign="top" width="600">
<table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top">
<table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:600px; padding:0; display:table !important; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top">
<div class="mktEditable" id="logo" style="" mktoname="logo">
<p style="margin:0px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-header-digest-general-v2.1.jpg" alt="eO Logo White.png" constrain="true" imagepreview="false" style="max-width: 600px;" /> </p>
</div></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="container mktoContainer" id="template-wrapper" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tr class="mktoModule" id="title-date" mktoname="title/date">
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tbody>
<tr bgcolor="#2EA049">
<td style="color:#ffffff; padding: 10px 40px" align="left" valign="middle">
<div class="mktEditable" id="title" style="" mktoname="title-date">
<p style="margin: 0px;">Volume 4 | Issue 11 | 2018</p>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="content-general" mktoname="general content">
<td style="padding: 20px 40px">
<div class="mktEditable" id="intro" style="margin-top: 20px;" mktoname="intro">
<h3 style="color: #88c34d; text-align: center;">Trust the Asset. Trust the Transaction.™</h3>
<p>More and more players across industries are realizing the advantages of digital transformation, making it a competitive necessity for companies to harness digital solutions. Our own rapid growth mirrors this trend, with eOriginal recently being named one of the fastest growing companies in the country.</p>
<p>Entering into 2019, eOriginal knows becoming part of the auto finance digital ecosystem is essential to achieving your business goals. To take full advantage of this continued growth, please join our upcoming webinar which is focus on the auto finance industry. Learn more about digital best practices and how originators and lenders can prioritize tech stack building and expansion.</p>
</div> </td>
</tr>
<tr bgcolor="#353937" style="color: #FFFFFF; background-image: url(http://info.eoriginal.com/rs/907-BBE-942/images/nl-indent-separator-v2.1.jpg); background-repeat: no-repeat; background-position: 0px 50%;" class="mktoModule" id="mod-subsection-title" mktoname="subsection-title">
<td valign="middle" style="padding: 10px 40px;">
<div class="mktEditable" id="title-subsection" mktoname="title-subsection" style="display:inline-block;">
<p style="margin: 0px; display: inline;"><b>eOriginal Named to Deloitte's Technology Fast 500™ </b></p>
</div> </td>
</tr>
<tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="mod-subsection-left-imgf16aafbb-fc4e-4e27-b799-256623b49daa" mktoname="mod-subsection-left-img-1">
<td style="padding: 20px 40px">
<div class="mktEditable" id="content-subsection-left-imgf16aafbb-fc4e-4e27-b799-256623b49daa" mktoname="content-subsection-left-img">
<table class="columns">
<tbody>
<tr valign="top">
<td width="260" class="pad-right-10"> <p class="no-spacing"><img src="https://www.eoriginal.com/wp-content/uploads/2017/07/Random-image-_0005_iStock-511197926-1024x683.jpg" width="100%" /></p> </td>
<td width="260"> <p class="no-spacing">For the second consecutive year, eOriginal was named to Deloitte’s Technology Fast 500™, a ranking of the 500 fastest growing technology, media, telecommunications, life sciences and energy tech companies in North America. eOriginal's growth of 266 percent reaffirms its status as a leader in digital lending transformation and management.</p> <p class="no-spacing"><b>Read more</b></p> </td>
</tr>
</tbody>
</table>
</div> </td>
</tr>
<tr bgcolor="#353937" style="color: #FFFFFF; background-image: url(http://info.eoriginal.com/rs/907-BBE-942/images/nl-indent-separator-v2.1.jpg); background-repeat: no-repeat; background-position: 0px 50%;" class="mktoModule" id="mod-subsection-titlef7e9c286-1eb5-44f6-9d0b-5b28ac2afd8d" mktoname="subsection-title-1">
<td valign="middle" style="padding: 10px 40px;">
<div class="mktEditable" id="title-subsectionf7e9c286-1eb5-44f6-9d0b-5b28ac2afd8d" mktoname="title-subsection" style="display:inline-block;">
<p style="margin: 0px; display: inline;"><b>Live Webinar: Building an End-to-End eContracting Experience in Auto Finance</b></p>
</div> </td>
</tr>
<tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="mod-subsection-right-img21690d4b-48d7-4fae-a245-7fbbe7765aba" mktoname="mod-subsection-right-img-1">
<td style="padding: 20px 40px">
<div class="mktEditable" id="content-subsection-right-img21690d4b-48d7-4fae-a245-7fbbe7765aba" mktoname="content-subsection-right-img">
<table class="columns">
<tbody>
<tr valign="top">
<td width="260" class="pad-right-10"> <p class="no-spacing">Whether you provide direct or indirect lending, meeting the demands of today’s auto finance market means going digital is no longer a matter of ‘if’ but ‘when’. Join defi SOLUTIONS Chief Operating Officer Lana Johnson and eOriginal's Director of FinTech Strategies John Jacobs for insights on end-to-end digital auto financing processes, from origination to asset monetization through warehouse financing or securitization. </p> <p class="no-spacing"><b>Register Now</b></p> </td>
<td width="260"> <p class="no-spacing"><br /></p> <p class="no-spacing"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Cover Defi Solutions.jpg" height="151" width="269" /></p> </td>
</tr>
</tbody>
</table>
</div> </td>
</tr>
<tr bgcolor="#353937" style="color: #FFFFFF; background-image: url(http://info.eoriginal.com/rs/907-BBE-942/images/nl-indent-separator-v2.1.jpg); background-repeat: no-repeat; background-position: 0px 50%;" class="mktoModule" id="mod-subsection-title3ccba291-3d31-4b47-8f3e-4c143fa31497" mktoname="subsection-title-clone">
<td valign="middle" style="padding: 10px 40px;">
<div class="mktEditable" id="title-subsection3ccba291-3d31-4b47-8f3e-4c143fa31497" mktoname="title-subsection" style="display:inline-block;">
<p style="margin: 0px; display: inline;"><b>Case Study: MotoLease Selects eOriginal to Digitally Transform Powersports Financing</b></p>
</div> </td>
</tr>
<tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="mod-subsection-left-img" mktoname="mod-subsection-left-img">
<td style="padding: 20px 40px">
<div class="mktEditable" id="content-subsection-left-img" mktoname="content-subsection-left-img">
<table class="columns">
<tbody>
<tr valign="top">
<td width="260" class="pad-right-10"> <p class="no-spacing"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/eO_Job-327_CS_MotoLease_COVER_01112018.png" width="178" height="252" style="display: block; margin-left: auto; margin-right: auto;" /></p> </td>
<td width="260"> <p class="no-spacing">Driven by a vision to disrupt the powersports leasing segment, MotoLease turned to eOriginal to adopt best practices in eSignature and digital asset management. This case study highlights how transformative digital lending technology drove the company's dramatic growth to corner 75 percent of the powersports leasing market. <b>Read more</b></p> </td>
</tr>
</tbody>
</table>
</div> </td>
</tr>
</table>
<table class="container" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tbody>
<tr bgcolor="#2EA049">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 20px 40px;"> eOriginal.com </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tbody>
<tr>
<td align="left" valign="middle" width="50"><img alt="Twitter" src="https://eoriginal.wise-portal.com/newsletter/public/social-twitter-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="LinkedIn" src="https://eoriginal.wise-portal.com/newsletter/public/social-linkedin-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="Facebook" src="https://eoriginal.wise-portal.com/newsletter/public/social-facebook-icon.png" style="color: #FFFFFF; font-size: 12px;" width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="Blog" src="https://eoriginal.wise-portal.com/newsletter/public/social-blog-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
<tr bgcolor="#353937">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-footer-logo-v2.2.png" width="200" /><br /><br /> <span>© 2018 eOriginal, Inc. All rights reserved.</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> The Warehouse at Camden Yards<br /> 351 W. Camden St., Suite 800<br /> Baltimore, MD 21201<br /><br /> SALES <span style="color: #2EA049">1-866-935-1776</span><br />SUPPORT <span style="color: #2EA049">1-866-364-3578</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
</tbody>
</table>
</center></td>
</tr>
</tbody>
</table>
</body>
</html>
There isn't really anything you can do to prevent this. It's well known across email development that forwarding trashes any and all email layouts in any number of ways depending on the client being used.
Best bet is to try and avoid suggesting users forward the email on and provide a 'send to a friend' landing page instead. Also informing colleagues/clients of the same and making sure they don't forward between each other. Alternatives for them are to send any tests on as attachments OR sending tests directly from your ESP.
Useful Litmus blog post going into the issue a bit more here
This would be really easy using negative margins, but I can't use them inside a <table>. Been at this for hours last night and this morning. Already googled different types of navs and there's nothing like this.
How do I make the CSS arrow stick to the top and bottom of the vertical line? https://codepen.io/TylerL-uxai/pen/ZqYNjw
td {
padding-top: 10px;
padding-bottom: 10px;
}
.active {
font-weight: bold;
}
table {
border-collapse: collapse;
}
.right{
text-align: right;
border-right: 1px solid black;
}
.v {
text-align: right;
}
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.dot {
height: 10px;
width: 10px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
<div class="menu">
<table>
<tr>
<td class="v">
<i class="arrow up"></i>
</td>
<td>
Abstract
</td>
</tr>
<tr>
<td class="right">
Why
</td>
</tr>
<tr>
<td class="right">
<div class="active">Home</div>
</td>
<td><span class="dot"></span> <small> You are here.</small></td>
</tr>
<tr>
<td class="right">
Examples
</td>
</tr>
<tr>
<td class="right">
Process
</td>
</tr>
<tr>
<td class="right">
Tools
</td>
</tr>
<tr>
<td class="v"><i class="down"></i></td>
<td style="padding-left: 10px;">
Concrete
</td>
</tr>
</table>
</div>
Position relative and then use top & right negatives
.v {
position: relative;
right:-6px;
top: -15px;
text-align: right;
}
I am new to html and css so i am not that good. The problem i have right now is that i have created a nested table with two tables. I got four columns with the blue color. But the problem is that i dont know how to get yellow lines like the flag has. The code i come so far is below.
<!DOCTYPE html>
<html>
<head>
<style>
table.blue {background-color: #0000ff;}
table.yellow {background-color: #ffff00;}
</style>
<title>HTML Table</title>
</head>
<body>
<table class="yellow" border="10" width="320px">
<tr>
<td>
<table class="blue" border="1" width="100%">
<tr>
<td height="40">blue</td>
<td>blue</td>
</tr>
<tr>
<td height="40">blue</td>
<td>blue</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</body>
</html>
(Image of Swedish Flag)
Not table but just div https://jsfiddle.net/2Lzo9vfc/134/
CSS
.flag {
background-color: #006AA7;
width: 500px;
height: 300px;
position: relative;
}
.flag::before {
background-color: #FECC00;
content: "";
height: 15%;
left: 0;
margin-top: -5%;
position: absolute;
top: 50%;
width: 100%;
}
.flag::after {
background-color: #FECC00;
content: "";
height: 100%;
left: 30%;
margin-left: -5%;
position: absolute;
top: 0;
width: 9%;
}
HTML
<div class="flag"></div>
It seems overly complicated to use tables for this. You can very simply achieve the desired result with absolute positioning. Notice how much less code this is:
.flag {
background: #0000ff;
position: relative;
width: 400px;
height: 300px;
}
.vertical {
background: #ffff00;
position: absolute;
left: 30%;
width: 60px;
height: 300px;
}
.horizontal {
background: #ffff00;
position: absolute;
top: 50%;
width: 400px;
height: 60px;
margin-top: -30px;
}
<div class="flag">
<div class="vertical"></div>
<div class="horizontal"></div>
</div>
Just for kicks..just one table.
table {
margin: 1em auto;
border-collapse:collapse;
}
td {
background: blue;
padding: 20px;
}
tr:nth-child(4) td,
td:nth-child(3) {
background: yellow;
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Use CSS borders and border-collapse:collapse. Adjust the border width as necessary.
<!DOCTYPE html>
<html>
<head>
<style>
table.blue {background-color: #0000ff;border-collapse:collapse}
table.yellow {background-color: #ffff00;border-collapse:collapse}
.top-left {border-bottom: 12px solid #ffff00;border-right: 12px solid #ffff00;}
.top-right {border-bottom: 12px solid #ffff00;border-left: 12px solid #ffff00;}
.bottom-left {border-top: 12px solid #ffff00;border-right: 12px solid #ffff00;}
.bottom-right {border-top: 12px solid #ffff00;border-left: 12px solid #ffff00;}
</style>
<title>HTML Table</title>
</head>
<body>
<table class="yellow" border="10" width="320px">
<tr>
<td>
<table class="blue" border="1" width="100%">
<tr>
<td height="40" class="top-left">blue</td>
<td class="top-right">blue</td>
</tr>
<tr>
<td height="40" class="bottom-left">blue</td>
<td class="bottom-right">blue</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</body>
</html>
You can set the border for every side seperatly per cell:
<!DOCTYPE html>
<html>
<head>
<style>
table.blue {background-color: blue;border-collapse: collapse;}
.sweden_cell1 { border-right: 5px solid #ffff00;border-bottom: 5px solid #ffff00;}
.sweden_cell2 { border-left: 5px solid #ffff00;border-bottom: 5px solid #ffff00;}
.sweden_cell3 { border-right: 5px solid #ffff00;border-top: 5px solid #ffff00;}
.sweden_cell4 { border-left: 5px solid #ffff00;border-top: 5px solid #ffff00;}
</style>
<title>HTML Table</title>
</head>
<body>
<table class="yellow" border="10" width="320px">
<tr>
<td>
<table class="blue" border="1" width="100%">
<tr>
<td class="sweden_cell1" height="40">blue</td>
<td class="sweden_cell2">blue</td>
</tr>
<tr>
<td class="sweden_cell3" height="40">blue</td>
<td class="sweden_cell4">blue</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Also as you can see you need the border-collapse: collapse; property to make the borders have no space between them
Futhermore if you wish to make the yellow part wider, just increase the pixel with of the border in the css (which is as 5px atm)
I think you can't make that space between columns and rows. You could make table with 3 rows and columns, paint cells in yellow and blue. But here you can find more interesting idea of swedish flag with just one div. http://talgautb.github.io/vexillum/demo/
You need to use border-collapse and add the borders to the cells of the table.
<!DOCTYPE html>
<html>
<head>
<style>
table.blue {
background-color: #0000ff;
border-collapse: collapse;
width:320px;
}
.border-right { border-right: 30px solid #ffff00;}
.border-bottom { border-bottom: 30px solid #ffff00;}
</style>
<title>HTML Table</title>
</head>
<body>
<table>
<tr>
<td>
<table class="blue" border="1">
<tr class="border-bottom">
<td height="60" width="30%" class="border-right"></td>
<td width="70%"></td>
</tr>
<tr>
<td height="60" width="30%" class="border-right"></td>
<td width="70%"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</body>
</html>
With the following adjustments to your CSS it kind-of looks like the swedish flag.
I used various different CSS selectors to make this happen, altho I doubt that it'll be easy to understand I'll try to explain
I removed a table from your HTML, it was redundant as the swedish flag yellow areas can be created through the borders just one table.
What I did was gave every td element in your table a border: 10px solid #ffff00 which creates borders around every td element.
then after that I used some more complex selectors to target specific td elements and remove borders where they weren't required.
So the first tr element in the table can be selected with :first-child (just like any other first child to a parent can be selected like this). but then we also want the first td from that which makes for the total selector:
table.blue tr:first-child td:first-child { ... }
as you can see below the CSS resets the border-top and border-left properties as this is the top-left td so the top and left part don't need the yellow border.
I simply followed the same principle with the rest of the selectors, targetting specific td elements and resetting the borders they did not need.
After that I also added some properties to reset the spacing between the borders to 0 with cellspacing="0" cellpadding="0" - these two properties aren't consistently available in CSS so they have to be put in the HTML.
I also removed the redundant border property on the table because we can set the border through CSS which allows us to be more flexible as we don't have to do styling through editing HTML.
for further reading on first-child and last-child CSS selectors:
:first-child
:nth-child(n)
Hope this helps you abit.
Good luck!
<!DOCTYPE html>
<html>
<head>
<style>
table.blue {background-color: #0000ff;}
table.blue td {border: 10px solid #ffff00;}
table.blue tr:first-child td:first-child { border-top: none; border-left: none; }
table.blue tr:first-child td:nth-child(2) { border-top: none; border-right: none; }
table.blue tr:nth-child(2) td:first-child { border-bottom: none; border-left: none; }
table.blue tr:nth-child(2) td:nth-child(2) { border-bottom: none; border-right: none; }
</style>
<title>HTML Table</title>
</head>
<body>
<table class="blue" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td height="40">blue</td>
<td>blue</td>
</tr>
<tr>
<td height="40">blue</td>
<td>blue</td>
</tr>
</table>
</body>
</html>
</body>
</html>
Here's a way to do it by creating it without tables, and instead layering 2 objects on each other.
What I like about doing it this way like other answers here show as opposed to tables is it shows you a bunch of different powers of css. z-index is a layering style option (-1 for #rectangle places it behind the div). You can play around with the width, height, top, and left values for each to see how they change the placement of the shapes.
#plus-sign {
background:yellow;
width:20px;
height:100px;
position:relative;
margin-left:33px;
}
#plus-sign:before {
background:yellow;
content:"";
width:200px;
height:20px;
position:absolute;
top:40px;
left:-33px;
}
#rectangle {
width:200px;
height:100px;
background-color:blue;
position: absolute;
z-index: -1;
left:-33px;
}
<div id="plus-sign"><span id="rectangle"></span></div>
Nice n' easy Lemon squeezie.
Adjust the border widths evenly for a skinnier or fatter yellow line.
You can also change the colors as your see fit using hexadecimal coloring to more closely match the true Swedish flag colors by replacing "yellow" with a hashtag and then whatever color # in hexadecimal for the true colors. The same can be done with the blue. Hope it helps! ;)
#swedeFlag{
width: 320px;
height: 200px;
border:1px solid black;
}
#swedeFlag .left{
background-color: blue;
height: 40px;
border-bottom: solid yellow 10px;
border-right: solid yellow 10px;
}
#swedeFlag .right{
background-color: blue;
height: 40px;
border-bottom: solid yellow 10px;
border-left: solid yellow 10px;
width: 200px;
}
#swedeFlag .bLeft{
background-color: blue;
height: 40px;
border-top: solid yellow 10px;
border-right: solid yellow 10px;
}
#swedeFlag .bRight{
background-color: blue;
height: 40px;
border-top: solid yellow 10px;
border-left: solid yellow 10px;
width: 200px;
}
<table id="swedeFlag" border="2" width="320px" cellspacing="0">
<tr>
<td class="left">blue</td>
<td class="right">blue</td>
</tr>
<tr>
<td class="bLeft">blue</td>
<td class="bRight">blue</td>
</tr>
</table>
<!--http://www.w3schools.com/css/css_border.asp -->
Firstly apologies with my limited knowledge, I am just starting out in CF.
So I am trying to send out an html email with cfmail when a form query is satisfied.
The problem I am having is that the css I am embedding within the email head is either throwing up errors or just not formatting at all. Please could someone look at my code and tell me where I am going wrong.
Incidentally when I take out the # tags in the css it seems to work but the email sends with no formatting!!!
<cfmail to="customer email" from="xxxxxxx#gmail.com" subject="Your order at has been shipped" type="html">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<style type="text/css">
body {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
body, td, th, input, textarea, select, a {
font-size: 12px;
}
p {
margin-top: 0px;
margin-bottom: 20px;
}
a, a:visited, a b {
color: #378DC1;
text-decoration: underline;
cursor: pointer;
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
#container {
width: 680px;
}
#logo {
margin-bottom: 20px;
}
table.list {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
margin-bottom: 20px;
}
table.list td {
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}
table.list thead td {
background-color: #EFEFEF;
padding: 0px 5px;
}
table.list thead td a, .list thead td {
text-decoration: none;
color: #222222;
font-weight: bold;
}
table.list tbody td a {
text-decoration: underline;
}
table.list tbody td {
vertical-align: top;
padding: 0px 5px;
}
table.list .left {
text-align: left;
padding: 7px;
}
table.list .right {
text-align: right;
padding: 7px;
}
table.list .center {
text-align: center;
padding: 7px;
}
</style>
</head>
<body>
<div id="container">
<p>Your Order has been Shipped</p>
<table class="list">
<thead>
<tr>
<td class="left" colspan="2">text_order_detail;</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left"><b>text_order_id</b><br />
<b>text_date_added</b><br />
<b>text_payment_method</b><br />
<b>text_shipping_method</b>
</td>
<td class="left"><b>text_email</b><br />
<b>text_telephone</b><br />
<b>text_ip<br /></td>
</tr>
</tbody>
</table>
<table class="list">
<thead>
<tr>
<td class="left">text_instruction</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">comment</td>
</tr>
</tbody>
</table>
<table class="list">
<thead>
<tr>
<td class="left">text_payment_address</td>
<td class="left">text_shipping_address</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">payment_address</td>
<td class="left">shipping_address</td>
</tr>
</tbody>
</table>
<table class="list">
<thead>
<tr>
<td class="left">text_product</td>
<td class="left">text_model</td>
<td class="right">text_quantity</td>
<td class="right">text_price</td>
<td class="right">text_total</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">product
<br />
<small>option</small>
</td>
<td class="left">product['model']</td>
<td class="right">product['quantity']</td>
<td class="right">product['price']</td>
<td class="right">product['total']</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="right"><b>total['title']</b></td>
<td class="right">total['text']</td>
</tr>
</tfoot>
</table>
<p>text_footer</p>
<p>text_powered</p>
</div>
</body>
</html>
</cfmail>
</cfif>
Two issues the first is you need to use ## in your CSS instead of #, otherwise ColdFusion tries to process those as variables. The second is you have an erroneous </cfif> at the bottom of your page, but that was probably just from when you copy and pasted your code.
I tested the code with ## instead of # and the email sent correctly on CF 9.0.1
You should stick to inline styles for HTML emails rather than having your styles presented the way you are doing.
E.G.
<td style="padding:10px;"></td>