Autore Topic: Strano comportamento css (Letto 2316 volte)

gabrib · « **il:** 02 Nov 2010, 17:29:32 »

Ciao a tutti. A fondo pagina ho posizionato sei div: nella parte superiore c'è il logo Acrobat PDF ( BOX MINIATURA PDF MODULO ADESIONE) che punta ad un pdf, nella parte inferiore la relativa didascalia (BOX TITOLO PDF)
Con Firefox 3,6, Opera 10.6 Portable, Chrome 7.0.517.41 Portable, Chrome 4.1.249.1036 Portable, la visualizzazione è corretta.
Il problema si pone con I.E7, le didascalie si posizionano da tutt'altra parte, ma probabilmente a ragione.
In effetti guardando gli attributi "margin-top" e "left" della prima didascalia (1°BOX TITOLO PDF) hanno poco a che fare con gli stessi della seconda e terza didascalia (2°/3° BOX TITOLO PDF)
I DIV vengono richiamati direttamente nell'articolo.
Come posso fare?? Grazie
http://www.introbiosviluppo.it/
Posto i css dei realtivi div:

Codice: [Seleziona]

#box_art1 {               /* BOX MINIATURA PDF MODULO ADESIONE*/
float:left;
margin-top:20px;
left: 55px;
position: relative;
border: solid 1px;
width: 126px;
height: 126px;
padding-top: 0; 
padding-right: 0px; 
padding-bottom: 0px; 
padding-left: 0px; 
color: #000000;
} 

#box_art2 {              /*BOX MINIATURA PDF MODULO ADESIONE*/
float:left;
margin-top: 20px;
left: 86px;
position: relative;
border: solid 1px;
width: 126px;
height: 126px;
padding-top: 0; 
padding-right: 0px; 
padding-bottom: 0px; 
padding-left: 0px;
color: #000000;
} 

#box_art3 {               /* BOX MINIATURA PDF MODULO ADESIONE*/
float:left;
margin-top: 20px;
left: 116px;
position: relative;
border: solid 1px;
width: 126px;
height: 126px;
padding-top: 0; 
padding-right: 0px; 
padding-bottom: 0px; 
padding-left: 0px;
color: #000000;
} 
#box_titolo1 {           /* 1°BOX TITOLO PDF*/
float:left;
margin-top: 147px;
left: -329px;
position: relative;
border: solid 1px;
width: 126px;
height: 35pX;
padding: 0px 0px 0px 0px;
} 

#box_titolo2 {             /* 2°BOX TITOLO PDF*/
float:left;
margin-top: -37px;
left: 214px;
position: relative;
border: solid 1px;
width: 126px;
height: 35pX;
padding: 0px 0px 0px 0px;
} 

#box_titolo3 {            /* 3°BOX TITOLO PDF*/
float:left;
margin-top: -37px;
left: 372px;
position: relative;
border: solid 1px;
width: 126px;
height: 35pX;
padding: 0px 0px 0px 0px;
}

conti1 · « **Risposta #1 il:** 03 Nov 2010, 02:49:49 »

ciao
devi crearti un tuo css personalizzato x il solo ie7 .
se leggi il post in alto evidenziato , non avresti posto la domanda strano css....
ma probabilmente avresti risolto.

gabrib · « **Risposta #2 il:** 03 Nov 2010, 11:26:36 »

Ho letto l'articolo che mi hai consigliato, il problema è che non trovo il tag head dove inserire il richiamo al css.
Ho cercato nell'index.php del template ma non lo trovo; l'ho trovato nel file component.php del template (JA-Purity II), ma non so se è corretto inserire in questo file il richiamo al css, anche perchè, pur facendolo, non ho risolto il problema di visualizzazione con I.E.
Grazie.
component.php:

Codice: [Seleziona]

<?php
/*
# ------------------------------------------------------------------------
# JA Purity II - Beta version - Version 1.0 - Licence Owner JA0
# ------------------------------------------------------------------------
# Copyright (C) 2004-2009 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
# @license - Copyrighted Commercial Software
# Author: J.O.O.M Solutions Co., Ltd
# Websites:  http://www.***.com -  http://www.joomlancers.com
# This file may not be redistributed in whole or significant part.
# ------------------------------------------------------------------------
*/

// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">

