HTML design problem with alignment - html

Please consider the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sign In</title>
</head>
<body bgcolor="#DDDDDD">
<img src="images/logo.png" style="float:right; margin: 0 0 15px 15px;"/>
<div align="center">
<table border="0" width="500" style="border:groove;background:#DCD5F9">
<tr><td width="50%">User Name:</td> <td width="55%"><input type="text" size="35"/></td></tr>
<tr><td width="50%">Password:</td> <td width="55%"><input type="text" size="35"/></td></tr>
<tr><td width="50%"> </td> <td align="left" width="55%"> <input type="submit" value="Login"/></td></tr>
</table>
</div>
</body>
</html>
In browser I see that the <div> is not under the logo.png. Why? And how I can make it to be under the logo.png?
P.S. I would like to add that problem occured when I added the style="float:right; margin: 0 0 15px 15px;" or align="right" in <img> tag.

It's because you've added the float:right on your img which changes how the img will behave in the page flow. Forcing the div to clear content will fix your issue.
change this:
<div align="center">
to:
<div align="center" style="clear:right;">
From Wikipedia:
"A floated item is taken out of the normal flow and shifted to the left or right as far as possible in the space available. Other content then flows alongside the floated item."

Related

HTML email BG color issues

I want to send the following page as an html email. It displays fine on the web but in the email the red background doesnt display for the body or the button at the bottom of the page. What am I missing here?
HTML email has been giving me so much trouble!
Thanks for any help i can get!
http://www.americanvineyardmagazine.com/emails/AVvid14email.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>American Vineyard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<style type="text/css">
th td tr {
text-align: center;
}
</style>
<body style="padding: 0;background-color:#800000">
<table align="center" style="background-image:url(../images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">
<th style="color:#800000; width:650px;"><h1>New Video On American Vineyard Website!</h1></th>
<tr>
<td style="text-align:center;">
<a href="http://www.americanvineyardmagazine.com/index.html#modal-video14">
<img src="http://americanvineyardmagazine.com/images/video.play.png" alt="http://americanvineyardmagazine.com/images/featvideos/featvideo14.jpg" width="300px" style="background:URL(http://www.americanvineyardmagazine.com/images/featvideos/featvideo14.jpg) center center no-repeat;">
</a>
</td>
</tr>
<tr>
<td style="text-align:center; color:#800000; ">
<h2><em>El Niño Amplifies Risk for Vine Canker Disease </em></h2>
</td>
</tr>
<tr>
<td style="text-align:center; color:#800000; ">
<h5>With El Niño coming strong for the next few months, grape growers are grateful for the drought relief; however, pruning is going to be a difficult task this winter with increased disease pressure. Doug Gubler, UC Davis Plant Pathologist addressed this at the SJV Grape Symposium.</h5>
</td>
</tr>
<tr>
<td style="text-align:center;padding-bottom:35px;">
Watch Now!
</td>
</tr>
</table>
</body>
</html>
The problem is in your table's background path.
You are using a relative path here..
<table align="center" style="background-image:url(../images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">
It will display correctly on the web because browser will be able to resolve that.
But when you use it in an email, Email client won't be able to resolve that.
Use absolute path here instead.
<table align="center" style="background-image:url(http://www.americanvineyardmagazine.com/images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">
Use parent class under body tag .wrapper {background-color: #800000;}

empty unwanted vertical space between tables

Well i have something strange.
2 tables should diretly follow each other
there is nothing in between so the new table should directly start.
However some pages show an empty line between them while others do not.
Both pages have the same html header, same doc style, charset..
And no css styles do aply to these tables.
each table starts as
<table width="90%" border="0" align="center" cellpadding="10" celspacing="0">
Here is a page with the conflict :
<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sapec ontwikkeld vision toepassing in industrie</title>
<?php // writing the page menu on top
include './BaseTemplate.php';
WriteHeader();
?>
</head>
<body>
<div id="background"><img src="./assets/image/background2.jpg" width="640" height="400" class="stretch" /></div>
<table width="90%" border="0" align="center" cellpadding="10" cellspacing="0" >
<?php
WriteMenu();
?>
</table>
<table width="90%" border="0" align="center" cellpadding="10" cellspacing="0" >
<tr><td bgcolor="#CCCCCC" colspan="2" valign="top" >
And here is a page that doesnt show the conflict, note that for both these pages the php code outputs exactly the same so that isnt realy relevant.
<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact </title>
<?php // writing the page menu on top
include './BaseTemplate.php';
WriteHeader();
?>
</head>
<body>
<div id="background"><img src="./assets/image/background2.jpg" width="640" height="400" class="stretch" /></div>
<table width="90%" border="0" align="center" cellpadding="10" cellspacing="0" >
<?php
WriteMenu();
?>
</table>
<table width="90%" border="0" align="center" cellpadding="10" cellspacing="0" >
<tr>
<td bgcolor="#CCCCCC" width="45%" valign="bottom" >
Change your cellpadding to
<table width="90%" border="0" align="center" cellpadding="0" celspacing="0">
Check its not some inherited margin/padding
table{
margin: 0px;
padding: 0px;
}
eventualy it turned out that because of a php part contained some wrong formating, not everthing was included inside the parts some where before it, this caused malformatted tables.
I just mark this as answer although the code wasnt in this part, but its solved now, so people wont need to post to this question or think about it anymore.

HTML email gap in outlook 2013

I wrote a simple html email template that seems to render fine in all email clients EXCEPT outlook 2013. I've simplified the code to illustrate the problem below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>K</title>
<style type="text/css">
table {border-collapse: collapse;}
</style>
</head>
<body style="margin:0; background-color:#70b9b9; -webkit-text-size-adjust:none;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td style="background:black;padding:0;"><img src="http://jl.evermight.net/outlook2013/pic.jpg" alt="" border="0" style="display:block; border:none;" /></td>
</tr>
</tbody></table>
</body>
</html>
The problem with this code is that there's a black gap between the green and the image, which I can show here:
So how i get rid of this black gap? Again, this is only a problem in outlook2013
You need to zero out the padding and margin in the image. You should probably set at least the width of the image too, even if it is width="100%".
Here is my basic image setup:
<td>
<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
Also, Outlook has issues with cells shorter than 19px, so make sure your image is tall enough.
Other unrelated notes:
Get rid of <tbody> it does nothing in html email
change background:black; to background-color:#000000;, html email needs the 6-digit hex color

html button CSS resize to fill div

I have read several similar questions, all involving use of width and height attributes either inline or in a class. However no matter how I seem to try it, it is not working.
Due to wanting to apply transformations to the button and text independently, I have had to use a class on the div and a sub class for the button. Stripping the code down, the width and height of the button are not filling the surrounding div.
I am working in Visual Studio 2008 and debugging against IE8 if that makes any difference.
HTML:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!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 runat="server">
<title>Untitled Page</title>
<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td >
<h1> TITLE</h1>
</td>
<td style="width:150px;height:40px;">
<div class="button-wrapper">
<button ID="RetrieveButton2" title="tooltip" runat="server" serverclick="RetrieveButton_Click">Search</button>
</div>
</td>
<td></td>
</tr>
</table>
</div>
</form>
</body>
</html>
CSS:
body
{
}
.button-wrapper
{
width: 150px;
height: 40px;
}
.button-wrapper button
{
width: 100%;
height: 100%;
}
It appears to be environmental. It was not happening on deployment, but it is all academic because requirements have changed so no longer using this code.

Fix height of a table row in HTML Table

Kindly look at the following code:
<!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>
</head>
<body>
<table id="content" height="525" border="0" cellspacing="0" cellpadding="0">
<tr style="height:9px"><td height="9" bgcolor="#990000">Upper</td></tr>
<tr><td bgcolor="#990099">Lower</td></tr>
</table>
</body>
</html>
IE ignores the "height:9px" and I can't get what I want.
Also, without the DOCTYPE, it works. But I have to follow the standard so that DOCTYPE cannot be removed.
Does anyone how to fix the height of the upper row?
Some clarifications:
1. The height of second row may vary according to users' action and cannot be fixed.
2. The height of the table is set to 525px so the table has a minimum height of 525px
the bottom cell will grow as you enter more text ... setting the table width will help too
<!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>
</head>
<body>
<table id="content" style="min-height:525px; height:525px; width:100%; border:0px; margin:0; padding:0; border-collapse:collapse;">
<tr><td style="height:10px; background-color:#900;">Upper</td></tr>
<tr><td style="min-height:515px; height:515px; background-color:#909;">lower<br/>
</td></tr>
</table>
</body>
</html>
my css
TR.gray-t {background:#949494;}
h3{
padding-top:3px;
font:bold 12px/2px Arial;
}
my html
<TR class='gray-t'>
<TD colspan='3'><h3>KAJANG</h3>
I decrease the 2nd size in font.
padding-top is used to fix the size in IE7.
This works, as long as you remove the height attribute from the table.
<table id="content" border="0px" cellspacing="0px" cellpadding="0px">
<tr><td height='9px' bgcolor="#990000">Upper</td></tr>
<tr><td height='100px' bgcolor="#990099">Lower</td></tr>
</table>