Aver expertos, una duda con input

[danneg]

resulta que este input es absoluto

Código CSS:

input {
 
position: absolute;
bottom: 10px;
left: 10px;
right; 10px;
 
width: auto;
 
display: block;
 
}
 

con ese codigo lo tengo, pero resulta que solo se ve asi con webkit, los demas navegadores lo alinean a las izquierda y con n width fijo y no relativo como yo quisiera

¿por que pasa esto?, ¿como puedo solucionarlo?

gracias de antemano...

[alexk]

position: absolute;? ok...

left: 10px;
right; 10px;

o izquierda o derecha, si es por el valor relativo del ancho con uno te vale, y cambiar auto por % con margin, u otras maneras (ya que no veo el resto de codigo implicado).

los demas navegadores lo alinean a las izquierda y con n width fijo

y por que no lo alineas a la izquierda y con width fijo?...

viendo los pocos px en que posicionas el absolute, supongo que lo tienes hasta abajo y que se vaya estirando segun la resolucion... me gustaria ver el resto del codigo HTML/CSS o ver la url mejor.... ya que no soy experto y me gusta ver jeje...

PD: ok hay expertos, pero adivinos nuse... huy si hay... bueno homer (kseso?) anda de vacaciones.

[danneg]

jaja

uy mi experto que me ha librado de varias

jaja

mira este link

http://e-music-de.webcindario.com/chat/index.php //el que contiene todo

http://e-music-de.webcindario.com/chat/chat.php //el frame de los mensajes

http://e-music-de.webcindario.com/chat/style.css // el estilo de los dos anteriores

y si el input cambia conforme la resolucion, mas bien el tamaño de la ventana

y quiero que este algo asi como ahora esta (ie no esta optimizado aun),

solo que no me gusta como se ve ahora, checa el codigo html y el css

[alexk]

bueno a los input text por ejemplo

Código:

#comment {
-moz-border-radius:5px 5px 5px 5px;
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #EEEEEE;
bottom:39px;
left:10px;
overflow:hidden;
padding:0 1px;
position:absolute;
right:10px;
}

y al input que lleva dentro

Código:

#comment input {
background:none repeat scroll 0 0 #FFFFFF;
border:medium none;
display:block;
font-size:16px;
height:20px;
padding:2px 0;
width:100%;
}

bueno si es que entendi... pero vamos... los input no les tienes puesto posicion... sino a los divs que los envuelven no?...
otra cosa hay un <table> puedes usar un li mejor...
me gustaria que me digas que quieres hacer jajaja que no entiendo mucho chao!

[danneg]

jaja

bueno, los imput al principio tenian el id del div que los contiene, pero como no se expandian decidi colocarlos como ahora

la tabla la puse asi solo por que se me antojo, casi nunca trabajo con tablas y desidi usarla esta ocacion, no lo se se ve igual que con la ul y sus hijitos

ya intente lo del 100% pero este se expande 20px mas de lo deseable, lo que quiero es quitar de mi codigo a los div y solo dejar los puros input

mira ahora entra ve como se ve en firefox y luego en safari u otro webkit y veras de lo que hablo

asi se ve en chrome que tiene webkti como motor, y quiero que asi se vea en todos lo navegadores

[alexk]

wow pues ni idea... la verda... pero se ve interesante aver si miro como hacerlo pero de otro modo...
---------------------------------------------------------
pues solo encontre la manera de hacerlo con divs... aver si te sirve chao!...
PD: solo cogi el codigo que me sirvio asi que le falta el css de las tablas y el :focus etc...

Código CSS:

*{margin:0;padding:0;}
body{background:#000;color:#DDD;font: 16px/18px helvetica, arial, sans-serif bold;overflow:hidden;padding:10px;}
#frame{position:absolute;top:10px;bottom:120px;left:10px;right:10px;border:2px solid #555;overflow:hidden;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.contenido{bottom:10px;left:10px;overflow:hidden;position:absolute;right:10px;}
.coment_txt{margin:10px 10px 10px 0;}
#comment{border:1px solid #EEE;background:#FFF;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;height:20px;display:block;padding:2px 4px;font-size:16px;width:100%;}
.inp_btn{float:right;width:100px;}
.inp_txt{margin-right:100px;padding-right:10px;}
#nickname{border:1px solid #777;background:#FFF;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:2px 0;width:100%;}
#submit{border: 2px solid #777;font-weight:bold;background:#888;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;width:100px;}
 

Código HTML:

<div id="frame"><iframe src="http://e-music-de.webcindario.com/chat/chat.php" frameborder="no" width="100%" height="100%"></iframe></div>
<div class="contenido">
    <table>
        <tbody>
            <tr>
                <td><a class="width_auto" href="javascript:zumbido(3);" title="Zumbido" style="font-weight:bold;">((zumbido))</a></td>
                <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e1.gif" alt="" onclick="javascript:emoticon('(H)');" /></td>
                <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e2.gif" alt="" onclick="javascript:emoticon(':S');" /></td>
                <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e3.gif" alt="" onclick="javascript:emoticon(':\'(');" /></td>
                <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e4.gif" alt="" onclick="javascript:emoticon(':|');" /></td>
                <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e5.gif" alt="" onclick="javascript:emoticon(':(');" /></td>
                <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e6.gif" alt="" onclick="javascript:emoticon(':)');" /></td>
                <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e7.gif" alt="" onclick="javascript:emoticon(':D');" /></td>
                <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e8.gif" alt="" onclick="javascript:emoticon(':O');" /></td>
                <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e9.gif" alt="" onclick="javascript:emoticon(':P');" /></td>
                <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e10.gif" alt="" onclick="javascript:emoticon(';)');" /></td>
            </tr>
        </tbody>
    </table>
    <form name="form_chat" active="#" method="post">
        <div class="coment_txt"><input id="comment" type="text" name="msj" value="" /></div>
        <div class="inp_btn">
            <input id="submit" type="submit" value="Enviar" />
        </div>
        <div class="inp_txt">
            <input id="nickname" type="text" name="name" value="[email protected]" onclick="javascript:document.form_chat.name.focus();document.form_chat.name.select();" />
        </div>
    </form>
</div>
 

[danneg]

jaja ok muchas gracias

el codigo priemro qeu viste era similar, echo con divs, pero se veia mal

intentare este aver como queda

gracias!!!

[alexk]

pues ojala te sirva... que eh aprendido otro bug de ff...
que solo como mencionas el webkit interpreta bien...
si esta un pelin raro.. ojala se pasen lo que saben mas... que me gustaria ver como un buen reto danneg

[danneg]

bueno eso si, no me imagine que en ff ocurriera eso, pero pues no se yo acostumbor usar mejor webkit para maquear y de ahi a los demas y al final dejo ie, obvio este se e mucho peor, jaja

y gracias por tu ayuda