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>
Related
I have the following html code. When I see the output I see that a line break has been inserted before and after the text.
But no line break is inserted when the doctype is changed to
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
I do not want the line breaks. What can I do without changing the doctype.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<table border="1" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="220">
</td>
<td valign="bottom" align="left">
<p>Test Message</p>
</td>
</tr>
</table>
</body>
</html>
If I understand correctly I think this will be a solution.
Set the padding and margin of the P element in your css to 0.
Here's an example
p {
margin: 0;
padding: 0;
}
this is enough to solve your problem
p{
margin:0;
}
Fiddle
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
Consider this HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<table cellspacing = "10" cellpadding="0" border="1" width="100%">
<tr>
<td>
<input style="border-width:1px; border-style:solid; width:100%; background-color:aqua">
</td>
</tr>
</table>
</html>
It outputs the following, and, as you can see, there is a little bit of overlap on the right hand side.
How can I change this code so that the input box will take up the entire inside space of the TD without overlapping?
Please note that I'm looking for a solution in which:
The DOCTYPE tag and html tag are as mentioned above.
The container elements' sizes are not fixed, as above.
Thank you.
Adding box-sizing: border-box on the input tag's style element solved the problem, as mentioned by JamWaffles.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table cellspacing = "10" cellpadding="0" border="1" width="100%">
<tr>
<td>
<input style="box-sizing: border-box; border-width:1px; border-style:solid; width:100%; background-color:aqua">
</td>
</tr>
</table>
</body>
</html>
The following HTML display fine.
<!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>Hello</title>
</head>
<body>
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
</html>
However, there is a space of around 10 pixel between the left and top edges my div and the browser window.
Is there a way to get rid of it so that the div is "glued" to the browser window?
You could add CSS to the document....
<!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>Hello</title>
<style type="text/css">
body { margin:0; }
</style>
</head>
<body>
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
Or you could add the CSS as an inline style
<!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>Hello</title>
</head>
<body style="margin:0;">
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
</html>
All browsers have a default margin around the top and left edge of the window. There's nothing wrong with your page. You merely need to tell the browser to remove the default margins.
To leave the padding and margins of other elements alone, just reset the body.
body { padding: 0; margin: 0; }
Use a CSS reset.
<style type="text/css">* { padding: 0; margin: 0; }</style>
Try adding style to the body tag, like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello</title>
</head>
<body style="margin: 0;">
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
</html>
If you do any of the above codes, but you do not set your table properties to percent rather than pixels, you will probably still end up with a margin-type space around your page. Like as in the bottom scroll bar will still show.
<table bgcolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="4">
<tr>
<td width="15%" align="left" valign="top" bgcolor="#B8B8B6">
</td>
<td width="85%" bgcolor="#FFFFFF" align="left" valign="top">
</td>
</table>
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."