Problema CSS position absolute fieldeset en Opera

josueochoa · #1 (**permalink**) 26/11/2010, 09:26

Hola estoy haciendo un formulario de contacto con una flechita que esta con position absolute y me funciona perfectamente en firefox, chrome, safari y en ie9 pero en Opera es otra historia les dejo mi codigo:

el HTML

Código HTML:

<!DOCTYPE html>
<html>
<head>
<title>Contactanos</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="contenedor">
	<form method="POST" action="enviar.php">
	<fieldset>
		<span class="flechita" style=""></span>
		<legend>Contactanos</legend>
		<label for="nombre">Nombre <span>&rarr;</span> <input type="text" name="nombre"></label>
		<label for="email">Email <span>&rarr;</span> <input type="text" name="email"></label>
		<label for="asunto">Asunto <span>&rarr;</span> <input type="text" name="asunto"></label>
		<textarea name="mensaje" rows="5"></textarea>
		<input type="submit" value="Enviar"><input type="reset" value="Cancelar">
	</fieldset>
	</form>
</div>
</body>
</html>

y el CSS:

Código HTML:

*{
margin:0;
padding:0;
outline:0;
font:14px Helvetica, Arial, sans-serif;
}
#contenedor{
margin:25px auto 0;
width:450px;
}
form{
position:relative;
}
legend{
color:#BABABA;
font-size:24px;
background-color:#FFFFFF;
border:1px solid #E8E8E8;
padding:5px 15px;
}
fieldset{
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
background:none repeat scroll 0 0 #F9F9F9;
border:1px solid #E8E8E8;
padding:25px;
}
fieldset label{
display:block;
color:#878787;
font-size:16px;
margin-bottom:25px;
}
fieldset label span{
color:#D2414B;
margin-left:10px;
}
fieldset input[type="text"]{
float:right;
width:55%;
}
fieldset textarea{
width:97%;
margin-bottom:25px;
}
input, textarea{
padding:5px;
color:gray;
-moz-border-radius:3px 3px 3px 3px;
-webkit-border-radius:3px 3px 3px 3px;
border-radius:3px 3px 3px 3px;
border:1px solid #EAEAEA;
padding:5px;
background-color:white;
}
input:focus, textarea:focus{
-moz-box-shadow:0 0 5px #A9CAFF;
-webkit-box-shadow:0 0 5px #A9CAFF;
box-shadow:0 0 5px #A9CAFF;
border:1px solid #A9CAFF;
}
input[type="reset"]{
float:right;
}
input[type="submit"], input[type="reset"]{
background:none repeat scroll 0 0 #474747;
color:#EDEDED;
padding:8px 25px;
}
.flechita{
border-bottom:20px solid #EBEBEB;
border-left:10px solid transparent;
height:0;
left:16px;
line-height:0;
position:absolute;
top:0;
width:0;
}

Lo tengo subido a mi host por si lo quieren ver en vivo

http://www.creativehacks.com/demo/contactenos/

El problema solo lo van a ver en Opera.