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>→</span> <input type="text" name="nombre"></label>
<label for="email">Email <span>→</span> <input type="text" name="email"></label>
<label for="asunto">Asunto <span>→</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.