Opera :: Textbox cover problem

[firehydra2k]

Hey everyone,

I am currently designing a website for a client, and I've encountered one really annoying problem. Nothing's wrong with the code when I view the website in firefox or IE, but when I view the website in Opera, almost all but maybe a millimeter of the textbox is covered, making it inaccessible.

Is there a bug in Opera or is there something that can remedy this?


<div id="top">
<div id="top_banner">
<div id="top_logo"><a href="XXX"></a></div>
<div id="top_quickLink">
<div id="top_search">
<form action="">
<input id="top_search_button" name="search_button" type="image" src="image/search_button.jpg" value="Search" alt="Search">
<input id="top_search_field" name="search_field" type="text" value="" size="18" onMouseOver="this.id='top_search_field_hover'" onMouseOut="this.id='top_search_field'">
</form>
</div>
<div id="top_links"><a href="XXX">XXX A-Z</a> | <a href="XXX">Directory</a> | <span>Search</span></div>
</div>
</div> <!-- end top_banner -->
</div><!-- end top-->


/**
* Top Banner Area
*/

#top {
position: relative;
height: 43px;
width: 100%;
background-color: #000099;
}

#text_logo {
display: none;
}

#top_banner {
position: relative;
width: 768px;
height: 43px;
margin: 0 auto;
text-align: left;
}

#top_logo {
position: absolute;
top: 5px;
left: 0px;
width: 355px;
height: 44px;
display: block;
background: url('image/logo.jpg') no-repeat;
}

#top_logo a {
width: 100%;
height: 100%;
display: block;
}

#top_quickLink {
position: absolute;
top: 12px;
right: 1px;
height: 25px;
width: 50%;
margin: 0;
padding: 0;
display: inline;
}

#top_links {
position: relative;
top: 3px;
height: 15px;
margin: 0;
padding: 0;
text-align: right;
float: right;
}

#top_links, #top_links a, #top_links span {
font: normal 0.88em Verdana, Helvetica, sans-serif;
color: #EEEEEE;
text-decoration: none;
margin: 0;
padding: 0;
}

#top_search {
position: relative;
margin: 0;
padding: 0px 0px 0px 5px;
width: 130px;
height: 20px;
float: right;
}

#top_search_field, #top_search_field:hover, #top_search_field_hover {
color: #DDDDDD;
height: 1.15em;
width: 100px;
font: normal 0.9em Verdana, Arial, sans-serif;
border: 1px solid #BBBBBB;
padding: 0.1em 0em 0.1em 0.15em;
margin: 0;
text-align: left;
float: right;
z-index: 9999;
}

#top_search_field {
background-color: #000066;
}

#top_search_field:focus, #top_search_field_hover {
background-color: #000099;
}

#top_search_button {
margin: 0px 0px 0px 3px;
padding: 0px;
height: 18px;
width: 18px;
float: right;
}

(The prototype is somewhat top secret, so I Xed out some of the revealing information. Sorry about that).

Thanks!

[Wickham]

I'm guessing here because I haven't got Opera.

Your style for #top_search_field, #top_search_field:hover, #top_search_field_hover has height: 1.15em; I changed this to height: 40px; /*1.15em;*/ and the text box increased in height so maybe you need to state the height in px not in ems.