I'm having some trouble with using an iframe. So basically I was trying to create a slideshow, with one of the slides being an embedded video, so I did this by using an iframe. Well, the slideshow functions properly, and the video is resized properly, but when the image slides come up, they aren't being enlarged to the size of the iframe like the video is, and they seem to have a padding of 2 or 3px around the top/left sides. I've attached the HTML and CSS code, and took some pictures to illustrate what I'm trying to say and if anyone see's the problem, I'd really appreciate some help. Thanks so much!
CSS CODE
#imageDiv {
border: 5px solid black;
width:500px;
}
#slideshowImg {
width:500px;
height:300px;
margin:0px;
border-spacing:20px;
}
#mediaMenu table {
font-size:14px;
border:0;
margin-top:5px;
border-spacing:0;
}
table {
margin:0;
padding:0;
border-spacing:0
}
#mediaMenu td {
margin:0px;
padding:0px;
width:120px;
height:20px;
color:#CBE8E8;
}
.subMenu img {
width:100%;
height:100px;
}
.subTitle {
font-family:chalkboard, sans-serif;
background-color:#000;
font-size:12px;
}
.subTitle a {
color:#CBE8E8;
text-decoration:none;
}
HTML 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> ******* </title>
<link rel="stylesheet" type="text/css" href="" />
<script language="javascript" type="text/javascript">
slideshowImages = new Array(5);
slideshowImages[0] = new Image();
slideshowImages[0].src = 'images/tebowFinal.jpg';
slideshowImages[1] = new Image();
slideshowImages[1].src = 'images/nash.jpg';
slideshowImages[2] = new Image();
slideshowImages[2].src = 'images/kobe.jpg';
slideshowImages[3] = new Image();
slideshowImages[3].src = 'http://www.youtube.com/embed/9UlmwcEIWUw';
slideshowImages[4] = new Image();
slideshowImages[4].src = 'images/tbrown.jpg';
index=0;
function slideShow(source)
{
document.getElementById('slideshowImg').src = slideshowImages[source].src;
clearInterval(newPic);
index=source;
imageChange();
if (source=="3")
{
onclick=clearInterval(newPic);
}
}
function slideshowForward()
{
// increase the value of index by one or reset the value to 0 if all the slides have been cycled
index++;
if(index >= 5)
{
index=0;
}
// set the image name to the slide show image
document.getElementById('slideshowImg').src = slideshowImages[index].src;
}
function imageChange() {
newPic=setInterval(function(){slideshowForward() },5000);
}
</script>
<link href="slideshow.css" rel="stylesheet" type="text/css" />
</head>
<body onload="imageChange()">
<div id="imageDiv">
<table id="mediaMenu">
<tr>
<td id="imageRow" colspan="5" >
<a href="#" onclick="clearInterval(newPic)">
<iframe id="slideshowImg" src="images/tebowFinalFinal.jpg" frameborder="0" scrolling="no" ></iframe>
</a>
</td>
</tr>
<tr>
<td class="subMenu">
<a href="#" onclick="slideShow(0)">
<table>
<tr> <td class="subTitle"> Tebow Talks </td></tr>
<tr><td><img src="images/tebow.jpg" alt="Tim Tebow"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(1)">
<table>
<tr> <td class="subTitle">Nash attack </td></tr>
<tr><td><img src="images/nash.jpg" alt="Steve Nash"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(2)">
<table>
<tr> <td class="subTitle">Kobe Who? </td></tr>
<tr><td><img src="images/kobe.jpg" alt="Kobe Bryant"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(3)">
<table>
<tr> <td class="subTitle">Not So Giant </td></tr>
<tr><td><img src="images/giants.jpg" alt="San Francisco Giants"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(4)">
<table>
<tr> <td class="subTitle">Expensive mistake </td></tr>
<tr><td><img src="images/tbrown.jpg" alt="Terrell Brown"></img></td></tr>
</table>
</a>
</td>
</tr>
</table>
</div>
</body>
</html>
Related
I try to create a A4 page with 4 parts.
There is a white separator between the 2 first squares and the it breaks the page at square 3.
And quite strange the image does not appear in square 3!
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Header and Footer example</title>
<style type="text/css">
#page {
margin: 0;
}
.pages {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.dis-inl-blc {
display:inline-block;
vertical-align:top;
}
.page-break {
page-break-after: always;
}
.center {
text-align:center;
}
.bg-red {
background:red;
}
.bg-green {
background:green;
}
</style>
</head>
<body>
<div class="pages page-break">
<div class="dis-inl-blc center bg-red" style="margin-left:-0.03in;width:50%;height:50%;padding-top:5%;">
<img src="'.$image2Base64.'" style="height:2.5in"><br>Square 1
</div>
<div class="dis-inl-blc center bg-green" style="margin-right:-0.03in;width:50%;height:50%;padding-top:5%;">
<img src="'.$image2Base64.'" style="height:2.5in"><br>Square 2
</div>
<div class="dis-inl-blc center bg-green" style="margin-left:-0.03in;width:50%;height:50%;padding-top:5%;">
<img src="'.$image2Base64.'" style="height:2.5in"><br>Square 3
</div>
<div class="dis-inl-blc center bg-red" style="margin-right:-0.03in;width:50%;height:50%;padding-top:5%;">
<img src="'.$image2Base64.'" style="height:2.5in"><br>Square 4
</div>
</div>
</body>
</html>
The PHP part is quite basic:
$options = new \Dompdf\Options();
$options->set('isRemoteEnabled', true);
$options->set('isPhpEnabled', true);
$dompdf = new \Dompdf\Dompdf($options);
$dompdf->set_option('dpi', 300);
$dompdf->set_paper('A4', 'portrait');
$dompdf->load_html($html);
$dompdf->render();
$output = $dompdf->output();
file_put_contents('test.pdf', $output);
NOTE
I also tried with tables but with same issue.
<table class="bg-red" style="width:100%;line-height:0;" cellspacing="0" cellpadding="0">
<tr>
<td class="bg-grey" style="width:50%;height:50%;line-height:0;">Square 1</td>
<td class="bg-green" style="width:50%;height:50%;line-height:0;">Square 2</td>
</tr>
<tr>
<td class="bg-green" style="width:50%;height:50%;line-height:0;">Square 3</td>
<td class="bg-grey" style="width:50%;height:50%;line-height:0;">Square 4</td>
</tr>
</table>
[![enter image description here][1]][1]
[![enter image description here][2]][2]
[1]: https://i.stack.imgur.com/AIqek.png
[2]: https://i.stack.imgur.com/VFpMs.png
I'm a newbie learning the ways of html/css via online tutorials. Only now I've run into a little problem that I can't quite figure out, and I've tried suggestions to similar issues from this very site and more.
As the title says, my external css file just does not seem to work at all, though said code works fine if I apply it internally. I keep rereading the code trying to spot mistakes, but even css lint and codepen just seem to say I have overqualified elements, and not much else. I've tried just using the class names e.g. .Attack instead of td.Attack, but that didn't help.
The html is basically a table with some images, and I am only trying to apply a single stylesheet. Here is tcgdatabase.css
body {
background-color:transparent;
}
p {
color:#2E2435;
text-align:justify;
}
td {
text-align:left;
}
td.Name {
text-align:left;
width:250px;
font-size:30px;
font-weight:bold;
}
td.Type {
width:50px;
}
td.Stage {
text-align:left;
width:120px;
font-size:15px;
font-weight:bold;
}
td.HP,td.AP {
width:50px;
font-style:italic;
font-size:30px;
}
span.Points {
font-size:15px;
}
td.Attack,td.BaseDamage {
height:30px;
font-weight:bold;
font-size:20px;
}
td.Effect,td.Flavour {
text-align:justify;
}
td.WRR,td.WRRType {
height:20px;
font-weight:bold;
}
th {
text-align:center;
}
here is the html page, I even left the css in there enclosed with the to show how I added it internally:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>oddities</title>
<meta charset="UTF-8">
<link ref="stylesheet" type="text/css" href="file:///C:/Users/Admin/Documents/TCG/JBSet1/tcgdatabase.css">
<!--<style>
body {
background-color:transparent;
}
p {
color:#2E2435;
text-align:justify;
}
td {
text-align:left;
}
td.Name {
text-align:left;
width:250px;
font-size:30px;
font-weight:bold;
}
td.Type {
width:50px;
}
td.Stage {
text-align:left;
width:120px;
font-size:15px;
font-weight:bold;
}
td.HP,td.AP {
width:50px;
font-style:italic;
font-size:30px;
}
span.Points {
font-size:15px;
}
td.Attack,td.Base Damage {
height:30px;
font-weight:bold;
font-size:20px;
}
td.Effect,td.Flavour {
text-align:justify;
}
td.WRR,td.WRRType {
height:20px;
font-weight:bold;
}
th {
text-align:center;
}
</style>-->
</head>
<body>
<table style="width:100%">
<tr>
<td rowspan="9" style="width:420px"><img src="CacturneR.png" style="width:350px"></td>
<td class="Type"><img src="Energy Types/Dark.png" style="width:40px"></td>
<td class="Stage">Legendary</td>
<td class="Name">Yveltal</td>
<td class="HP">110<span class="Points">HP</span></td>
<td class="AP">0<span class="Points">AP</span></td>
</tr>
<tr>
<td class"AttackCost" colspan="2">
<img src="Energy Types/Dark.png" style="width:30px">
<img src="Energy Types/Colourless.png" style="width:30px">
</td>
<td class="Attack" colspan="2">Take In</td>
<td class="BaseDamage"><td>
</tr>
<tr>
<td class="Effect" colspan="5">
Attach up to 3 Pokémon from your hand to this Pokémon and heal 10 damage from this
Pokémon times the number of Pokémon cards just attached in this way. Each Pokémon attached
in this way provides 1 Energy of their type at a time (If they have more than 1 type,
they provide Energy of each of their types, but only 1 at a time).
</td>
</tr>
<tr>
<td class"AttackCost" colspan="2">
<img src="Energy Types/Dark.png" style="width:30px">
<img src="Energy Types/Dark.png" style="width:30px">
<img src="Energy Types/Colourless.png" style="width:30px">
<img src="Energy Types/Colourless.png" style="width:30px">
</td>
<td class="Attack" colspan="2">Riot Ballista</td>
<td class="BaseDamage"><td>
</tr>
<tr>
<td class="Effect" colspan="5">
Discard 1 card attached to this Pokémon. If that card is a Pokémon, this
attack does damage equal to the discarded Pokémon's HP. If it is not a
Pokémon, this attack does 50 damage and this Pokémon does 50 damage to
itself.
</td>
</tr>
<tr>
<td class="WRRType"><img src="Energy Types/Fairy.png" style="width:25px"></td>
<td class="WRR">weakness: x2</td>
<td class="Flavour" colspan="3" rowspan="3">
"This terrible beast has long since turned a blind eye to the havoc it
wreaks in its wake" - Anon.
</td>
<tr>
<td class="WRRType"><img src="Energy Types/Fighting.png" style="width:25px"></td>
<td class="WRR">resistance: -20</td>
</tr>
<tr>
<td class="WRRType"><img src="Energy Types/colourless.png" style="width:25px"></td>
<td class="WRR">retreat cost: x2</td>
</tr>
<tr>
<td class="Illus" colspan="3">Illus. NavaskaIII</td>
<td class="SetNumber">??/??</td>
<td class="Rarity">UR</td>
</tr>
</table>
</body>
</html>
I feel like I am missing something completely obvious, I really would appreciate the help!
In your link element change
ref="stylesheet" to rel="stylesheet"
notice the 'f' should be 'l'
Follow this syntax:
<link rel="stylesheet" href="style.css" type="text/css">
Path of css file has to be relative or absolute path..
Check your path to the CSS file. I would recommend using a relative path to the file.
Change href="file:///C:/Users/Admin/Documents/TCG/JBSet1/tcgdatabase.css" to something like href="/path/to/JBSet1/tcgdatabase.css".
If the CSS file is in the same folder as the HTML file, you can just use href="tcgdatabase.css".
Edit:
As stated above, also change ref="stylesheet" to rel="stylesheet".
I am looking for code to replace a specific image with one chosen from a list of potential images.
I have a list of images which I plan to have the images (or their label) clickable, and on that click I want to have one of the four images at the top of the page to change in to the clicked image. (Sorry for the run on sentence, I am really bad at explaining things.)
Let me know if I can provide any further information to clarify. Thanks in advance!
PS Here is the code I have so far:
<html>
<head>
<style type="text/css">
.row { vertical-align: top; height:auto !important; }
.list {display:none; }
.show {display: none; }
.hide:target + .show {display: inline; }
.hide:target {display: none; }
.hide:target ~ .list {display:inline; }
#media print { .hide, .show { display: none; } }
</style>
<script type="text/javascript">
function Down(sender)
{ var thisWidth=parseInt(sender.style.width.replace('px',''));
sender.style.width=(300) + 'px';}
function Up(sender)
{ var thisWidth=parseInt(sender.style.width.replace('px',''));
sender.style.width=(150) + 'px';}
</script>
<style>
a:link {color: #003300; font-weight: bold; font-size:18;}
a:visited {color: #003300; font-weight: bold; font-size:18;}
a:hover {color: #00FF00; font-weight: bold; font-size:18;}
a:active {color: #00CC00; font-weight: bold; font-size:18;}
table {width:99%; border: 2px solid black; background-color:white;}
td {border: 0px solid #ccc; vertical-align:center;}
img {border:2px solid #000; width:150px;}
#select1, #select2, #select3, #select4 {border:2px solid #000; width:300px;}
#name {text-align:right;}
#pic {text-align:left;}
</style>
</head>
<body>
<font size="5"><center><b>Here are the seed beads I currently have available. Click and hold an image to see a larger image.</b></center></font>
<table>
<tr>
<td>
<center><img id="select1" src="img/selectedIMG.jpg"/></center>
</td>
<td>
<center><img id="select2" src="img/selectedIMG2.jpg"/></center>
</td>
</tr>
</table><br>
<div class="Toho Seed Beads Size 15">
Toho Seed Beads Size 15 (+)
Toho Seed Beads Size 15 (-)
<div class="list">
<ul type="none">
<li>
<table>
<tr>
<td id="name">Silver Lined<br>Crystal Clear<br>Size 15</td>
<td id="pic"><img src="img/Toho_s15_SilverLinedCrystalClear.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
<td id="name">Transparent<br>Deep Sky Blue<br>Size 15</td>
<td id="pic"><img src="img/Toho_s15_TransparentDeepSkyBlue.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
<td id="name">Ceylon<br>Light Rose<br>Size 15</td>
<td id="pic"><img src="img/Toho_s15_CeylonLightRose.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
<td id="name">Opaque<br>Black<br>Size 15</td>
<td id="pic"><img src="img/Toho_s15_OpaqueBlack.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
</tr>
<tr><td colspan="8"><center>(Close)</center/></td></tr>
</table>
</li>
</ul>
</div>
</div>
</body>
</html>
Perhaps this example will be helpful? I see that you've tagged the question with HTML and CSS, but the best solution will involve JavaScript as well. You can see that inside the <script> tag below.
<!DOCTYPE html>
<html>
<head>
<!-- I prefer using jQuery. If you don't use it, it makes life easier :) -->
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<!-- this is wherever your images are actually displayed... -->
<img id="changing-images" src="first_image.png">
<!-- and this is whatever triggers the action. Note the IDs on these -->
<input type="button" id="changing-button" value="Change picture">
</body>
<script>
$(document).ready(function(){
image_names = ["first_image.png", "second_image.png", "third_image.png"];
number_of_images = image_names.length;
current_index = 0;
$("#changing-button").click(function(){
// take the mod so that we cycle around the array
current_index = (current_index+1)%number_of_images;
// catch the ID of the image area; update its "src" attribute
$("#changing-images").attr("src",image_names[current_index]);
});
});
</script>
</html>
$("a").on("click", function(e){
e.preventDefault();
var newImg = $(this).attr("href");
$(".foo").attr("src", newImg);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
image 1
image 2
image 3
</p>
<p>
<img class="foo" src="http://lorempixel.com/200/200/">
</p>
I'm getting white spaces at the top of my form and I believe I have tried everything but, it's still there. Can someone give some sugesstions at to how to get rid of the white space at the top? When I open the form in firefox it seems to be okay but, when I use IE I get white space. Also, it is a .cfm form. Thanks.
Here is my code.
<!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=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.body
{
margin-top:0px;
padding-top:0px;
}
.mytable1
{
border-collapse:collapse;
border-color:#000000;
border-style:solid;
border-width:2px;
}
.mytable1 th
{
border-color:#333333;
border-style:solid;
border-width:1px;
}
.mytable1 td
{
border-color:#333333;
border-style:solid;
border-width:1px;
}
.mytable1
{
border-collapse:collapse;
border-color:#000000;
border-style:solid;
border-width:2px;
}
</style>
</head>
<body lang=EN-US style='tab-interval:.5in'>
<div id=Section1>
<cfoutput>
<form name="reportform" action="UpdateFormStatus.cfm" method="post">
<input type="hidden" name="UserEmail" value="#search_review.UserEmail#">
<table class="mytable1">
<tr>
<td valign="top" class="blacktext" align="center" colspan="14"><strong>Review Form</strong></td>
</tr>
<tr>
<td valign="top" class="blacktext" colspan="4"><strong>Type:</strong> #form.Type# </td>
<td valign="top" class="blacktext" colspan="4"><strong>Number: </strong> #form.Number# </td>
</tr>
<cfif not search_results.RecordCount>
<tr>
<td class="blacktextbold" colspan="2"> No results match those criteria.</td>
<td align="left" colspan="1">Search Again</td>
</tr>
<cfelse>
<tr>
<td valign="top" colspan="3" class="blacktext"><strong>Name:</strong> #form.Name# </td>
<td valign="top" colspan="3" class="blacktext"><strong>Project Code: </strong> #form.ProjectCode# </td>
</tr>
</table>
</form>
</cfoutput>
</body>
</html>
You have put body in as a class
is should be:
body{
margin-top:0px;
padding-top:0px;
}
For an ID you use # for a class you use . and if you are going to target an object like a div you just put div
You should put the margin and padding from the html as well to 0 and remove the . from the body selector:
html, body
{
margin-top:0px;
padding-top:0px;
}
It looks like you're missing the closing tag for cfif. The browser is trying to fix your html and is putting this tag above the table. You also don't have a closing tag for the div with id="Section1". CFML is not the same as HTML btw. This will not render properly as HTML because of the Cold Fusion specific tags.
You didn't close the parent div. <div id="Section1"> Also, as #Andrew mentioned, you had body set as a class. (body {} instead of .body{}).
http://jsfiddle.net/fKMHe/
To remove the margin and padding from the form element just add this:
form
{
margin: 0px;
padding: 0px;
}
which is almost right on Chrome and firefox but the problem is the position of the submit button on IE if too right than the css. Please check the code and help as soon as possible.
HTML &CSS Code you can find on the link http://jsfiddle.net/7vUW6/
i saw your codings and fix the issues , you had some mistakes accroding to the input box not set the proper width.
Then the submit button is also i fix the issues and i check all the browers now alignment is correct.The edit coding as follows. please copy this code and run your system.
complete codings:
<!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>Customer Advance and Project Registration System | Ymoff Technologies Pvt. Ltd.</title>
<meta name="description" content="This is Project Registration and Customer Advance Payment Recept System designed and developed for Ymoff Technologies." />
<link type="text/css" rel="stylesheet" href="stylesheets/style.css" />
<link rel="shortcut icon" href="favicon.ico" />
<script src="js/jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#form1").validate();
});
</script>
<script type="text/javascript">
function clearThis(target){
target.value= "";
}
</script>
<script type="text/javascript">
function autoGrow (oField) {
if (oField.scrollHeight > oField.clientHeight) {
oField.style.height = oField.scrollHeight + "px";
}
}
</script>
<style>
/*-- Reset CSS --*/
.wraper{
width:70%;
margin: 0px auto;
padding:0;
}
#field {
}
#ftext{
font-family: 'Capriola', sans-serif;
}
#btext{
font-family: 'Quando', serif;
font-weight:400;
}
#space{
padding-left:5%;
}
.submit{
padding-left:54%;
padding-right:60%;
clear:both;
}
#value{
color:#999;
}
textarea {
resize: none;
}
#noscrollbars {
overflow:hidden;
}
#inform{
color:#C00;
font-size:12px;
text-align:justify;
}
select{
color:#00F;
}
textarea{
border-right: #a9a9a9 1px solid;
border-top: #a9a9a9 1px solid;
border-left: #a9a9a9 1px solid;
border-bottom: #a9a9a9 1px solid;
color:#00F;
}
#show1{
color:#10e684;
font-size:18px;
font-weight:600;
}
#show2{
color:#9e2a28;
font-size:18px;
font-weight:600;
}
#show3{
color:#9e2a28;
font-size:10px;
}
fieldset{
width:400px;
padding-top:5px;
}
legend{
font-family: "Quando", serif;
}
.umame
{
text-align:right;
float:left;
padding-bottom:5px;
padding-right:8px;
}
.umame1
{
text-align:left;
float:left;
padding:0px;
margin:0px;
padding-bottom:5px;
}
</style>
</head>
<body class="wraper">
<div>
<img src="images/dashboardlogin.png" style="padding-top:10px; padding-left:15%;" />
<br />
<br />
<div class="container">
<center>
<br /><br /><br />
<h2 id="btext">Please perfectly enter the following fields :</h2>
<form name="login" action="" method="post">
<fieldset>
<table width="337" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="169" class="umame">
<span id="ftext">Client Registration ID <span style="color:#C00;">*</span></span>
</td>
<td width="156" class="umame1">
<input type="text" name="userid" value="Cleint Registraion ID" style="color:#999; width:156px;" onfocus="if(this.value==this.defaultValue){this.value='';}this.style.color='#000';" onblur="if(this.value==''){this.value=this.defaultValue;this.style.color='#999';}" />
</td>
</tr>
<tr>
<td class="umame" width="169">
<span id="ftext">Temporary Password <span style="color:#C00;">*</span></span>
</td>
<td width="156" class="umame1">
<input type="password" name="password" value="***************" style="color:#999; width:156px;" onfocus="if(this.value==this.defaultValue){this.value='';}this.style.color='#000';" onblur="if(this.value==''){this.value=this.defaultValue;this.style.color='#999';}" />
</td>
</tr>
<tr>
<td class="umame" width="169"> </td>
<td width="156" class="umame1">
<input type="submit" name="ok" value="Login" />
</td>
</tr>
</table>
</fieldset>
</form>
<table width="337">
<tr>
<td ><span id="inform"><br />
* Marks fields are sent to you by E-Mail when your project has been registered with us. If any how if you lost our mail and want to get your Password, please visit this link Get Password with your YMOFF Registration ID. </span>
</td>
</tr>
</table>
</center>
</div>
</div>
</body>
</html>
If you want to center it, remove class="submit" and replace it with style="text-align: center;".
That will center the button in the row.
Also for IE, don't forget to specify a DOCTYPE declaration in your markup. Use this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">