Search box/field/text alignment

I'm a bit stuck with the alignment of my searchbox. Maybe it is best to visit my test website:
<snip>

I want to get the search text in the box, but there is a difference between Firefox and IE...

CSS is this.

/* 
Theme Name: 
Theme URI: 
Author: 
Author URI: 
Description: 
*/



/* MAIN */

body {
background:#fff;
text-align: left;
margin: 0;
padding: 0;
line-height: 1.5em;
color:#000;
font-size:9pt;
font-family:arial,helvetica,sans-serif;
}

#wrap {
clear: both;
margin: 0 auto;
padding:10px;
width:960px;
background:#fff;
}

#header {
margin: 0 auto;
padding:0;
}

#head-content {
background:url(images/headbg.gif) top left no-repeat;
padding:0 10px;
margin:0 auto;
height:110px;
}

#sitetitle {
width:460px;
float:left;
margin:0;
padding:0;
}

#page {
clear: both;
margin: 0 auto;
padding: 10px 0;
} 


#footer {
background:#eee;
padding:20px 0;
clear: both;
margin: 0 auto;
font-size:8pt;
border-bottom:5px solid #000;
border-top:1px solid #ddd;
}

#footer .limit {
padding: 0;
margin:0 auto;
width:960px;
}

.genset:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.genset {display: inline-block;}

/* Hides from IE-mac \*/
* html .genset {height: 1%;}
.genset {display: block;}
/* End hide from IE-mac */

/* HEADER */

h1, h2, h3, h4, h5, h6, h7 {
line-height: 1.2em;
letter-spacing:-1px;
margin: 0;
padding: 0;
text-align: left;
}

h1 {
font-size: 18pt;
margin: 0;
}

h2 {
font-size: 16pt;
}

h3 {
font-size: 14pt;
}

h4,h5,h6,h7 {
font-size: 12pt;
letter-spacing:0px;
}

.entry h1,.entry h2,.entry h3, .entry h4, .entry h5, .entry h6, .entry h7 {
margin-bottom: 10px;
}

h3#comments, h3#respond, h3#trackbacks {
font-size:16pt;
margin: 0 0 10px;
}

h3#postinfo, h3#comments, h3#respond, h3#trackbacks, #respond h3 {
font-size:14pt;
margin: 0 0 10px;
}

h3#comments {
margin: 0 0 5px;
}

h1.archive-title {
padding: 5px 10px;
border:1px solid #ddd;
border-bottom:0;
background:#eee;
}

/* LINKS */

a, a:link, a:visited {
text-decoration:none;
color:#003366;
}

a:hover, a:active {
text-decoration:none;
color:#000000;
}

.post h1 a, .post h2 a, .post h1 a:link, .post h2 a:link, .post h1 a:visited, .post h2 a:visited, .feature-entry h2 a {
background:transparent;
}

.post h1 a:active, .post h1 a:hover, .post h2 a:active, .post h2 a:hover {
background:transparent;
}

a.more-link, a.more-link:link, a.more-link:visited {
background: url(images/arrow-off.gif) 100% 70% no-repeat;
padding-right:12px; 
 }

a.more-link:hover, a.more-link:active {
background: url(images/arrow-on.gif) 100% 70% no-repeat;
padding-right:12px; 
}

#footer a, #footer a:link, #footer a:visited {
}

#footer a:hover, #footer a:active {
}


/* PAGE NAV */

#topnav {
background: #464646;
font-size:10pt;
padding: 0;
margin: 0 auto;
border-top:5px solid #000;
border-bottom:1px solid #ddd;
}

#topnav .limit {
width:960px;
margin:0 auto;
padding:0;
}

#topnav ul {
width:690px;
list-style: none;
padding: 15px 0 0;
margin: 0 auto;
float:left;
}

#topnav a, #topnav a:link, #topnav a:visited {
display: block;
text-decoration: none;
padding: 3px 10px;
margin:0;
color:#fff;
}

#topnav a:hover, #topnav a:active {
background:#f5f5f5;
}

#topnav li {
float: left;
padding: 0;
}

#topnav li#search {
float: right;
padding: 0;
margin:0;
}

#topnav li ul {
z-index:9999;
position: absolute;
left: -999em;
height: auto;
width: 180px;
margin: 0;
padding:0;
background:#eee;
border-top:1px solid #ddd;
}

#topnav li li {
border-bottom:1px solid #ddd;
}

