Ciao a tutti.
Ho appena terminato di restaurare un mio sito, www.localando.it, ma mentre su firefox e safari per windows si vede tutto perfettamente, su ie 7 e su opera 9 nascono dei problemi.
Innanzitutto il div che contiene il form per il login (quello fluttuante), nonostante sia stato posizionato in modo assoluto rispetto al div contenitore "wrapper", non viene collocato nello stesso punto nei vari browser. Su ie7 e su opera 9 infatti rientra di diversi pixel verso sinistra, quando in realtà dovrebbe stare perfettamente sul bordo.
Inoltre per i titoli ho usato una delle tante tecniche di image replacement, ma con opera 9 continua a vedersi il testo sopra al background.
Vi posto il codice relativo, ma trovate il css completo su www.localando.it/css/shared.css .
div login: HTML + CSS
codice:
<div id="floatLayer" style="position:absolute;left:742px; top:1px; height:200px;width:200px;z-index:100;">
<div id="login" class="left" style="display:none;">
<form action="/index.php?action=login" method="post">
<input type="text" name="usr" value="username" class="inputlogin" onfocus="this.value='';" />
<input type="password" name="pwd" value="password" class="inputlogin" onfocus="this.value='';" />
<button type="submit" id="submit" name="submit" class="login_btn" onclick="javascript:toggleLayer('login');"></button>
</form>
</div>
<div class="left">
Login
</div>
<div class="spacer"></div>
</div>
image replacement: CSS
codice:
h1
{
margin: 0;
padding: 65px 0 0 0;
height: 0;
width: 324px;
background: url(../img/layout/logo.gif) no-repeat top left;
font-size: 0;
line-height: 0;
overflow: hidden;
text-align: left;
}