vertical text centering of <input type="text">
hello, i'm trying to create a template for glype and i'm stuck...i need to vertically center the text where the URL of the visit site goes and i can't find a way of doing that without messing out my layout or something else....
HTML
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=utf-8">
<title><!--[site_name]--></title>
<meta name="description" content="<!--[meta_description]-->">
<meta name="keywords" content="<!--[meta_keywords]-->">
<link rel="stylesheet" type="text/css" href="themes/dorange/style.css" media="screen" />
<?php echo injectionJS(); /* Javascript for redirection direct to proxified pages */ ?>
<script type="text/javascript">
window.addDomReadyFunc(function() {
document.getElementById('options').style.display = 'none';
document.getElementById('input').focus();
});
disableOverride();
</script>
</head>
<body>
<table align="center" width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4" class="header"></td>
</tr>
<tr>
<td class="left-bar"></td>
<td valign="top"><div class="menu2"></div>
<div class="menu2-item">
ad
</div>
<div class="menu-last"></div>
<div class="menu"></div>
<div class="menu-item"><br>Link 1</div>
<div class="menu-item"><br>Link 2</div>
<div class="menu-last"></div>
</td>
<td valign="top"><div class="content-menu"></div>
<div class="content-center">
<table align="center" width="400" height="400">
<tr>
<td valign="top">
Content
<problem>
<form action="includes/process.php?action=update" method="post" onSubmit="return updateLocation(this);" class="form">
<table align="center" width="350" height="50">
<tr>
<td><input type="text" name="u" id="input" class="textbox" value="www.google.com"></td>
<td><input type="image" value="Visit" class="button" src="themes/dorange/images/button.jpg"></td>
</tr>
</table>
[<a style="cursor:pointer;" onClick="document.getElementById('options').style.display = (document.getElementById('options').style.display=='none'?'':'none')">options</a>]
<ul id="options">
<?php foreach ( $toShow as $option ) echo <<<HTML
<li>
<input type="checkbox" name="{$option['name']}" id="{$option['name']}"{$option['checked']}>
<label for="{$option['name']}" class="tooltip" onmouseover="tooltip('{$option['escaped_desc']}')" onmouseout="exit();">{$option['title']}</label>
</li>
HTML;
?>
</ul>
<br style="clear: both;">
</form>
</problem>
</td>
</tr>
</table>
</div>
<div class="content-last"></div>
</td>
<td class="right-bar"></td>
</tr>
</table>
<table align="center" width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="left-bar"></td>
<td valign="top"><div class="footer-menu"></div>
<div class="footer-center">
<table align="center" width="580">
<tr>
<td align="center">
© 2008 <a href="index.php"><!--[site_name]--></a> : Powered by <a href="http://www.glype.com/">glype</a> <!--[version]-->
</td>
</tr>
</table>
</div>
<div class="footer-last"></div>
</td>
<td class="right-bar"></td>
</tr>
<tr>
<td colspan="3" class="page-last"></td>
</tr>
</table>
</body>
</html>
CSS
Code:
@charset "utf-8";
/* CSS Document */
body {background-color: #000;}
.header {width:650px;
height:170px;
background-image:url(images/img_01.gif);
}
.left-bar {background-image:url(images/img_02.gif);
width:23px;
height:34px;
background-repeat:repeat-y;
}
.menu {background-image:url(images/img_03.gif);
background-repeat:no-repeat;
width:182px;
height:34px;
}
.menu-item {background-image: url(images/img_07.gif);
background-repeat:no-repeat;
width:182px;
height:46px;
text-indent:50px;
line-height:15px;
text-align:center;
}
.menu-last {background:url(images/img_13.gif);
background-repeat:no-repeat;
height:21px;
width:182px;
}
.menu2 {background-image:url(images/img_03_2.jpg);
background-repeat:no-repeat;
width:182px;
height:44px;
}
.menu2-item {background-image:url(images/img_10.jpg);
background-repeat: repeat-y;
width:182px;
height:630px;
text-align:center;
}
.content-menu {background-image:url(images/img_04.gif);
background-repeat: no-repeat;
width:423px;
height:51px;
}
.content-center {background:url(images/img_11.gif);
background-repeat:repeat-y;
height:770px;
vertical-align:top;
text-align:center;
}
.content-last {background:url(images/img_14.gif);
background-repeat:repeat-y;
height:21px;
}
.right-bar {background-image:url(images/img_05.gif);
width:22px;
height:34px;
background-repeat:repeat-y;
}
.footer-menu {background:url(images/img_15.gif);
height:50px;
width:605px;
}
.footer-center {background:url(images/img_16.jpg);
width:605px;
background-repeat:repeat-y;
height:200px;
}
.footer-last {background:url(images/img_19.jpg);
height:19px;
width:605px;
}
.page-last {background:url(images/img_18.jpg);
height:21px;
width:650px;
}
.form {
}
.textbox {height:48px;
width:298px;
background-image:url(images/bar.jpg);
border:0px;
background-repeat:no-repeat;
text-indent:10px;
}
.button {
}
#optionsF {
list-style-type: none;
width: 500px;
margin: 10px; padding: 0;
}
#optionsF li {
float: left;
width: 240px;
border-left: 5px solid #ccc;
}
The problem starts from the <form> tag, i even wrote <problem> tags for easier search....
This is the piece of the code that's bugging me
Code:
<problem>
<form action="includes/process.php?action=update" method="post" onSubmit="return updateLocation(this);" class="form">
<table align="center" width="350" height="50">
<tr>
<td><input type="text" name="u" id="input" class="textbox" value="www.google.com"></td>
<td><input type="image" value="Visit" class="button" src="themes/dorange/images/button.jpg"></td>
</tr>
</table>
[<a style="cursor:pointer;" onClick="document.getElementById('options').style.display = (document.getElementById('options').style.display=='none'?'':'none')">options</a>]
<ul id="options">
<?php foreach ( $toShow as $option ) echo <<<HTML
<li>
<input type="checkbox" name="{$option['name']}" id="{$option['name']}"{$option['checked']}>
<label for="{$option['name']}" class="tooltip" onmouseover="tooltip('{$option['escaped_desc']}')" onmouseout="exit();">{$option['title']}</label>
</li>
HTML;
?>
</ul>
<br style="clear: both;">
</form>
</problem>
input where class is textbox...i want the text to be centered vertically....:smash::smash::smash: i had no luck in doing that, well i did in Opera not in IE or FF...
padding moves everything around that's not the answer, it's probably cause of my poor HTML knowledge that it does that....:sorry::sorry:
anyway vertical-align is useless i don't know why it even exists...
is there anything else that i don't know about?