#topnav li ul a, #topnav li ul a:link, #topnav li ul a:visited { 
width:160px;
}

#topnav li ul a:hover, #topnav li ul a:active { }

#topnav li ul ul {
border:0;
margin: -24px 0 0 180px;
}

#topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li.sfhover ul ul, #topnav li.sfhover ul ul ul {
left: -999em;
}

#topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul, #topnav li.sfhover ul, #topnav li li.sfhover ul, #topnav li li li.sfhover ul {
left: auto;
}

#topnav li:hover, #topnav li.sfhover { 
position: static;
}


/* SEARCH */

#topsearch {
text-align:right;
float:right;
padding: 0;
margin:0;
width:260px;
}

#searchform {
text-align:right;
float:right;
padding:0;
margin:0;
}

#searchform #searchfield {
float:left;
padding:0;
width:160px;
margin: 0;
height:45px;
border: none;
background: url(images/searchbg.gif) no-repeat;
color: #fff;
}

#searchform #submitbutton {
margin: 0 0 0 1px;
float:left;
width:50px;
height:45px;
text-align:center;
border:0;

background: transparent url(images/searchbut.gif) top left no-repeat;
}



/* CATEGORY */

#nav {
font-size:8pt;
padding: 0;
margin: 0;
background: #fff;
border-top:1px solid #ddd;
border-bottom:3px solid #000;
}

#nav ul {
list-style: none;
padding: 0;
margin: 0 auto;
}

#nav a, #nav a:link, #nav a:visited {
display: block;
text-decoration: none;
padding: 5px 8px;
border-right:1px solid #ddd;
}

#nav a:hover, #nav a:active {
background:#f5f5f5;
}

#nav li {
float: left;
padding: 0;
}

#nav li ul {
border-top:0;
z-index:9999;
position: absolute;
left: -999em;
height: auto;
width: 180px;
margin: 0;
padding:0;
background:#eee;
border-top:3px solid #000;
}

#nav li li {
border-bottom:1px solid #ddd;
}

#nav li ul a, #nav li ul a:link, #nav li ul a:visited {
border:0;
width:164px;
}

#nav li ul a:hover, #nav li ul a:active {
background: #f5f5f5; 
}

#nav li ul ul {
border-top:0;
margin: -28px 0 0 160px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover { 
position: static;
}

HTML is this

<!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 profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title> Beta</title>

<meta name="description" content="Just another WordPress weblog" />

<link rel="stylesheet" href="http://beta.example.com/test/wp-content/themes/secure/style.css" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="Beta RSS Feed" href="http://beta.vacau.com/test/?feed=rss2" />

<link rel="pingback" href="http://beta.example.com/test/xmlrpc.php" />


<script type="text/javascript" src="http://beta.example.com/test/wp-content/themes/secure/js/suckerfish.js"></script>

<meta name='robots' content='noindex,nofollow' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://beta.example.com/test/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://beta.example.com/test/wp-includes/wlwmanifest.xml" /> 
<link rel='index' title='Beta' href='http://beta.example.com/test' />
<meta name="generator" content="WordPress 2.9.1" />
<link href="http://beta.example.com/test/wp-content/themes/secure/style.php" rel="stylesheet" type="text/css" />


</head>

<body>

<div id="topnav" class="genset">
<div class="limit">
<ul class="genset">
<li class="first"><a rel="bookmark" title="Home" href="http://beta.example.com/test">Home</a></li>
</ul>
<div id="topsearch" class="genset">
<form id="searchform" method="get" action="http://beta.example.com/test/" ><input type="text" value="search" onfocus="if (this.value == 'search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'search';}" size="18" maxlength="50" name="s" id="searchfield" /><input type="image" src="http://beta.example.com/test/wp-content/themes/secure/images/blank.gif" id="submitbutton" alt="go" /></form>
</div>

</div>
</div>

<div id="wrap">

<div id="header" class="genset">

<div id="head-content" class="genset">

<div id="sitetitle">
<h1>Beta</h1> 
<div class="description">Just another WordPress weblog</div>

</div>

</div>

</div>

Hope someone can help me out.

Thanks
Jim

[edited by: limbo at 9:50 am (utc) on Feb 9, 2010]
[edit reason] No URL's please, see TOS [webmasterworld.com] [/edit]

Search box/field/text alignment

Jim123

limbo

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week