Differenze tra IE7 e IE8-Firefox

**creon79** · 14-04-2010, 09:55

Salve,
sono un neofita della programmazione web, e, come sempre accade, mi hanno mandato su terreni inesplorati.
In pratica, mi hanno chiesto di modificare colori e immagini di un'applicazione web che usa jsf con xhtml e css. Il problema è che l'applicazione è stata realizzata su misura per firefox e IE8, mentre deve esserlo per IE7.
Ora, il problema è che quando clicco su "Visualizza compatibilità" diverse parti delle varie pagine web si spostano verso l'alto o verso il basso, io non capisco perchè e onestamente non so come porre rimedio alla cosa.
Posto il codice interessato del css (non allego lo screenshot della home page, versione IE7 e IE8/Firefox, perchè di dimensione troppo grande):

.lista2Home{
list-style: none; margin:0 0 0 0em; padding:0;
height:60px; border:0px solid; background-image:url(../img/gradient.png); background-repeat:repeat-x;
}

.lista2{
list-style: none; margin:0 0 0 0em; padding:0;
height:30px; border:0px solid; background-image:url(../img/gradient.png); background-repeat:repeat-x;
}

Se necessario, allegherò anche le pagine xtml che richiamano queste classi.
Qualcuno mi sa dare qualche dritta?
Grazie,
Danilo

**fcaldera** · 14-04-2010, 10:20

che doctype è stato dichiarato in pagina?

**creon79** · 14-04-2010, 10:22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

C'entra qualcosa?

**fcaldera** · 14-04-2010, 10:31

Originariamente inviato da creon79
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

C'entra qualcosa?

potrebbe
gli unici doctype che al momento garantiscono una coerenza nell'interpretazione del box model su tutti i browser (IE6 compreso) sono quelli strict (html4 e xhtml1) e il doctype di html5

fai una prova usando un doctype xhtml1 strict e vedi se il problema si risolve su IE7

**creon79** · 14-04-2010, 10:39

In realtà, sul template usato dalla Home Page, ne ho trovato un altro ancora:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Ho messo sia sul template sia sulla Home questo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ma pare non sia cambiato nulla...

Potrebbe essere un problema di javascript?
Se posso contattarti in pvt, ti invio i sorgenti, da qui non so come fare.
Grazie mille.

**fcaldera** · 14-04-2010, 10:46

Originariamente inviato da creon79

Potrebbe essere un problema di javascript?
Se posso contattarti in pvt, ti invio i sorgenti, da qui non so come fare.
Grazie mille.

se pensi possa dipendere da javascript, ti sposto nel forum javascript

appurato che il doctype non è influente nel tuo caso, bisognerebbe vedere un link(*) alla pagina in questione per capire dove risieda il problema (non inviare codice in pvt)

(*) prima di postarlo occhio a http://forum.html.it/forum/showthrea...8#post12923968

**creon79** · 14-04-2010, 10:51

In realtà, non essendo per nulla esperto del ramo, non saprei proprio dire dove risiede il problema... Ho pensato che fosse un problema di Javascript perchè in uno dei menù sfalsati ho tolto la chiamata alla classe del CSS, ma il problema rimaneva inserendo un semplice testo.
Purtroppo non si tratta di un sito pubblicato online, ma di un'applicazione web per un cliente, vorrei quantomeno allegare l'immagine delle 2 diverse home, ma 25 kb è troppo poco... Qualunque suggerimento è gradito!!!
Grazie ancora.

**fcaldera** · 14-04-2010, 10:59

potresti crearti uno spazio su un hosting gratuito e replicare il materiale lì se possibile (togliendo, nomi di persone/aziende dal codice...) ma diagnosticare un problema senza vedere il paziente... è arduo.

l'unica cosa che posso suggerirti intanto è di rimuovere tutti gli script: la pagina non si vede più male in IE7? allora sposto la discussione in javascript. La pagina si vede ancora male in IE7? Togli (commenti) un pezzo di codice css alla volta finché la visualizzazione non è identica ovunque. A quel punto isoli il css che non funziona e provi a cambiarlo

**creon79** · 14-04-2010, 11:07

