| Precedente :: Successivo |
| Autore |
Messaggio |
pc1751
Eroe in grazia degli dei
Registrato: 17/05/05 18:52
Messaggi: 162
|
 Inviato: 25 Lug 2005 08:33 Oggetto: * css: firefox e float |
 |
|
Carissimi,
che voi sappiate firefox (1.04) nn supporta float?
Provo a fare un contenitore con tre colonne affiancate con float: left ma mentre in ie le colonne vengono inserite normalmente nel contenitore, in FF il contenitore risulta alto zero, come se nn riuscisse a vedere l'altezza delle colonne. in altre parole si comporta come se le colonne avessero l'attributo position settato a absolute.
avete qualche workaround?
Grazzzzzie
pc1751 |
|
| Top |
|
 |
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 25 Lug 2005 09:04 Oggetto: |
|
|
per quanto ne so io, lo supporta tranquillamente... potresti postarci il codice o un link con l'esempio, per cortesia?
sarebbe piu' facile capire se ed eventualmente dove c'e' il problema 
- |
|
| Top |
|
|
juzo kun
Dio maturo
Registrato: 19/04/04 09:32
Messaggi: 1853
Residenza: tra la tastiera e la sedia
|
| Inviato: 25 Lug 2005 09:06 Oggetto: |
|
|
Se ho capito bene...
FireFox (e tutti i Gecko) continuano a "fluttuare" fino a che non gli dici di smettere. Se vuoi che si comporti come IE prova questo:
How To Clear Floats Without Structural Markup (se non sai l'inglese fammi sapere che abborraccio una traduzione)
Quello da usare è il metodo descritto al capoverso "Clearing", 21st Century Style.
Altrimenti anche questo: How to completely enclose a floated element in CSS2 (vari esempi, di cui uno simile a quello sopra)
Al limite se puoi mettere on-line un esempio che si dà un'occhiata al codice...
Cià
JK
per tutti i tag inline, Batman! ci hanno preceduto! |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 25 Lug 2005 09:20 Oggetto: |
|
|
| juzo kun ha scritto: |
per tutti i tag inline, Batman! ci hanno preceduto! |
aggiungo anche questo tutorial, dove usano un div "libero" e due "incastrati" in un altro div con questo sistema:
| Codice: |
<div id="container">
<div id="header"><h1>Il logo qui</h1></div>
<!-- inizio div main -->
<div id="main">
<div id="content">
<h2>Contenuti</h2>
</div>
<div id="nav">
<h3>Navigazione</h3>
</div>
</div>
<!-- fine div main-->
<div id="extra">
<h4>Link e altro</h4>
</div>
<div id="footer"><p>Qui il footer</p></div>
</div>
|
- |
|
| Top |
|
|
pc1751
Eroe in grazia degli dei
Registrato: 17/05/05 18:52
Messaggi: 162
|
| Inviato: 25 Lug 2005 11:03 Oggetto: |
|
|
| rebelia ha scritto: | per quanto ne so io, lo supporta tranquillamente... potresti postarci il codice o un link con l'esempio, per cortesia?
sarebbe piu' facile capire se ed eventualmente dove c'e' il problema
- |
sto guardando i link che mi avete postato- grazie
eccovi comunque il codice che nn funziona con FF:
| Codice: |
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
margin: 15px;
height: 100%;
padding: 0px;
font-family: Arial, Helvetica, Sans Serif;
font-size: 11px;
color: #333333;
background-color: #696969;
}
#terzorigo {
width: 572px;
background-color: #3399bb;
PADDING: 10px;
border: 1px solid #066;
}
#cont1 {
width: 180px;
/*min-height: 400px;
height: auto !important;
height: 400px;
border-right: 1px solid #666;
border: 1px solid #600;*/
BORDER: #00f 2px solid;
PADDING: 5px;
FLOAT: left;
MARGIN-RIGHT: 10px;
}
#cont2 {
width: 180px;
min-height: 400px;
height: auto !important;
height: 400px;
border-right: 1px solid #666;
/*position: absolute;
margin-left: 181px;*/
float:left;
}
#cont3 {
width: 180px;
min-height: 400px;
height: auto !important;
height: 400px;
border-right: 1px solid #666;
position: absolute;
margin-left: 362px;
}
-->
</style>
</head>
<body>
<div id="terzorigo">
<div id="cont1">eos et accusam et justo odio dignissim qui blandit Et harumd
dereud facilis est er expedit distinct suscipit laboris nisi ut aliquip ex
ea commodo consequat dignissim qui blandit prasesent lupatum delenit eos et
accusam et justo odio dignissim qui blandit Et harumd dereud eos et accusam
et justo odio dignissim qui blandit Et harumd dereud eos et accusam et justo
odio dignissim qui blandit </div>
<div id="cont2">ssssss</div>
<div id="cont3">ssssss</div>
</div>
</body>
</html>
|
|
|
| Top |
|
|
horus
Macchinista
Registrato: 22/03/05 10:48
Messaggi: 2554
Residenza: Sirio e dintorni
|
| Inviato: 25 Lug 2005 11:06 Oggetto: |
|
|
Io di solito chiudo i float così:
| Codice: |
[...]
<div id="cont3">ssssss</div>
<br style="clear:both;" />
</div>
[...]
|
|
|
| Top |
|
|
juzo kun
Dio maturo
Registrato: 19/04/04 09:32
Messaggi: 1853
Residenza: tra la tastiera e la sedia
|
| Inviato: 25 Lug 2005 11:22 Oggetto: |
|
|
@pc1751: vedi il rimedio del dio egizio in trasferta qui sopra 
oppure, nel caso tu non voglia/possa aggiungere markup non strettamente indispensabile, aggiungi questo nel CSS:
| Codice: | #terzorigo:after {
content: ".";
display:block;
height:0;
clear:both;
visibility:hidden; } |
Sarebbe meglio anche aggiungere un doctype (altrimenti non è validabile), io ho usato quello XHTML 1.0 strict
| Codice: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
pignoleria finale: sans-serif (col trattino)
Cià
JK |
|
| Top |
|
|
pc1751
Eroe in grazia degli dei
Registrato: 17/05/05 18:52
Messaggi: 162
|
| Inviato: 25 Lug 2005 11:31 Oggetto: |
|
|
| se ho capito bene dipendeva dal fatto che non ho chiuso la proprietà float? |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 25 Lug 2005 11:40 Oggetto: |
|
|
non so cosa tu intenda per "chiudere" la proprieta' float, comunque non hai inserito un elemento che faccia "piazza pulita" alla fine di tutti i div flottanti (e scusa l'italiacano della spiegazione, sic!  )
edit: con clear: both
- |
|
| Top |
|
|
horus
Macchinista
Registrato: 22/03/05 10:48
Messaggi: 2554
Residenza: Sirio e dintorni
|
| Inviato: 25 Lug 2005 12:33 Oggetto: |
|
|
| Ma qual è la reale compatibilità dell':after? Ho letto in giro (ad esempio qui) che IE non supporta :before e :after. |
|
| Top |
|
|
juzo kun
Dio maturo
Registrato: 19/04/04 09:32
Messaggi: 1853
Residenza: tra la tastiera e la sedia
|
| Inviato: 25 Lug 2005 12:49 Oggetto: |
|
|
@horus: hai letto bene, IE non lo supporta
e ciò è un peccato, perché ci si potrebbero fare degli effetti per cui di solito si scomoda JavaScript: prova a guardare questa pagina di CSSZenGarden su FF e su IE...
In questo articolo una panoramica sulle proprietà che IE si perde per strada.
Cià
JK |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 25 Lug 2005 17:15 Oggetto: |
|
|
che splendore la grafica di quel layout  |
|
| Top |
|
|
ioSOLOio
Amministratore
Registrato: 12/09/03 19:01
Messaggi: 16342
Residenza: in un sacco di...acqua
|
| Inviato: 25 Lug 2005 17:56 Oggetto: |
 |
|
| juzo kun ha scritto: | @horus: hai letto bene, IE non lo supporta
e ciò è un peccato, perché ci si potrebbero fare degli effetti per cui di solito si scomoda JavaScript: prova a guardare questa pagina di CSSZenGarden su FF e su IE...
|
forte la tabella che compare in IE sotto il titolo che recita
| Citazione: | This design requires a modern browser with CSS support for advanced selectors. Your current browser does not make the cut. Chances are, you're using Microsoft Internet Explorer which is almost 3 years old. Three years old ? That's 99 in internet years !
[...] |
|
|
| Top |
|
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
