HTML Strict increases line height - html

Why does XHTML 1.0 Strict display a line height as appearing larger than a line height of the same value in XHTML 1.0 Transitional?
This therefore pushing down content within table cells (i.e Hotmail in Firefox, Gmail in IE and Firefox). Has anyone else experienced this issue and know a way around it?
Cheers
Heres an example code for each XHTML type:
Transitional:
<!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>Untitled Document</title>
</head>
<body>
<table width="500" border="1" cellspacing="0" cellpadding="0">
<tr>
<td style="line-height:18px;"><font style="line-height:18px; font-size:16px; font-family:Arial, Helvetica, sans-serif;">This cell will be larger in Strict</font></td>
</tr>
</table>
</body>
</html>
Strict:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table width="500" border="1" cellspacing="0" cellpadding="0">
<tr>
<td style="line-height:18px;"><font style="line-height:18px; font-size:16px; font-family:Arial, Helvetica, sans-serif;">This cell will be larger in Strict</font></td>
</tr>
</table>
</body>
</html>

#ryano as far as I am aware, there is not a definitive fix for this, most people seem to be using a margin-top:-2px; fix on the table-cell itself.
Hope that helps.

Related

Salesforce login link not loading login page using frames

I am experiencing quiet an unusual issue with salesforce when I put it in a html frame, when I click on the login button link, it is not loading the login page. but every other link is working perfectly fine, as soon as I take it out of the html frame it works, is there something that can be done to fix this issue by any chance? I have looked and been unsuccessful.
So i got 2 .html files 1 named Script, which is just plain simple text to be displayed in the left frame, and the main frame is the salesforce link.
Then the third html file is the frame file which links both html files to load into one.
The code for all this is below, please let me know if you are successful, Thanks.
script.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="refresh" content="60; url=script.html" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Script</title>
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
-->
</style>
</head>
<body>
<p> hello how are you </p>
</body>
</html>
salesForce.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="refresh" content="0; url=http://www.salesforce.com/au/" />
<title>Sales Force</title>
</head>
<body>
</body>
</html>
salesForceScript.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sales Force & Script</title>
</head>
<frameset rows="*" cols="277*,973*" framespacing="0" frameborder="no" border="0">
<frame src="script.html" name="leftFrame" id="leftFrame" title="leftFrame" />
<frame src="salesForce.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>

An image for outlook and another image for others

I have this code for html email (for example)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
</head>
<body>
<span>Email content</span>
<!--[if mso]>
<img src="НТТР://site.com/image_for_outlook.jpg">
<![endif]-->
<!--[if !mso]><!-->
<img src="НТТР://site.com/image_not_for_outlook.gif">
<!--<![endif]-->
<span>Email content</span>
</body>
</html>
How to hide gif animation in Outlook?
There is many information for this but it's not work between "body" tags.

How can I solve this clear off inconsistency in Firefox and IE7?

When I am clearing an element in Firefox4,it goes to the next line leaving some spacing in between and in IE7, it goes to the next line without leaving any space..
<!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>Untitled Document</title>
<style type="text/css">
#a{border:#000 thin groove;float:left;}
#b{border:#000 thin groove;float:left;clear:left;}
</style>
</head>
<body>
<p id="a">Testing</p>
<p id="b">Testingb</p>
</body>
</html>
Most browsers now have a default margin-top and margin-bottom greater than zero for p elements. Internet Explorer doesn't.
Adding p { margin: 0; } to your styles will fix it.

unwanted space before and after nested html table using Internet Explorer 8

I have an html table nested in an html table cell. I want the nested table to use the full size of the cell it is nested in. When I use firefox or google chrome I get the result I want but when I use Internet Explorer 8 (even if I use td style="height="100%") the height of the nested cell depends on it's content. As a result I get whitespace before and after my nested table. Here is a simple html that will reproduce the problem.
<!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>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html, table{
height: 100%;
width: 100%;
margin:0;
padding:0;
}
table, td, th {border:#000 medium solid}
</style>
<body>
<table>
<tr>
<th style="margin:0;padding:0;height:100;">
<table><tr><th style="height:100%">nested cell</th></tr></table>
</th>
</tr>
</table>
</body>
</html>
Here is your problem, you have specified <th style="margin:0;padding:0;height:100;"> in inline CSS style for you th inside your main table.
This should solve you problem, try using height:100%; instead.
EDIT:
To get rid of you extra space that requires in IE8 to scroll down you page, you can remove you border and add cellpadding="0" cellspacing="0" to you main table.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
body, html, table{
height: 100%;
width: 100%;
margin:0px;
padding:0px;
}
</style>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<th style="margin:0px;padding:0px;height:100%;">
<table><tr><th>nested cell</th></tr></table>
</th>
</tr>
</table>
</body>
</html>
Using attached code worked for me for both IE and FF but had to remove the borders as they are handled differently by IE and FF
<!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>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html, table{
height: 100%;
width: 100%;
margin:0;
padding:0;
}
table{border:#000 0px solid}
</style>
<body>
<table style="background:#063" cellpadding="0" cellspacing="0" border="0">
<tr>
<th style="margin:0;padding:0;height:100%;">
<table style="background:#0FF;" cellpadding="0" cellspacing="0" border="0"><tr><th style="height:100%">nested cell</th></tr></table>
</th>
</tr>
</table>
</body>
</html>
In your <th>, you have "height:100;" instead of "height:100%;" - missing the "%"
<th style="margin:0;padding:0;height:100%;">
instead of
<th style="margin:0;padding:0;height:100;">
try just adding th{height:100%} to your css style

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>