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

    Ancora sulla larghezza minima di un DIV e problema con IE

    Ho un layout fluido a 3 colonne più header e footer.
    Il problema è che nell'header ho due immagini, una con float:left e una con float:right.
    Vorrei che stringendo la finestra, le due immagini si avvicinino tra loro fino a toccarsi, per poi far comparire la scrollbar orizzontale. Con FF ho impostato il min-width e funziona alla grande, mentre come noto IE non riconosce il min-width e quando le due immagini arrivano a toccarsi, quella di destra scorre sotto a quella di sinistra.
    Allora ho fatto una ricerchina qui sul forum e ho provato questo:

    div#container {
    min-width: 770px;
    width: auto !important;
    width: 770px;
    }

    FF continua a funzionare, ma da quello che avevo letto, IE dovrebbe riconoscere il secondo width come fosse un min-width mentre invece mi fissa la larghezza di tutto il sito che quindi non è più fluido.
    Come posso fare?
    All work and no play makes EricFlat a dull boy

  2. #2
    Ah, se può servire, aggiungo che uso DocType XHTML Strict 1.0 e IE6......
    All work and no play makes EricFlat a dull boy

  3. #3
    Utente di HTML.it L'avatar di pacovox
    Registrato dal
    Oct 2001
    Messaggi
    557
    L'hack del min-height per IE non può funzionare anche per il min-width.
    Con quel codice IE non fa niente di sbagliato, gli stai dicendo di impostare il #container a 770px, e lui lo fa.
    L'unica soluzione che io sappia è un'espressione in un css che servi solo ad IE con i commenti condizionali:
    codice:
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="minwidthIEHACK.css" />
    <![endif]-->
    E nel css ad esempio:
    codice:
    div#container { width:expression(document.body.clientWidth < 770 ? "770px": "auto" ) }
    Questo css non è valido, ma non è neanche realmente collegato alla pagina. Lo vede solo IE.

  4. #4
    Ho provato a far caricare un css diverso a seconda del browser, e per IE ho usato quello che mi hai detto ma continua ad ignorare la larghezza minima!
    All work and no play makes EricFlat a dull boy

  5. #5
    Utente di HTML.it L'avatar di pacovox
    Registrato dal
    Oct 2001
    Messaggi
    557
    Puoi postare la pagina?

  6. #6
    http://www.krakatoa.it/prova/aa.php


    Il riconoscimento del browser è fatto lato server con PHP.
    All work and no play makes EricFlat a dull boy

  7. #7
    All work and no play makes EricFlat a dull boy

  8. #8
    Visto che non riesco a cavare il ragno dal buco, in che altro modo potrei ottenere quel layout? Idee???
    :master:
    All work and no play makes EricFlat a dull boy

  9. #9
    Utente di HTML.it L'avatar di pacovox
    Registrato dal
    Oct 2001
    Messaggi
    557
    Per la verità ieri ci ho sbattuto la testa anche io cercando di capire quale fosse il problema, usando il tuo codice in locale.
    La tecnica di per se funziona, un esempio lo trovi quì: http://test.constile.org/minwidth.html ma ce ne sono molti altri.
    Probabilmente dovresti riuscire ad isolare il problema con un nuovo layout molto semplice e capire cosa va in conflitto con l'espressione.

  10. #10
    Oddio, ho scoperto una cosa allucinante... l'hack che mi avevi suggerito tu, copiato pari pari:

    width:expression(document.body.clientWidth < 770 ? "770px": "auto" )

    funziona ma dopo un po' di ridimensionamenti mi manda in palla IE ( ), mentre se aggiungo uno spazio tra la parola expression e la prima parentesi tonda:

    width:expression (document.body.clientWidth < 770 ? "770px": "auto" )

    non funziona più (ma non blocca IE).
    Dopo una intera mattina di ricerche in rete ho trovato un hack che finalmente mi funziona a dovere!!!

    width:expression( ( d = document.compatMode == "CSS1Compat" ? document.documentElement : document.body ) && ( d.clientWidth < 770 ? "770px" : "auto" ) );





    PS: Microsoft....
    All work and no play makes EricFlat a dull boy

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.