Ho tolto le parti Javascript, ma il problema permane.
A questo punto, provo a isolare le parti di CSS correlate a quelle che danno problemi.
Hai notato qualcosa di strano su quelle elencate nel primo post?
Grazie.

**creon79** · 14-04-2010, 12:52

Ho fatto diverse modifiche sul foglio di stile, ma non ho ottenuto granchè.
Ho provato anche a usare la proprietà margin-top per allineare correttamente alcune componenti, ma ovviamente per una che si posiziona bene, ce ne sono altre 5 che si sputtanano.
Non so cosa fare, ti allego anche il sorgente del template usato:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="#{facesContext.externalContext.request.contex tPath}/Fx/mootools.js"></script>

<script type="text/javascript">
var GB_ROOT_DIR = "#{facesContext.externalContext.request.contextPat h}/js/greybox/";
</script>

<script type="text/javascript" src="#{facesContext.externalContext.request.contex tPath}/js/greybox/AJS.js"></script>
<script type="text/javascript" src="#{facesContext.externalContext.request.contex tPath}/js/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="#{facesContext.externalContext.request.contex tPath}/js/greybox/gb_scripts.js"></script>
<link href="#{facesContext.externalContext.request.conte xtPath}/js/greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />

<style>
#p1, #p2, #p3, #p4{ border:1px solid #FFFFFF; }

img, div, input { behavior: url("#{facesContext.externalContext.request.contex tPath}/css/iepngfix.htc") }

</style>

<script src="#{facesContext.externalContext.request.contex tPath}/js/util.js" type="text/javascript" />
<script src="#{facesContext.externalContext.request.contex tPath}/js/calendar/calendar.js" type="text/javascript" />
<script src="#{facesContext.externalContext.request.contex tPath}/js/calendar/calendar-it.js" type="text/javascript" />
<script src="#{facesContext.externalContext.request.contex tPath}/js/calendar/calendar-setup.js" type="text/javascript" />

<link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.request.conte xtPath}/css/style.css" media="screen,projection" />
<link rel="stylesheet" type="text/css" media="all" href="#{facesContext.externalContext.request.conte xtPath}/js/calendar/skins/aqua/theme.css" title="Aqua" />

<title>CRM</title>
</head>

<f:loadBundle basename="web_configuration" var="conf"/>

<body >
<div id="wrap">

<div id="header" class="contentFix">
<div style="border-top:0px solid #000000; background-image:url(#{facesContext.externalContext.request.c ontextPath}/img/banner.jpg); height:218px; background-repeat:no-repeat; ">

<div id="user">
<ui:include src="/navigation/user.xhtml" />
</div>

</div>

<div>

<div>

<div id="navigation">
<ui:insert name="topnav">
TOPNAV
</ui:insert>
</div>
</div>
</div>

</div>

<div class="clearing"></div>

<div id="subMenu" class="contentFix">
<ui:insert name="nav2">
SECOND LEVEL
</ui:insert>
</div>

<div id="leftside" class="contentFix">

<div class="tabnavi3" id="nav3">
<ui:insert name="nav3">
THIRD LEVEL
</ui:insert>
</div>

<div>
<ui:insert name="titlenav">
MENU LEVEL
</ui:insert>
</div>

<div>
<ui:include src="/navigation/history.xhtml" />
</div>

</div>



<div id="container" class="contentFix">

<div id="content">
<ui:debug hotkey="D" rendered="#{conf.debug}"/>

<div class="cntDefault" align="left">
<ui:insert name="errors">
<h:messages globalOnly="false"
layout="table"
errorClass="cntError"
infoClass="cntInfo"
fatalClass="cntFatal"
warnClass="cntWarn"/>
</ui:insert>
</div>
<ui:insert name="body">
PAGE BODY
</ui:insert>
</div>

</div>

<div id="footer">
<p class="contentFix">[img]#{facesContext.externalContext.request.contextPath }/img/healtcare_img-footer.jpg[/img]</p>
</div>
</div>

</body>

</html>

Quelli della Home e del css sono troppo lunghi per postarli qua...

Discussione: Differenze tra IE7 e IE8-Firefox

Strumenti discussione

Ricerca discussione

Visualizza

Differenze tra IE7 e IE8-Firefox

Permessi di invio