Hi,
How come on the code below in the searchoptions div in firefox the span searchopt is right at the top of the div but in IE the span has a small gap about 3px or so?
I need it so it aligns right to the top of the searchoptions div?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#search {
position:absolute;
top:122px;
height:28px;
width:426px;
margin-left:175px;
z-index:600;
}
#searchtick {
width:20px;
right:0;
}
#searchoptions {
border:1px solid #000;
width:335px;
margin-left:65px;
height:19px;
text-align:center;
}
.searchopt, .searchopt a, .searchopt a:visited {
border:1px solid #000;
color:#21536A;
font: small Verdana,sans-serif;
font-size:11px;
text-decoration:none;
}
.searchtext {
color:#21536A;
font: small Verdana,sans-serif;
font-size:13px;
text-decoration:none;
font-weight:bold;
}
.searchtextbox {
width:200px;
margin-top:4px;
color:#666666;
font: small Verdana,sans-serif;
font-size:12px;
text-decoration:none;
}
.searchselectbox {
margin-top:4px;
margin-left: 5px;
color:#666666;
font: small Verdana,sans-serif;
font-size:12px;
text-decoration:none;
}
.searchtick {
margin-top:4px;
right:0px;
}
</style>
</head>
<body>
<div id='search'>
<form method='post' name='login' action=''>
<table width='100%' border='0' cellspacing='0' cellpadding='0' height='28'>
<tr>
<td>
<span class='searchtext'>Search: -</span>
<input name='search' type='text' maxlength='100' class='searchtextbox'>
<select name='searchselect' class='searchselectbox'>
<option value='Torrents'>Torrents</option>
<option value='Online Games'>Online Games</option>
<option value='Mobile Fun'>Mobile Fun</option>
<option value='Forum'>Forum</option>
</select>
</td>
<td><input type='image' src='http://www.webdeveloper.com/forum/archive/index.php/images/common/tick.jpg' class='searchtick'></td>
</tr>
</table>
</form>
<div id='searchoptions'>
<span class='searchopt'><a href='' class='searchopt'>Advance Search</a> - <a href='' class='searchopt'>Index</a> - <a href='' class='searchopt'>Preferences</a> - <a href='' class='searchopt'>Program</a></span>
</div>
</div>
</body>
</html>
Any ideas
Thanks
k0r54The vertical-align:top; and less code; the searchopt class is not needed:
#searchoptions a, #searchoptions a:visited {
border:1px solid #000;
color:#21536A;
font: small Verdana,sans-serif;
font-size:11px;
text-decoration:none;
vertical-align:top;
}
<div id='searchoptions'>
<a href=''>Advance Search</a> - <a href=''>Index</a> - <a href=''>Preferences</a> - <a href=''>Program</a>
</div>ok,
The that works, but i am using spans and things elsewhere aswell, why is it doin it, is there a setting.
Thanks
k0r54Need to see the code and where the problem occurs.
How come on the code below in the searchoptions div in firefox the span searchopt is right at the top of the div but in IE the span has a small gap about 3px or so?
I need it so it aligns right to the top of the searchoptions div?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#search {
position:absolute;
top:122px;
height:28px;
width:426px;
margin-left:175px;
z-index:600;
}
#searchtick {
width:20px;
right:0;
}
#searchoptions {
border:1px solid #000;
width:335px;
margin-left:65px;
height:19px;
text-align:center;
}
.searchopt, .searchopt a, .searchopt a:visited {
border:1px solid #000;
color:#21536A;
font: small Verdana,sans-serif;
font-size:11px;
text-decoration:none;
}
.searchtext {
color:#21536A;
font: small Verdana,sans-serif;
font-size:13px;
text-decoration:none;
font-weight:bold;
}
.searchtextbox {
width:200px;
margin-top:4px;
color:#666666;
font: small Verdana,sans-serif;
font-size:12px;
text-decoration:none;
}
.searchselectbox {
margin-top:4px;
margin-left: 5px;
color:#666666;
font: small Verdana,sans-serif;
font-size:12px;
text-decoration:none;
}
.searchtick {
margin-top:4px;
right:0px;
}
</style>
</head>
<body>
<div id='search'>
<form method='post' name='login' action=''>
<table width='100%' border='0' cellspacing='0' cellpadding='0' height='28'>
<tr>
<td>
<span class='searchtext'>Search: -</span>
<input name='search' type='text' maxlength='100' class='searchtextbox'>
<select name='searchselect' class='searchselectbox'>
<option value='Torrents'>Torrents</option>
<option value='Online Games'>Online Games</option>
<option value='Mobile Fun'>Mobile Fun</option>
<option value='Forum'>Forum</option>
</select>
</td>
<td><input type='image' src='http://www.webdeveloper.com/forum/archive/index.php/images/common/tick.jpg' class='searchtick'></td>
</tr>
</table>
</form>
<div id='searchoptions'>
<span class='searchopt'><a href='' class='searchopt'>Advance Search</a> - <a href='' class='searchopt'>Index</a> - <a href='' class='searchopt'>Preferences</a> - <a href='' class='searchopt'>Program</a></span>
</div>
</div>
</body>
</html>
Any ideas
Thanks
k0r54The vertical-align:top; and less code; the searchopt class is not needed:
#searchoptions a, #searchoptions a:visited {
border:1px solid #000;
color:#21536A;
font: small Verdana,sans-serif;
font-size:11px;
text-decoration:none;
vertical-align:top;
}
<div id='searchoptions'>
<a href=''>Advance Search</a> - <a href=''>Index</a> - <a href=''>Preferences</a> - <a href=''>Program</a>
</div>ok,
The that works, but i am using spans and things elsewhere aswell, why is it doin it, is there a setting.
Thanks
k0r54Need to see the code and where the problem occurs.