I've pasted a simple full test case below. In Firefox, you'll see these line up just fine. In IE, though (at least v6 I'm using), the input box is one pixel down. Can anyone tell me why and how to get it back aligned top?
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><body>
<style>
*{margin:0px;padding:0px;border-collapse:collapse;}
</style>
<form>
<DIV style="WIDTH: 200px; WHITE-SPACE: nowrap">
<INPUT style="border: 1px solid blue; VERTICAL-ALIGN: top; WIDTH: 181px"><IMG
style="VERTICAL-ALIGN: top; border: 1px solid blue; WIDTH: 19px; HEIGHT: 1em" src=http://www.webdeveloper.com/forum/archive/index.php/"http://localhost/img/bg1pixL.jpg" />
</DIV>
</form>
</body></html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><body>
<style>
* {margin:0px;padding:0px;border-collapse:collapse;}
</style>
<form>
<div style="width: 200px; white-space: nowrap;line-height:100%;">
<input style=" border: 1px solid blue;margin:0; vertical-align: middle; width: 181px;">
<img style="vertical-align: middle; border: 1px solid blue; width: 19px; height: 1em" src=http://www.webdeveloper.com/forum/archive/index.php/"http://localhost/img/bg1pixL.jpg" />
</div>
</form>
</body>
</html>Any reason wrapping the input box with div?
Kiat Hau,
<!-- m --><a class="postlink" href="http://webidiot.blogspot.com">http://webidiot.blogspot.com</a><!-- m -->, Let's build your web site
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><body>
<style>
*{margin:0px;padding:0px;border-collapse:collapse;}
</style>
<form>
<DIV style="WIDTH: 200px; WHITE-SPACE: nowrap">
<INPUT style="border: 1px solid blue; VERTICAL-ALIGN: top; WIDTH: 181px"><IMG
style="VERTICAL-ALIGN: top; border: 1px solid blue; WIDTH: 19px; HEIGHT: 1em" src=http://www.webdeveloper.com/forum/archive/index.php/"http://localhost/img/bg1pixL.jpg" />
</DIV>
</form>
</body></html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><body>
<style>
* {margin:0px;padding:0px;border-collapse:collapse;}
</style>
<form>
<div style="width: 200px; white-space: nowrap;line-height:100%;">
<input style=" border: 1px solid blue;margin:0; vertical-align: middle; width: 181px;">
<img style="vertical-align: middle; border: 1px solid blue; width: 19px; height: 1em" src=http://www.webdeveloper.com/forum/archive/index.php/"http://localhost/img/bg1pixL.jpg" />
</div>
</form>
</body>
</html>Any reason wrapping the input box with div?
Kiat Hau,
<!-- m --><a class="postlink" href="http://webidiot.blogspot.com">http://webidiot.blogspot.com</a><!-- m -->, Let's build your web site