CSS search form bugged in opera

Hey.

I have a problem with my css being displayed buggy in opera.
To be more clear you can look at the image I added in this thread.
I also added the CSS and HTML code which solved the same problem in Internet Explorer (At the bottom of the thread).

My CSS code:

/* Search */

#search {
	float: right;
	width: 250px;
	height: 25px;
}


#search-btn {
	width: 35px;
	height: 25px;
	text-indent: -9999px;
	float: left;
	border:none;
	background: url(images/search-button.png) no-repeat top left;
}

#search-box {
	background: url(images/search.png) no-repeat top left;
	width: 215px;
	height: 25px;
	float: right;
	border: none;
}

Code (markup):

My HTML code:

I had almost exactly the same problem in all Internet Explorers before version 8 which I solved via the following code.

CSS:

HTML:

I don't know how to solve this problem in Opera (as you can see on the image).


Thanks in advance!

Greetings dragongamer54

 

The following code should fix the issue for all browsers including IE. For that reason, you no longer will need your IE specific stylesheet. The only difference is that I added "padding: 0px;" to your inner divs.

/* Search */

#search {
	float: right;
	width: 250px;
	height: 25px;
}


#search-btn {
	width: 35px;
	height: 25px;
	text-indent: -9999px;
	float: left;
	border:none;
	padding: 0px;
	background: url(images/search-button.png) no-repeat top left;
}

#search-box {
	background: url(images/search.png) no-repeat top left;
	width: 215px;
	height: 25px;
	float: right;
	padding: 0px;
	border: none;
}

Code (markup):

 

Thank you very much! It solved the problem.

There is one other thing that is displaying incorrectly in Internet Explorer 6. This problem was solved via the same CSS file which I also used with my other CSS problem.
Is there a solution in which I don't need to use a ''special'' CSS file for this problem?

My CSS:

#menu a {
	height: 30px;
	margin-right: 10px;
	margin-top: 3px;
	display: inline-block;
	padding: 0px 0px 0px 0px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Vollkorn', arial, serif;
	font-size: 14px;
	font-weight: bold;
	color: #CCC;
	border: none;
}

Code (markup):

My CSS (for Internet Explorer 6):

#menu a {
	height: 30px;
	margin-right: 10px;
	padding-left: 10px;
	display: inline-block;
	padding: 10px 0px 0px 0px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Crimson Text', arial, serif;
	font-size: 14px;
	font-weight: bold;
	color: #CCC;
	border: none;
}

Code (markup):

An image says more than a thousand words as they speak so I also added a image which displays the problem.

 

#menu a {
	height: 30px;
	margin-right: 10px;
	padding-left: 10px;
	display: inline-block;
	padding: 10px 0px 0px 0px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Crimson Text', arial, serif;
	font-size: 14px;
	font-weight: bold;
	color: #CCC;
	border: none;
}

Code (markup):

First you define padding-left:10px then you override it with padding:10px 0px 0px 0px ... does not make sense.

Change padding:10px 0px 0px 0px to

padding:10px 0px 0px [COLOR="red"]10px[/COLOR];

Code (markup):

for example to shift it 10px to the right!

 

&%$%^& that was stupid!
Thanks for pointing it out!

Greetings dragongamer54

 

Don't worry... sometimes those errors happen