I started learning HTML and CSS approximately two months ago. I'm struggling a little when it comes to adding a 'Comment' section in my contact form.
I've not succeeded to add a larger text box for users to enter their message. Why can't I make my message textarea bigger?
Here's the code:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Netflix Title Recommendations</title>
<style>
header {
text-align: center;
margin-bottom: 40px;
text-shadow: 16px 8px 16px grey;
color: #C0392B;
}
.headers1 {
font-size: 48px;
font-family: garamond, serif;
}
.headers2 {
font-size: 24px;
font-family: garamond, serif;
}
.container {
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
}
nav {
text-align: center;
padding: 0px 0px 15px 0px;
}
ul {
list-style-type: none;
margin: auto;
padding: 0;
width: 35%;
height: 100%;
}
li {
padding: 5px;
display: block;
}
li a {
color: #000;
text-decoration: none;
font-family: garamond, serif;
font-size: 16px;
font-weight: bold;
}
.button1, .button2, .button3, .button4, .button5, .button6 {
background-color: #4CAF50;
box-shadow: 5px 10px #f1f1f1;
-webkit-border-radius: 15px
}
.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover, .button6:hover {
background-color: white;
}
.main {
text-align: justify;
font-family: garamond, serif;
font-size: 16px;
}
footer {
text-align: center;
font-size: 14px;
font-family: garamond, serif;
background-color: #E5E7E9;
padding: 10px;
}
</style>
</head>
<body class="container">
<header>
<h1 class="headers1">Netflix UK Title Recommendations</h1>
<h2 class="headers2">Films & TV Series For You To Watch on Netflix UK</h2>
</header>
<nav>
<ul>
<button class="button1"><li>Home</li></button>
<button class="button2"><li>About</li></button>
<button class="button3"><li>Films</li></button>
<button class="button4"><li>TV</li></button>
<button class="button5"><li>Contact</li></button>
<button class="button6"><li>Disclaimer</li></button>
</ul>
</nav>
<div class="main">
<p>Welcome to Netflix UK Title Recommendations! If this is your first visit, please take the time to
learn more about us in the 'About' section.</p>
<p>We update this web site every week, so be sure to check back with us regularly to learn about
some of the greatest new content you will find on Netflix UK.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac ultrices nunc.
Praesent tincidunt dui ante, id commodo leo volutpat sit amet. Cras porttitor gravida facilisis.
Curabitur vel placerat sapien. Sed tempor augue ac ullamcorper tincidunt. Etiam vitae elementum lorem.
Aliquam sodales ipsum ac elementum venenatis.</p>
<p>Donec turpis arcu, scelerisque non facilisis a, volutpat id erat.
Vestibulum ultricies sagittis velit at suscipit. Fusce viverra urna sit amet ipsum volutpat aliquet.
Donec posuere, mi eget luctus eleifend, enim neque vehicula nunc, et mollis leo est non nibh.
Nam in egestas metus, ac mattis tortor. Sed vitae dolor faucibus neque gravida ullamcorper.
Nam eu rutrum lacus, a hendrerit leo.</p>
</div>
<!-- Contact form starts here -->
<form class="contactform">
<fieldset>
<legend>Personal Information:</legend>
<h3>Contact Me</h3>
<label>First Name:</label><br />
<input name="firstname" type="text"><br />
<label>Last Name:</label><br />
<input name="lastname" type="text"><br />
<label>Email:</label><br />
<input name="email" type="email"><br />
<label>Gender:</label><br />
<input type="radio" name="gender" value="male" checked> Male<br />
<input type="radio" name="gender" value="female"> Female<br />
<label for="msg">Message</label>
<textarea="message" name="comment">Enter your message here</textarea><br />
<input type="submit" value="Send" class="submit">
</fieldset>
</form>
<!-- Contact form ends here -->
<footer>Mathew J. M. | 2018 ™</footer>
</body>
</html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Netflix Title Recommendations</title>
<style>
header {
text-align: center;
margin-bottom: 40px;
text-shadow: 16px 8px 16px grey;
color: #C0392B;
}
.headers1 {
font-size: 48px;
font-family: garamond, serif;
}
.headers2 {
font-size: 24px;
font-family: garamond, serif;
}
.container {
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
}
nav {
text-align: center;
padding: 0px 0px 15px 0px;
}
ul {
list-style-type: none;
margin: auto;
padding: 0;
width: 35%;
height: 100%;
}
li {
padding: 5px;
display: block;
}
li a {
color: #000;
text-decoration: none;
font-family: garamond, serif;
font-size: 16px;
font-weight: bold;
}
.button1, .button2, .button3, .button4, .button5, .button6 {
background-color: #4CAF50;
box-shadow: 5px 10px #f1f1f1;
-webkit-border-radius: 15px
}
.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover, .button6:hover {
background-color: white;
}
.main {
text-align: justify;
font-family: garamond, serif;
font-size: 16px;
}
footer {
text-align: center;
font-size: 14px;
font-family: garamond, serif;
background-color: #E5E7E9;
padding: 10px;
}
</style>
</head>
<body class="container">
<header>
<h1 class="headers1">Netflix UK Title Recommendations</h1>
<h2 class="headers2">Films & TV Series For You To Watch on Netflix UK</h2>
</header>
<nav>
<ul>
<button class="button1"><li>Home</li></button>
<button class="button2"><li>About</li></button>
<button class="button3"><li>Films</li></button>
<button class="button4"><li>TV</li></button>
<button class="button5"><li>Contact</li></button>
<button class="button6"><li>Disclaimer</li></button>
</ul>
</nav>
<div class="main">
<p>Welcome to Netflix UK Title Recommendations! If this is your first visit, please take the time to
learn more about us in the 'About' section.</p>
<p>We update this web site every week, so be sure to check back with us regularly to learn about
some of the greatest new content you will find on Netflix UK.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac ultrices nunc.
Praesent tincidunt dui ante, id commodo leo volutpat sit amet. Cras porttitor gravida facilisis.
Curabitur vel placerat sapien. Sed tempor augue ac ullamcorper tincidunt. Etiam vitae elementum lorem.
Aliquam sodales ipsum ac elementum venenatis.</p>
<p>Donec turpis arcu, scelerisque non facilisis a, volutpat id erat.
Vestibulum ultricies sagittis velit at suscipit. Fusce viverra urna sit amet ipsum volutpat aliquet.
Donec posuere, mi eget luctus eleifend, enim neque vehicula nunc, et mollis leo est non nibh.
Nam in egestas metus, ac mattis tortor. Sed vitae dolor faucibus neque gravida ullamcorper.
Nam eu rutrum lacus, a hendrerit leo.</p>
</div>
<!-- Contact form starts here -->
<form class="contactform">
<fieldset>
<legend>Personal Information:</legend>
<h3>Contact Me</h3>
<label>First Name:</label><br />
<input name="firstname" type="text"><br />
<label>Last Name:</label><br />
<input name="lastname" type="text"><br />
<label>Email:</label><br />
<input name="email" type="email"><br />
<label>Gender:</label><br />
<input type="radio" name="gender" value="male" checked> Male<br />
<input type="radio" name="gender" value="female"> Female<br />
<label for="msg">Message</label>
<textarea="message" name="comment">Enter your message here</textarea><br />
<input type="submit" value="Send" class="submit">
</fieldset>
</form>
<!-- Contact form ends here -->
<footer>Mathew J. M. | 2018 ™</footer>
</body>
</html>
It's a simple typo, you've wrote
<textarea="message" name="comment"></textarea>
when it's actually:
<textarea class="message" name="comment"></textarea>
Then you should be able to fix your css:
.message{
height: 500px;
width: 600px;
}
Related
I have an issue with iText. Actually it's multiple issues, but the first and most pressing is that it doesn't render all my html. It stops after 1 page.
I've tried the online test that IText has https://itextpdf.com/demos/convert-html-css-to-pdf-free-online
It shows the same behaviour, so i suspect that there is something with the HTML i generate that doesn't work with iText.
Furthermore, it doesn't appear to respect the area which it's allowed to render in:
It writes HTML down in my footer, which it shouldn't do.
This has all worked with a different html layout using a lot of tables, but we are trying to switch to flexbox.
We have a lot of code that sets up footer and header, but since the Itext demo itself fails with my HTML, i suspect the error is in the HTML and not our other code.
I hope some wizard in iText is able to point out what could be cause this to happen.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#font-face {
font-family: Noto;
src: url("fonts/noto/NotoSans-Regular.ttf");
}
.testDesign {
font-family: Noto;
font-size: 12px;
display: flex;
flex-direction: column;
flex: 1 0 auto;
color: #000000;
}
.testDesign :where(h1,
h2,
h3,
h4,
h5,
h6) {
font-family: Noto;
margin-bottom: 0;
}
.testDesign h1,
.testDesign h2,
.testDesign h3,
.testDesign h4,
.testDesign h5,
.testDesign h6,
.testDesign .h1,
.testDesign .h2,
.testDesign .h3,
.testDesign .h4,
.testDesign .h5,
.testDesign .h6 {
font-weight: 500;
}
.testDesign h1,
.testDesign h2,
.testDesign h3,
.testDesign h4,
.testDesign h5,
.testDesign h6 {
margin-top: 0;
margin-bottom: 0;
}
.testDesign :root {
accent-color: #272F96;
}
.testDesign body {
padding-bottom: 0;
--general-layout-separate-number-column-width: 50px;
}
.testDesign .test-disabled {
opacity: 0.4;
pointer-events: none;
}
.testDesign .form-check-inline .form-check-input {
margin-right: 0;
}
.testDesign .form-check-input~.form-check-label {
padding-left: .3125rem;
}
.testDesign .preview-logo {
font-family: Noto;
font-size: 24px !important;
text-align: center !important;
letter-spacing: -2px;
}
.testDesign .test-heading {
font-family: Noto;
font-size: 36px !important;
text-align: center !important;
color: #e51010 !important;
font-weight: bold !important;
font-style: italic !important;
text-transform: none !important;
text-decoration: none !important;
background-color: #a2abeb !important;
padding-left: 2px !important;
padding-top: 27px !important;
padding-bottom: 27px !important;
margin-top: 29px !important;
margin-bottom: 37px !important;
}
.testDesign .product-heading {
font-family: Noto;
font-size: 28px !important;
text-align: center !important;
color: #000000 !important;
font-weight: bold !important;
font-style: italic !important;
text-transform: none !important;
text-decoration: underline !important;
padding-left: 0px !important;
margin-top: 0px !important;
margin-bottom: 41px !important;
}
.testDesign .section-heading {
font-family: Noto;
font-size: 15px !important;
text-align: center !important;
color: #000000 !important;
font-weight: normal !important;
font-style: italic !important;
text-transform: uppercase !important;
text-decoration: none !important;
background-color: #a2abeb !important;
padding-top: 24px !important;
padding-right: 12px !important;
padding-bottom: 24px !important;
padding-left: 36px !important;
margin-top: 48px !important;
margin-bottom: 36px !important;
border-left-width: 6px;
border-left-color: #e51010;
border-left-style: solid;
border-right-width: 6px;
border-right-color: #e51010;
border-right-style: solid;
border-top-width: 6px;
border-top-color: #e51010;
border-top-style: solid;
border-bottom-width: 6px;
border-bottom-color: #e51010;
border-bottom-style: solid;
}
.testDesign .section-heading::after {
content: "";
}
.testDesign .logo-width {
width: 23%;
}
.testDesign .lvl-1 {
font-family: Noto;
padding-left: 0px;
margin-bottom: 12px;
line-height: 1.2;
}
.general-layout--separate-number-column .testDesign .lvl-1 .lvl-1-body {
padding-left: 58px;
}
.testDesign .lvl-1 .lvl-1-body {
padding-left: 8px;
}
.testDesign .lvl-2 {
font-family: Noto;
padding-left: 8px;
margin-bottom: 12px;
line-height: 1.2;
}
.general-layout--separate-number-column .testDesign .lvl-2 {
padding-left: 58px;
}
.testDesign .lvl-2 .lvl-2-body {
padding-left: 16px;
}
.general-layout--columns .testDesign .lvl-2 .lvl-2-body {
padding-left: 0;
}
.testDesign .lvl-3 {
font-family: Noto;
padding-left: 24px;
margin-bottom: 12px;
line-height: 1.2;
}
.general-layout--separate-number-column .testDesign .lvl-3 {
padding-left: 74px;
}
.testDesign .lvl-3 .lvl-3-body {
padding-left: 32px;
}
.general-layout--columns .testDesign .lvl-3 .lvl-3-body {
padding-left: 0;
}
.testDesign .lvl-4 {
font-family: Noto;
padding-left: 56px;
margin-bottom: 12px;
line-height: 1.2;
}
.general-layout--separate-number-column .testDesign .lvl-4 {
padding-left: 106px;
}
.general-layout--columns .testDesign .lvl-4 .lvl-4-body {
padding-left: 0;
}
.testDesign .lvl-1-heading {
font-size: 15px !important;
color: #1111aa !important;
font-weight: bold !important;
font-style: italic !important;
text-transform: none;
text-decoration: underline !important;
}
.testDesign .lvl-1-heading::after {
content: "";
}
.testDesign .lvl-2-heading {
/* font-size: 13px !important; */
font-size: 12px !important;
color: #1111aa !important;
font-weight: normal !important;
font-style: normal !important;
text-transform: none;
text-decoration: none !important;
}
.testDesign .lvl-2-heading::after {
content: "";
}
.testDesign .lvl-3-heading {
/* font-size: 13px !important; */
font-size: 12px !important;
color: #1111aa !important;
font-weight: normal !important;
font-style: normal !important;
text-transform: none;
text-decoration: none !important;
}
.testDesign .lvl-3-heading::after {
content: "";
}
.testDesign .lvl-4-heading {
/* font-size: 13px !important; */
font-size: 12px !important;
color: #1111aa !important;
font-weight: normal !important;
font-style: normal !important;
text-transform: none;
text-decoration: none !important;
}
.testDesign .lvl-4-heading::after {
content: "";
}
.testDesign table {
border-collapse: collapse;
}
.testDesign table th,
.testDesign table td {
font-size: 90%;
vertical-align: top;
padding: 3px 2px;
border-width: 1px;
border-style: solid;
border-top-color: #999999;
border-bottom-color: #999999;
border-left-color: transparent;
border-right-color: transparent;
}
.testDesign table th {
color: #000000;
background-color: transparent;
}
.testDesign .a4-page-container {
width: 52rem;
height: 7000px;
overflow-y: hidden;
position: relative;
}
.testDesign .a4-page-container.a4-landscape {
width: 73.46rem;
height: 52rem;
}
.testDesign .a4-page-footer {
position: absolute;
height: 4rem;
border-top: 1px solid #D6DCE0;
right: 3rem;
bottom: 0;
left: 3rem;
background-color: #fff;
opacity: .8;
}
.testDesign .letter-spacing-1 {
letter-spacing: 1px;
}
.testDesign .almego-test-designer-properties-grid {
display: grid;
grid-template-columns: 6rem 1fr;
}
.testDesign .preview-highlight-selected-editor {
position: relative;
}
:not(.previewAllContent) .testDesign .preview-highlight-selected-editor::before {
content: "";
position: absolute;
width: 2px;
left: -24px;
top: -2px;
bottom: -2px;
background: #9397CA;
}
.previewAllContent .testDesign .preview-highlight-selected-editor::before {
display: none;
}
.testDesign .preview-hover-highlight-selectable-editor:not(.preview-highlight-selected-editor) {
opacity: .35;
}
.previewAllContent .preview-hover-highlight-selectable-editor {
opacity: 1 !important;
}
.testDesign .preview-hover-highlight-selectable-editor:hover {
outline: 1px dashed #D4D5EA;
outline-offset: 5px;
opacity: 1;
}
#keyframes backgroundFadeOut {
0% {
background: #9397CA;
}
100% {
background: transparent;
}
}
#keyframes navBackgroundColorFade {
0% {
background-color: #D1F2FA;
}
100% {
background-color: transparent;
}
}
.testDesign .highlightNav {
animation: navBackgroundColorFade 5s ease;
}
.testDesign .color-preview {
height: 1rem;
width: 1rem;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.testDesign .general-layout--separate-number-column .lvl-1-heading {
display: flex;
flex-direction: row;
}
.testDesign .general-layout--separate-number-column .lvl-1-number {
width: 50px;
}
.testDesign .general-layout--columns .lvl-container:not(.lvl-1) {
display: flex;
width: 100%;
flex-direction: row;
}
.testDesign .general-layout--columns .lvl-heading:not(.lvl-1-heading) {
width: 25%;
}
.testDesign .general-layout--columns .lvl-body:not(.lvl-1-body) {
padding-left: 5px;
}
.testDesign .layout-grid {
grid-template-columns: 26rem 1fr 1fr 1fr 1fr 1fr;
}
.testDesign .grid-template-maxc-1fr {
grid-template-rows: max-content 1fr;
}
.testDesign .box-illustration {
height: 1rem;
width: 1rem;
border-width: 1px;
border-style: solid;
border-color: #c3c3c3;
position: relative;
}
.testDesign .box-illustration.top {
border-top-color: #272F96;
border-top-width: 2px;
}
.testDesign .box-illustration.right {
border-right-color: #272F96;
border-right-width: 2px;
}
.testDesign .box-illustration.bottom {
border-bottom-color: #272F96;
border-bottom-width: 2px;
}
.testDesign .box-illustration.left {
border-left-color: #272F96;
border-left-width: 2px;
}
.testDesign .box-illustration.center-horizontal::before {
content: "";
position: absolute;
top: .35rem;
left: 0;
right: 0;
height: 2px;
background-color: #272F96;
}
.testDesign .chevron-down {
display: inline-block;
transform: rotate(90deg);
font-size: 1rem;
line-height: 1px;
}
.testDesign .active-nav-bg {
background-color: #e9ecef !important;
}
</style>
</head>
<body>
<div id="document">
<?xml version="1.0" encoding="utf-16"?>
<div class="testDesign" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:msxsl="urn:schemas-microsoft-com:xslt">
<div class="general-layout--columns general-layout--separate-number-column">
<h2 class="test-heading">TEST BIG HEADER</h2>
<h1 class="product-heading">Test sub heading</h1>
<section class="section">
<h2 class="section-heading">Section 1: Test section heading</h2>
<div class="section-body">
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading">
<span class="lvl-1-number pr-1g">1.1 </span>
<span class="lvl-1-title">Testidentifikation</span>
</h3>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading">
<span class="lvl-2-title">Testname</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>test test test</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">1.2 </span><span class="lvl-1-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span>
</h3>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>No special</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test sub level 2 header</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>No special</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">1.3 </span><span class="lvl-1-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</span>
</h3>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">test and test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div data-paragraphno=""><b>Test</b></div>
<div>Test</div>
<div>4000<span style="padding-left: 0.4em;">Test</span></div>
<div>Test</div>
<div>12 34 56 78</div>
<div>test</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Test</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Test</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>24-06-2022</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">test Version</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>1.0</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">1.4 </span><span class="lvl-1-title">Test</span></h3>
<div class="lvl-1-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
</div>
</section>
<section class="section">
<h2 class="section-heading">Section 2: Test section 2 header</h2>
<div class="section-body">
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">2.1 </span><span class="lvl-1-title">Test sub header</span>
</h3>
<div class="lvl-1-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<div class="lvl-1-body lvl-body" />
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">2.2 </span><span class="lvl-1-title">Test</span></h3>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">""</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Warning</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
</div>
<div class="lvl-3 lvl-container">
<h3 class="lvl-3-heading lvl-heading"><span class="lvl-3-title">Test</span>
</h3>
<div class="lvl-3-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-3 lvl-container">
<h3 class="lvl-3-heading lvl-heading"><span class="lvl-3-title">Test</span>
</h3>
<div class="lvl-3-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-3 lvl-container">
<h3 class="lvl-3-heading lvl-heading"><span class="lvl-3-title">Test</span>
</h3>
<div class="lvl-3-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-3 lvl-container">
<h3 class="lvl-3-heading lvl-heading"><span class="lvl-3-title">Test</span>
</h3>
<div class="lvl-3-body lvl-body">
<div>-</div>
</div>
</div>
<div class="lvl-3 lvl-container">
<h3 class="lvl-3-heading lvl-heading"><span class="lvl-3-title">Test</span>
</h3>
<div class="lvl-3-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Test</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">2.3 </span><span class="lvl-1-title">Test</span></h3>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Test</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
</div>
</div>
</div>
</section>
<section class="section">
<h2 class="section-heading">Section 3: testing heading 3</h2>
<div class="section-body">
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">3.2 </span><span class="lvl-1-title">Test</span></h3>
</div>
<div class="pl-4 pb-2">
<table border="1">
<tr>
<th style="width:23%">Test</th>
<th style="width:27%">Test</th>
<th style="width:14%">test</th>
<th style="width:30%">Test</th>
<th style="width:6%">Test</th>
</tr>
<tr>
<td>Test</td>
<td>
<table>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
</table>
</td>
<td>Test</td>
<td>Test<br/></td>
<td/>
</tr>
</table>
</div>
<div class="lvl-1 lvl-container">
<div class="lvl-1-body lvl-body">
<div>-----</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-title">Test</span>
</h3>
<div class="lvl-1-body lvl-body">
<div>Test</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
I have this basic example that should display these three table cells as blocks (underneath each other) on mobile devices.
Yet this doesn't seem to work out on iPad, iPhone, nor on a Samsung phone. It does work on regular browsers and websites that simulate a mobile display (for web pages probably), but when viewing on actual mail clients of mobile devices, the display: block property seems to be ignored.
Is there anything that's missing? Or if the display-attribute isn't supported at all, what is the alternative?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Mobilize me</title>
<style type="text/css">
#media only screen and (max-width: 1400px) {
table,tr,td{
width: 100% !important;
display: block !important;
clear: both !important;
}
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" width="900">
<tr>
<td width="33%" bgcolor="red">
one
</td>
<td width="33%" bgcolor="green">
two
</td>
<td width="33%" bgcolor="blue">
three
</td>
</tr>
</table>
</body>
</html>
Remarkably the example from this thread isn't working either.
Use three nested tables with "align=" to replicate "float" and have a media query to resize table to 100% with display:block on mobile.
I added classes to differentiate between container and block tables. Also added a couple inline styles to help.
E.G.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Mobilize me</title>
<style type="text/css">
#media only screen and (max-width: 900px) {
.container {
width: 100% !important;
text-align:center !important;
}
.blocktable {
width: 100% !important;
display: block !important;
margin: 0 auto !important;
}
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="900" class="container" style="border-collapse:collapse;">
<tr>
<td align="center">
<table align="left" bgcolor="RED" cellspacing="0" cellpadding="0" border="0" width="33%" class="blocktable" style="border-collapse:collapse;">
<tr>
<td>one</td>
</tr>
</table>
<table align="left" bgcolor="GREEN" cellspacing="0" cellpadding="0" border="0" width="34%" class="blocktable" style="border-collapse:collapse;">
<tr>
<td>two</td>
</tr>
</table>
<table align="right" bgcolor="BLUE" cellspacing="0" cellpadding="0" border="0" width="33%" class="blocktable" style="border-collapse:collapse;">
<tr>
<td>three</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I think it's safe to conclude, at the moment of this writing, that this technique is, or has become, unsupported.
A better approach would to work with 2 different displays: one design for desktop readers, and one for mobile readers, as demonstrated below (tested, and works):
<!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" />
<style type="text/css">
<!--
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
a:hover,
a:visited,
a:active {
color: #ffffff;
}
#media screen and (max-width: 480px), screen and (max-device-width: 480px) {
body { -webkit-text-size-adjust: none;}
div[id=desktop] {
display:none !important;
width:0px !important;
overflow:hidden !important;
}
div[id=mobile] {
display:block !important;
width:100% !important;
height:auto !important;
max-height:inherit !important;
overflow:visible !important;
}
div[id=mobile] table{
display: block !important;
overflow: auto;
}
div[id=mobile] img{
width: 100%;
}
-->
</style>
<style type="text/css">
div.online p {margin:0; padding:0; margin-bottom:0;}
div.online a:link, div.online a:visited, div.online a:hover, div.online a:active { color: #333333; }
</style>
</head>
<body bgcolor="#e6e6e6" style="margin:0;">
<div class="online" style="margin:10px auto; color: #333333; font-family: verdana; font-size:11px;text-align:center;">
View in browser
</div>
<div id="desktop">
<table cellpadding="10" cellspacing="0" border="0" style="width:100%; background-color:#e6e6e6;">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" style="width:620px; background-color:#ffffff; text-align:left;">
<tr>
<td>
<table cellpadding="0" cellspacing="20" border="0" style="width:620px; text-align:left; background-color:#ffffff;">
<tr>
<td><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/header.jpg" border="0" style="display:block;" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="20" border="0">
<tr>
<td valign="top"><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/00f_1.gif" style="max-width: 240px;" /></td>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333;">
<tr>
<td style="font-size:22px; color:#fea900;">Block 1</td>
</tr>
<tr>
<td><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/filler12.png" /></td>
</tr>
<tr>
<td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="20" border="0">
<tr>
<td valign="top"><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/0f0_1.gif" style="max-width: 240px;" /></td>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333;">
<tr>
<td style="font-size:22px; color:#fea900;">Block 2</td>
</tr>
<tr>
<td><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/filler12.png" /></td>
</tr>
<tr>
<td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="border-bottom: 2px dotted #666666;"><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/filler12.png" /></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="mobile" style="display:none; width:0px; max-height:0px; overflow:hidden;">
<table cellpadding="10" cellspacing="0" border="0" style="width:100%; background-color:#e6e6e6; display:none;">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%; background-color:#ffffff; text-align:left; display:none;">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="width:100%; text-align:left; background-color:#ffffff; display:none;">
<tr>
<td><img id="header" src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/header.jpg" border="0" style="display:block;" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="10" border="0" style="display:none;">
<tr>
<td>
<table cellpadding="0" cellspacing="10" border="0" style="font-family:Arial; font-size:14px; color:#333333; display:none;">
<tr>
<td><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/00f_1.gif" /></td>
</tr>
<tr>
<td style="font-size:20px; color:#fea900;">Block 1</td>
</tr>
<tr>
<td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="10" border="0" style="display:none;">
<tr>
<td>
<table cellpadding="0" cellspacing="10" border="0" style="font-family:Arial; font-size:14px; color:#333333; display:none;">
<tr>
<td><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/0f0_1.gif" /></td>
</tr>
<tr>
<td style="font-size:20px; color:#fea900;">Block 2</td>
</tr>
<tr>
<td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="border-bottom: 2px dotted #666666;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="online" style="margin: 10px auto 25px; color: #333333; font-family: verdana; font-size:11px;text-align:center;">
<p align="center">
Unsubscribe -
Edit profile
</p>
<p align="center" style="margin-top: 15px;"></p>
</div>
</body>
</html>
I have a jsfiddle here - http://jsfiddle.net/drRG9/
and live demo here - http://www.ttmt.org.uk/forum/clone/
It's two div's (yellow) with the same class name 'article'.
Each yellow div contains a div with class name 'images' (red border).
First yellow div contains a list of images I would like to clone to IT'S images div
So the images should be cloned to the first red border div and not the bottom one.
So how do I clone the images just to the one div with a class name.
I hope that makes sense.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Title of the document</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
height:100%;
background:#ddd;
}
#wrapper{
min-height:100%;
max-width:800px;
margin:0 auto;
background:#fff;
margin-top:-20px;
padding-top:40px;
}
.article{
background:yellow;
margin:20px;
}
ul{
list-style:none;
margin:10px;
}
ul li{
display:inline-block;
}
.images{
min-height:20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="article">
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<ul>
<li><img src="images/red01.jpg" /></li>
<li><img src="images/red02.jpg" /></li>
<li><img src="images/red03.jpg" /></li>
<li><img src="images/red04.jpg" /></li>
</ul>
</div><!-- .text -->
<div class="images">
</div><!-- .images -->
</div><!-- .article -->
<div class="article">
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div><!-- .text -->
<div class="images">
</div><!-- .images -->
</div><!-- .article -->
</div>
<script>
$(function(){
$('.text ul').clone().appendTo('.article .images', this);
})
</script>
</body>
</html>
Try this:
$('.text ul').clone().appendTo('.article:first .images', this);
This will only clone into the first .article.
As your comment, you can try this:
var closest = $('.text ul').closest('.article');
$('.text ul').clone().appendTo(closest.find('.images'));
You can see .closest() for more information.
update
Since you have more than one <ul>, you need wrap this code in .each().
Try this code:
$('.text ul').each(function(){
var closest = $(this).closest('.article');
$(this).clone().appendTo(closest.find('.images'));
});
I'm trying to get the BS sticker footer as in this example http://twitter.github.com/bootstrap/examples/sticky-footer.html
I added the css and html to my gwt Uibinder xml file but it seems the wrap css selector has no effect. I’m not sure if this is b/c i need to redefine the css elements that will be included under 'wrap' div. I'm not sure why the BS sticker footer in GWT doesn't work . do you have a GWT uibinder example of a BS sticker footer?
---UPDATE---
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style >
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -30px;
}
#footer {
min-height: 40px;
/* padding-left:250px;*/
background-color: #f2f2f2;
}
/* Set the fixed height of the footer here */
#push, #footer {
height: 30px;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container2 {
width: auto;
max-width: 680px;
}
.credit {
margin-left: auto;
margin-right: auto;
width:580px;
}
#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
</ui:style>
<g:HTMLPanel >
<!-- Part 1: Wrap all page content here -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">GND</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Search</li>
<li>Maintain</li>
<li>Add Data</li>
<li class="dropdown">
<!-- Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul> -->
</li>
</ul>
<!-- <form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email"></input>
<input class="span2" type="password" placeholder="Password"></input>
<button type="submit" class="btn">Sign in</button>
</form> -->
<form class="navbar-search pull-right">
<input type="text" class="search-query" placeholder="Search"></input>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div id="wrap">
<div id="main" class="container clear-top">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="row">
<div class="span12">
<p> </p>
</div>
</div>
<div class="well well-small">
<h2 align="center">Welcome To The Geospatial Network Database!</h2>
<p align="center">This is a demo for gwt and Bootsrap library integration</p>
<!-- <p><a class="btn btn-primary btn-large">Learn more »</a></p> -->
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span3">
<h2>How It works</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" data-content="And here's some amazing content. It's very engaging. right?" rel="popover" href="#" data-original-title="A Title" >View details »</a></p>
</div>
<div class="span3">
<h2>Who It Is For</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span3">
<h2>Get Support</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span3">
<h2>Find Out More</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
<div class="row">
<div class="span6">
<div class="well">
<ul class="nav nav-list" ui:field="recentDocumentList">
<li class="nav-header">What's New</li>
<!-- <li class="active" ui:field='moreItem'></li> -->
<!--
<li>Document2</li>
<li>Document3</li>
<li>Document4</li>
<li>Document5</li>
<li>Document6</li> -->
</ul>
</div>
</div>
<div class="span6">
<div class="well">
<h2>Section</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<!-- <p> </p> -->
<!-- <br></br> -->
<p>
<!-- <a class="btn btn-primary" id="myButton" data-content="And here's some amazing content. It's very engaging. right?" rel="popover" href="#" data-original-title="A Title">Click to toggle popover</a> </p> -->
<g:Button styleName="btn btn-primary" ui:field="myButton">Click to toggle popover »</g:Button> </p>
</div>
</div>
</div>
</div> <!-- /container -->
<div id="push"></div>
</div>
<footer>
<p align="center" >© 2012 Ian Mayo and othman El Moulat.</p>
</footer>
</g:HTMLPanel>
</ui:UiBinder>
I'm developing an email newsletter and I have it looking good in all the email clients I need to test for (AOL, Hotmail, Yahoo, Gmail, Outlook, Lotus Notes, Thunderbird, etc.) except on iPhones. Even iPads look good, so it's not an iOS thing. I used a table-based layout and am using litmus.com to test.
Here's the screenshot:
And here's my table structure. (This is a nested table and only part of the newsletter.)
Notice that the gap is only on one side.
Both images on the sides are the same height and both have the width and height declared in the <img> tag. I've dealt with gaps in email newsletters before. Adding display:block; and taking away physical spaces between <tr>'s and <td>'s usually does the trick, but I've tried and again, no luck.
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Newsletter</title>
</head>
<body style="font-family: Helvetica, Arial, sans-serif;">
<table cellpadding="0" cellspacing="0" align="center" style="margin:0 auto; width:650px;" width="650">
<tr><td colspan="2"><p align="right" style="font-size: 12px; line-height:18px;"><forwardtoafriend>Forward to a Friend</forwardtoafriend></p></td></tr>
<tr><td>
<table cellpadding="0" cellspacing="0" style="margin: 0 auto; border-collapse:collapse;" align="center" width="650" bgcolor="#efe8d8">
<tr><td><img src="images/header.jpg" alt="Description" width="650" height="110" style="display:block;" /></td></tr>
<tr><td>
<table cellpadding="0" cellspacing="0" width="650">
<tr><td colspan="3"><img src="images/hotter.jpg" alt="Description" width="650" height="144" border="0" style="display:block;" /></td></tr>
<tr><td valign="top"><img src="images/letter-l.jpg" width="61" height="613" style="display:block;"></td><td width="495" height="613" bgcolor="#f7f4eb" style="height:613px;"><h3 style="margin:0 0 30px; font-family:Helvetica, Arial, sans-serif; color:#000; font-size:18px;">Greetings,</h3>
<p style="margin:10px 0px; font-family:Helvetica, Arial, sans-serif; color:#000; line-height:20px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis metus quam, lacinia vehicula tellus. Donec a elementum est. Fusce et sem nec diam aliquam rhoncus non non orci. Phasellus tortor eros, aliquam et ultrices vel, mollis et ante. Sed id lectus at mi massa nunc.</p>
<p style="margin:10px 0px; font-family:Helvetica, Arial, sans-serif; color:#000; line-height:20px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu urna sed nisl aliquet pretium. Nullam mattis cursus nisi ut porttitor. Suspendisse ut lectus elit, ut placerat neque. Aliquam orci lacus, dictum accumsan euismod a, imperdiet sit amet lorem. Maecenas vitae justo nisi, non convallis tortor. Class aptent taciti sociosqu ad litora torquent per conubia sed.</p>
<p style="margin:10px 0px; font-family:Helvetica, Arial, sans-serif; color:#000; line-height:20px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vestibulum pulvinar ullamcorper. Nulla varius pretium turpis vitae adipiscing. Proin suscipit, tortor interdum lobortis malesuada, quam arcu dictum sapien, in varius nulla quam a mi. Duis eget orci quis mi egestas sollicitudin. Vestibulum gravida odio et metus.</p>
<p style="margin:10px 0px; font-family:Helvetica, Arial, sans-serif; color:#000; line-height:20px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a erat nec est luctus consequat sed id erat. Duis odio sem, blandit sed malesuada eget, convallis commodo felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam vitae fermentum augue. Nam a fermentum enim. In diam turpis volutpat.</p>
<p style="margin:10px 0px; font-family:Helvetica, Arial, sans-serif; color:#000; line-height:20px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac orci sed massa interdum suscipit. Proin facilisis venenatis lacus, sed cursus sem hendrerit ac. Sed tristique, nisi a nullam.</p></td><td valign="top"><img src="images/letter-r.jpg" width="94" height="613" style="display:block;"></td></tr>
<tr><td colspan="3"><img src="images/letter-bottom.jpg" width="650" border="0" style="display:block;" /></td></tr>
</table>
</td></tr>
<tr><td><img src="images/star-rewards.jpg" alt="Description">
<table cellpadding="0" cellspacing="0" width="650">
<tr><td><img src="images/card-star.jpg" border="0"></td><td>
<img src="images/header-star.jpg" border="0">
<p style="margin:10px 30px 10px 0; font-family:Helvetica, Arial, sans-serif; color:#636364; line-height:24px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie nulla vel lorem scelerisque hendrerit. Phasellus sed ullamcorper lorem. Phasellus molestie convallis aliquet. Proin justo magna, aliquam amet.</p></td></tr>
<tr><td><img src="images/card-sky.jpg" border="0"></td><td>
<img src="images/header-sky.jpg" border="0">
<p style="margin:10px 30px 10px 0; font-family:Helvetica, Arial, sans-serif; color:#636364; line-height:24px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel est nec nibh imperdiet suscipit ornare porta enim. Aenean lobortis orci at ligula sollicitudin semper. Suspendisse potenti. Curabitur mollis tellus ut sem consequat placerat. Cras amet.</p></td></tr>
<tr><td><img src="images/card-wind.jpg" border="0"></td><td>
<img src="images/header-wind.jpg" border="0">
<p style="margin:10px 30px 10px 0; font-family:Helvetica, Arial, sans-serif; color:#636364; line-height:24px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis quam vel orci pharetra tempus ut quis neque. Duis condimentum magna ut lorem vulputate et dapibus ipsum facilisis. Nullam rutrum rhoncus massa, ut viverra risus luctus eget. Fusce nullam.</p></td></tr>
<tr><td><img src="images/card-water.jpg" border="0"></td><td>
<img src="images/header-water.jpg" border="0">
<p style="margin:10px 30px 10px 0; font-family:Helvetica, Arial, sans-serif; color:#636364; line-height:24px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum libero mauris, porttitor ac placerat blandit, sodales quis diam. Suspendisse at est ante. Integer et porta lacus. Ut egestas elementum metus.</p></td></tr>
<tr><td><img src="images/card-earth.jpg" border="0"></td><td>
<img src="images/header-earth.jpg" border="0">
<p style="margin:10px 30px 10px 0; font-family:Helvetica, Arial, sans-serif; color:#636364; line-height:24px; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent venenatis erat id nibh ultrices vehicula. Quisque interdum posuere ante at aliquam. Nullam sed lectus ut ipsum rutrum lacinia malesuada massa nunc.</p>
</td></tr>
<tr><td></td><td><p style="margin:10px 30px 10px 0; font-family:Helvetica, Arial, sans-serif; color:#636364; line-height:20px; font-size:12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet tincidunt ipsum eget ultricies. Etiam bibendum elementum mollis. Pellentesque eleifend sollicitudin tincidunt. Proin nulla felis, congue at nullam.</p></td>
</table>
</td></tr>
<tr><td colspan="3" style="padding:0;margin:0;line-height:0;"><img src="images/logo.jpg" alt="Description" /></td></tr><tr><td style="padding:0;margin:0;line-height:0;"><img style="padding:0;margin:0;line-height:0;" src="images/footer-l.jpg" /><a style="padding:0;margin:0;line-height:0;" href="#"><img style="padding:0;margin:0;line-height:0; border:none;" src="images/footer-url.jpg" alt="Description" /></a><img style="padding:0;margin:0;line-height:0;" src="images/footer-r.jpg" /></td></tr><tr><td style="padding:0;margin:0;line-height:0;"><img src="images/footer-bottom.jpg" /></td></tr><tr><td style="padding:0;margin:0;line-height:0;"><img src="images/follow.jpg" alt="Follow us on Twitter and Facebook!" /><img style="border:none;" src="images/twitter.jpg" alt="#" /><img style="border:none;" src="images/facebook.jpg" alt="Facebook" /></td></tr></table><tr><td colspan="2" bgcolor="#FFFFFF"><p align="center" style="font-size: 12px; line-height:18px;"><unsubscribe>Unsubscribe</unsubscribe> or <preferences>Change your Email Address</preferences></p>
</td></tr>
</table>
</body>
</html>
EDIT: I've updated it with the full code. However I've changed the link href's, image descriptions, and the copy out of respect of the client. Each paragraph of dummy text is the same character count as the original. The problem cell is the one containing letter-l.jpg.
usually just removing the bgcolor from TDs and adding it to tables resolves this issue. Strange thing is today I've got into the same problem and my fix is not working anymore :(