Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    problema image replacement e posizionamento assoluto

    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;
    
    }

  2. #2
    Personalmente avrei risolto la cosa diversamente, usando la tecnica dei margini negativi: invece del posizion:absolute darei al div un float:left, e margin:left uguale alla larghezza del div in negativo.

    Nell'html il div da posizionare va dopo quelli a cui si affianca.

    Questa soluzione è spiegata qui, qui e anche qui. Una volta che l'hai capita ti risolve un sacco di situazioni, è estremamente flessibile e cross-browser.

  3. #3
    Purtroppo per il corretto funzionamento dello script, il div DEVE essere posizionato in modo assoluto.
    Quello che non mi spiego è perchè le distanze dal margine superiore e sinistro cambino a seconda del browser, ma penso di aver scoperto che è proprio lo script a calcolare male le posizioni...

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.