Witam mam taki problem z flexboxami w chrome i firefoxie a mianowicie w chrome wszystko jest ok oto kod css
Kod html:
.flexbox{position:absolute; -webkit-box-shadow: 1px 1px 15px #000000; visibility:hidden;}
.flexbox > :first-child{ padding:8px 4px 8px 0px; background:rgba(7,9,13,0.9);text-align:center; border-radius:5px 5px 0px 0px}
.flexbox > :last-child{padding:8px; background:rgba(13,16,23,0.5); resize: both; overflow:auto; border-radius:0px 0px 5px 5px; -webkit-transition: background 1.0s ease-in-out;}
.flexbox > :first-child span{float:right; background:rgba(34,41,50,0.9); padding:4px 15px 4px 15px; margin-top:-4px; border-radius:5px 0px 5px 0px; -webkit-transition: background 1.0s ease-in-out;}
.flexbox > :last-child:hover{background:rgba(13,16,23,0.7); -webkit-transition: background 1.0s ease-in-out;}
.flexbox > :first-child span:hover{background:rgba(87,106,119,0.9); -webkit-transition: background 1.0s ease-in-out;}
.flexbox > :last-child,img{display:-webkit-box; -webkit-box-orient:vertical; -webkit-box-align:center; -webkit-box-pack:center }
.flexbox > :last-child > form{float:right}
oraz sekcja body
Kod html:
<div id="logowanie_flexbox" class="flexbox" onmousedown="warstwa=this.id">
<div>Logowanie<span onclick=document.getElementById("logowanie_flexbox").style.visibility="hidden">x</span></div>
<div style="padding:20px 50px 20px 50px;">
<img src="data/gfx/icon/72/logowanie72.png" style="width:80px; height:80px;" /><br /><br />
<form>
Login : <input type="text" />
</form><br /><br /><br />
<form>
Hasło : <input type="password" />
</form><br /><br /><br /><br /><br />
<div class="przycisk">Zaloguj</div>
</div>
</div>
co przedstawia sie mianowicie w załączniku1.jpg
Problem tkwi w tym że po przemianowaniu wszystkich -webkit- na -moz- w przegladarce firefox powinno wyglądać tak samo jak w załączniku 1 natomiast wygląda nastepująco 2.jpg
elementy nie są na środku po rozciągnieciu okna tylko po lewej tak samo jak obrazki i pojawiły sie za duże odstepy miedzy wierszami, kombinowałem ale nic nie dam rady wymyśleć ręce opadają może ktos ma pomysł jak to zrobić żeby wyglądało identycznie w obu przeglądarkach i pozycjonowanie flexible box model działało poprawnie w firefoxie
działanie interfejsu można zobaczyc pod linkiem WebOS narazie działa tylko w chromie bo nie dam rady ustawić takiego samego wyglądu pod firefox