Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title><style>
#srchfld {
font-size:2.25em;
}
</style>
</head>
<body>
<div id="search" style="position: absolute; left: 30px; top: 105px; border: 1px solid #FF0000; padding:0; margin: 0;">
<form method="get" action="search.asp" style="padding:0; margin: 0;">
<div id="form" style="padding:0; margin: 0;"><input type="text" id="srchfld" value=" Search website " onfocus="javascript: document.getElementById('srchfld').value=' ';" /></form></div></div>
</body>
</html>
If you view this in IE, the text input box has 1 pixel of padding above and below it but not on the sides - you can see it between the red border and the text box. On Firefox there is no padding here. I want this gone if possible. Am I missing something?
you should bear in mind that different browsers have different ideas when it comes to styling form elements.
This means that you often have to make compensations in this area.
Have a look at this example, which addresses your problem to a certain extent...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">
#search {
position:absolute;
left:30px;
top:105px;
border:1px solid #f00;
}
#search form {
padding:0;
margin:0;
}
#srchfld {
font-size:2.25em;
border:2px solid #666;
}
</style><!--[if IE]>
<style type="text/css">
#search {
background-color:#666;
}
#srchfld {
border-top:1px solid #666;
border-right:2px solid #666;
border-bottom:1px solid #666;
border-left:2px solid #666;
</style>
<![endif]--><script type="text/javascript">
window.onload=function() {
document.getElementById('srchfld').onfocus=function(){
this.value='';
}
}
</script></head>
<body><div id="search">
<form action="search.asp" method="get">
<div>
<input id="srchfld" type="text" value=" Search website ">
</div>
</form>
</div></body>
</html>
Thanks again. PS - IE stinks
...that just hides the issue, it doesn't fix it.
There is no fix.
As I said in my previous post the rendering of form elements varies from browser to browser.
birdbrain
IE stinks
From a standards perspective there is a lot of freedom for browsers in how to render forms, buttons etc. Trying to gain full control is going to make your life miserable.
Try Safari ... it's got it's own (or apple's) idea of a user interface.
