FF 3 final e repeat-x

[Deltafox]

Salve,

Ho appena installato FF 3.0 final ed ho subito notato nel mio forum un problema di questa versione di FF sulla gestione del repeat-x in poche parole non mi replica più una immagine in lunghezza mentre con la v2.0.14 era tutto ok

questo il codice css

.popupmenu-footer-left
{
	background: url(<#IMG_DIR#>/menu_bot_left.gif) no-repeat left top;
	margin: 0px;
	padding: 0px;
	font-size: 1px;
	width: 3px;
	height: 10px;
}

.popupmenu-footer-right
{
	background: url(<#IMG_DIR#>/menu_bot_right.gif) no-repeat right top;
	margin: 0px;
	padding: 0px;
	font-size: 1px;
	width: 3px;
	height: 10px;
}

.popupmenu-footer-tile
{
	width: 100%;
	height: 10px;
        background: url(<#IMG_DIR#>/menu_bot_tile.gif) repeat-x 3px top;
        font-size: 1px;
	margin: 0px;
	padding: 0px;
}

questo il codice html

<div align='left' style='position:relative;white-space:nowrap'><div style='position:absolute;top:0;left:0'><table cellspacing='0' cellpadding='0' width='100%'><tr><td class='nopad' nowrap='nowrap'><div class='popupmenu-footer-left'></div></td><td class='nopad' nowrap='nowrap' width='100%'><div class='popupmenu-footer-tile' style='width:100%'></div></td><td class='nopad' nowrap='nowrap'><div class='popupmenu-footer-right'></div></td></tr></table></div></div>

lo style popupmenu-footer-tile quindi su ff 3.0 non mi esegue più il :

"background: url(<#IMG_DIR#>/menu_bot_tile.gif) repeat-x 3px top;"

come mai? e come potrei ovviare a questo problema?

Infatti prima visualizzavo correttamente in ie7 e ff 2.0.14 in questo modo :



mentre ora con ff 3.0 finale visualizzo cosi :



Qualcuno sa aiutarmi?

Grazie

[Deltafox]

Il problema sembra essere sullo style <div style='position:absolute;top:0;left:0'>

Infatti questo codice funziona su opera 9.50 e ff 3.0

<div align='left' style='position:relative;white-space:nowrap'><table cellspacing='0' cellpadding='0' width='100%'><tr><td class='nopad' nowrap='nowrap'><div class='popupmenu-footer-left'></div></td><td class='nopad' nowrap='nowrap' width='100%'><div class='popupmenu-footer-tile' style='width:100%'></div></td><td class='nopad' nowrap='nowrap'><div class='popupmenu-footer-right'></div></td></tr></table></div>

Questo su ie7

<div align='left' style='position:relative;white-space:nowrap'><div style='position:absolute;top:0;left:0'><table cellspacing='0' cellpadding='0' width='100%'><tr><td class='nopad' nowrap='nowrap'><div class='popupmenu-footer-left'></div></td><td class='nopad' nowrap='nowrap' width='100%'><div class='popupmenu-footer-tile' style='width:100%'></div></td><td class='nopad' nowrap='nowrap'><div class='popupmenu-footer-right'></div></td></tr></table></div></div>

Ora mi viene in mente di creare solo una function in js che controlli il tipo di browser e modifichi il tipo di style in base al browser riconosciuto..

Voi che ne pensate?

Ciao

[Deltafox]

Sembra che FF 3.0 non gestisca lo style position:absolute; e non so perchè...

Come potrei ovviare senza appesantire troppo con function js?

Saluti

[Mich_]

FF3 e` uscito ieri (nella versione definitiva).
Io aspetterei alcuni giorni prima di cercare hack a bachi che sono ancora da dimostrare/definire.

Se il tuo problema e` aggiornare alcune pagine il piu` presto possibile, tieni d'occhio le liste di bug del browser (Bugzilla?), e vedi se altri hanno problemi analoghi.

[Deltafox]

Questo problema lo avevo riscontrato già nelle versioni beta e rc.. pensavo lo risolvessero nella final invece non gestisce proprio lo style position:absolute..

non so se esista uno style equivalente..

Ciao

[Mich_]

Attenzione che i posizionamenti sono una cosa piuttosto complessa.

Nel codice sopra vedo delle formattazioni ottenute tramite attributi HTML: questo puo` comportare conflitti con i CSS, e i conflitti vengono risolti in modo diverso da browser diversi.

Dovresti provare a fare una pagina molto semplice, con i corretti attributi CSS al body e un blocco posizionato in modo assoluto, ma senza attributi HTML di formattazione.

[Deltafox]

Ciao Ho provato anche a crearmi una pagina html da 0 solo per testare il position absolute e testarlo con i vari browser...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.body
{
min-height: 100%;
}
.popupmenu-footer-left
{
	background: url(menu_bot_left.gif) no-repeat left top;
	margin: 0px;
	padding: 0px;
	font-size: 1px;
	width: 3px;
	height: 10px;
}

.popupmenu-footer-right
{
	background: url(menu_bot_right.gif) no-repeat right top;
	margin: 0px;
	padding: 0px;
	font-size: 1px;
	width: 3px;
	height: 10px;
}

.popupmenu-footer-tile
{
	width: 100%;
	height: 10px;
    background: url(menu_bot_tile.gif) repeat-x 3px top;
    font-size: 1px;
	margin: 0px;
	padding: 0px;
}
.popupmenuie-footer-tile
{
	position:absolute;
	top:0;
	left:0;
	background:red;
	clear:both;
}
</style>
<title>Test Psoition</title>
</head>

<body>
<table width="240" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><div align='left' style='position:relative;white-space:nowrap'><div style='position:absolute;top:0;left:0'><table cellspacing='0' cellpadding='0' width='100%'><tr><td class='nopad' nowrap='nowrap'><div class='popupmenu-footer-left'></div></td><td class='nopad' nowrap='nowrap' width='100%'><div class='popupmenu-footer-tile' style='width:100%'></div></td><td class='nopad' nowrap='nowrap'><div class='popupmenu-footer-right'></div></td></tr></table></div></div></td>
  </tr>
</table>
</body>
</html>

se provi ad aprire questo link http://www.deltaforum.org/test/

con FF 3.0 e Opera 9.50 si vede che non viene gestito il position:absolute

Mentre se apri questo link con ie7 tutto ok...

é proprio un bug di ff e opera secondo me

Che ne pensi?

[Mich_]

Mi sembra assolutamente inutile provare i brwoser nuovi con un linguaggio vecchio di oltre 10 anni.

Come gia` ti ho detto devi eliminare tutte le formattazioni realizzate con attributi HTML.
In pratica devi usare il linguaggio XHTML Strict.
Inoltre devi anche togliere la tabella, che e` usata per formattare.

[Deltafox]

In realtà ho risolto...

mi è bastato eliminare dal codice il

<div style='position:absolute;top:0;left:0'>

ed inserire il suo style ( style='position:absolute;top:0;left:0' ) nel tag <table>

<table cellspacing='0' cellpadding='0' width='100%' style='position:absolute;top:0;left:0'>

In questo modo quindi.. :

<div align='left' style='position:relative;white-space:nowrap'><table cellspacing='0' cellpadding='0' width='100%' style='position:absolute;top:0;left:0'><tr><td class='nopad' nowrap='nowrap'><div class='popupmenu-footer-left'></div></td><td class='nopad' nowrap='nowrap' width='100%'><div class='popupmenu-footer-tile' style='width:100%'></div></td><td class='nopad' nowrap='nowrap'><div class='popupmenu-footer-right'></div></td></tr></table></div>

e funziona perfettamente su tt e 3 i browser ora...

Conclusione :

FF 3.0 e Opera 9.50 sembrano non gestire più il position:absolute nei tag <div> o almeno nei <div> annidati..

Todos qui..

Saluti e Grazie

[Mich_]

E` una cosa nota ... e gia` affrontata piu` volte in questo forum: un oggetto con posizionamento assoluto esce dal normale flusso, e si comporta in modo indipendente dal suo contenitore se questo non e` posizionato.
Ho provato a dirti che devi cambiare modo di programmare ...

Comunque ecco due link che forse ti chiariscono il concetto.
I posizionamenti assoluti
Capire i posizionamenti relativi