<head>
	<jdoc:include type="head" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/ja_purity_ii/css/addons.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/ja_purity_ii/css/template.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/ja_purity_ii/css/print.css" type="text/css" />
<!--[if lte IE 6]>
  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ie.css" type="text/css" media="screen" />   
<![endif]-->

<!--[if lte IE 7]>
  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/ja_purity_ii/css/ie7.css" type="text/css" media="screen" />   
<![endif]-->

</head>

<body class="contentpane">

<div class="column">
	<jdoc:include type="message" />
	<jdoc:include type="component" />
</div>

</body>

</html>

gabrib · « **Risposta #3 il:** 05 Nov 2010, 17:40:17 »

Ho provato più volte, ma non riesco a far vedere ad IE7 l'hack.
Nel frattempo ho cercato di migliorare il template.css di default, ora sono riuscito a posizionare due div con le didascalie sotto le immagini, l'ultima sulla destra non ci riesco.
Quello che tra le altre cose non capisco è questo:
I tre div con le immagini hanno un attributo left partendo da sinistra rispettivamente di 55px, 86px,116px.
Ora anche i div con le didascalie dovrebbero avere lo stesso valore, invece hanno rispettivamente -329px 214px e 372px. Con questi valori la visualizzazione è corretta con Firefox ma con IE7, l'ultimo div didascalia sula destra, non e posizionato correttamente.
Come posso risolvere?? Grazie.
www.introbiosviluppo.it

conti1 · « **Risposta #4 il:** 06 Nov 2010, 12:18:37 »

ciao
x il terzo box che si sposta devi crearti un css x il solo ie7 con questi dati

Codice: [Seleziona]

#box_titolo3 {
MARGIN-LEFT: -128px! important; TEXT-ALIGN: center}

io da qui lo sistemo con questi.

gabrib · « **Risposta #5 il:** 06 Nov 2010, 20:46:02 »

Il problema è come creare e far leggere questo css, ad IE7.
Ho provato con i l'hack che hai descritto nell'articolo in evidenza, ma non ci sono riuscito.
Grazie.

gabrib · « **Risposta #6 il:** 08 Nov 2010, 10:35:45 »

Nessuno può aiutarmi? Grazie.

conti1 · « **Risposta #7 il:** 08 Nov 2010, 13:56:35 »

allora t nel index.php del template hai già un richiamo x ie7 di cui il css e nel php.
fai cosi cerca questo codice

Codice: [Seleziona]

<!--[if lt IE 7.0]>
<link rel="stylesheet" href="http://www.introbiosviluppo.it/templates/ja_purity_ii/css/ie7minus.css" type="text/css" />
<style>
.main { width: expression(document.body.clientWidth < 770? "770px" : document.body.clientWidth > 1200? "1200px" : "auto"); }
</style>
<![endif]-->

e prova farlo diventare in questo modo

Codice: [Seleziona]

<!--[if lt IE 7.0]>
<link rel="stylesheet" href="http://www.introbiosviluppo.it/templates/ja_purity_ii/css/ie7minus.css" type="text/css" />
<style>
.main { width: expression(document.body.clientWidth < 770? "770px" : document.body.clientWidth > 1200? "1200px" : "auto"); }
#box_titolo3 {
MARGIN-LEFT: -128px! important; TEXT-ALIGN: center}
</style>
<![endif]-->

gabrib · « **Risposta #8 il:** 08 Nov 2010, 15:15:14 »

Cercato ma non riesco a trovare il file che contiene il codice.
La ricerca si è concentrata sui file della cartella \template\ja-purity II, hai idea di dove cercare??
Grazie

gabrib · « **Risposta #9 il:** 09 Nov 2010, 14:53:15 »

Non avendo trovato il file che contiene il codice, ho provato ad inserire direttamente nel file ie7minus.css
#box_titolo3 {
margin-left: -128px! important; }
ma non ho risolto?
Come posso fare?
Grazie.

Autore Topic: Strano comportamento css (Letto 2316 volte)

gabrib

Strano comportamento css

conti1

Re:Strano comportamento css

gabrib

Re:Strano comportamento css

gabrib

Re:Strano comportamento css

conti1

Re:Strano comportamento css

gabrib

Re:Strano comportamento css

gabrib

Re:Strano comportamento css

conti1

Re:Strano comportamento css

gabrib

Re:Strano comportamento css

gabrib

Re:Strano comportamento css