pb affichage différent suivant navigateurs

pb affichage différent suivant navigateurs - HTML/CSS - Programmation

Marsh Posté le 03-08-2004 à 17:04:13    

bonjour,  
 
j'ai un problème de mise en page sur la page suivante:  
http://www.ifrance.com/staff04Site/index.htm  
 
la page ne s'affiche pas de la même façon dans les différents navigateurs:  
- IE6 : j'obtiens ce que je veux,  
- IE5 et IE5.5 : j'ai comme une marge à gauche de mon menu,  
- NN7 et Mozilla : les div ne se mettent pas comme je voudrais.  
 
J'en déduis donc que mon code n'est pas conforme, hormis aux bugs d'IE6, mais je sèche sur ce qui ne va pas...  
 
Merci bcp pour votre aide.  
 
PS: ifrance me rajoutant du code, je remets ci-dessous mon html, la CSS étant accessible sur la page via le menu  
 

Citation :


 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
 
<head>  
 
<title>Mon site</title>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
 
 
<link href="_Acceuil.css" rel="stylesheet" type="text/css" />  
 
<style TYPE="text/css">  
SPAN.TitreRecherche {color:black; font:14pt bold;}      
SPAN.LibRecherche {width:100px;text-align:right;}  
P.TitreNews {font:bold 10pt; text-align:center;}  
P.Resultat {font:bold 12pt;}  
table {  
    width:100%;  
    font:normal 10pt;  
    text-align:left;  
    border:1px solid black;  
    border-collapse:collapse;  
}      
td, th {  
    border: 1pt solid black;  
    padding:3px;  
}  
</style>  
 
<script language="JavaScript" type="text/javascript">  
/**********************************************************************************  
NewsSlideFade  
* Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>  
* This script was released at DHTMLCentral.com  
* Visit for more great scripts!  
* This may be used and changed freely as long as this msg is intact!  
* We will also appreciate any links you could give us.  
*  
* Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>  
*********************************************************************************/  
function lib_bwcheck(){ //Browsercheck (needed)  
    this.ver=navigator.appVersion  
    this.agent=navigator.userAgent  
    this.dom=document.getElementById?1:0  
    this.opera5=this.agent.indexOf("Opera 5" )>-1  
    this.ie5=(this.ver.indexOf("MSIE 5" )>-1 && this.dom && !this.opera5)?1:0;  
    this.ie6=(this.ver.indexOf("MSIE 6" )>-1 && this.dom && !this.opera5)?1:0;  
    this.ie4=(document.all && !this.dom && !this.opera5)?1:0;  
    this.ie=this.ie4||this.ie5||this.ie6  
    this.mac=this.agent.indexOf("Mac" )>-1  
    this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;  
    this.ns4=(document.layers && !this.dom)?1:0;  
    this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)  
    return this  
}  
var bw=new lib_bwcheck()  
 
nNews=new Array() ;  
nNews[0] = new Array();  
nNews[0]["text"]="Ceci est la première news ......... </br>ceci est la première news......";  
nNews[0]["link"]="";  
nNews[1] = new Array();  
nNews[1]["text"]="Ceci est le texte de la deuxième news";  
nNews[1]["link"]="";  
nNews[2] = new Array();  
nNews[2]["text"]="xxxxxxxxxxxxx xxxxxxx";  
nNews[2]["link"]="";  
 
/***************************************************************************  
Use the style tag to change the placement and width of the layers.  
If you are trying to place this into a table cell or something make the  
position of the divNewsCont layer relative...Remeber that that might crash  
Netscape 4 though, Good luck!  
********************************************************************************/  
 
/****  
Variables to set  
****/  
 
//How do you want the script to work?  
//0 = Fade in - Fade out  
//1 = Slide in - Fade out  
//2 = Random  
nWorks = 1  
 
//If you use the slide set these variables:  
nSlidespeed = 2 //in px  
nNewsheight = 120 /*Init à 80, This is how long down it should start the slide.  
                adpater à la hauteur du div*/  
 
nBetweendelay = 1000 //The delay before fading out.  
nFont = 'arial,helvetiva' //The font for the news.  
nFontsize = 12 //Font size in pixel.  
nFadespeed = 200 //The speed to fade in, in milliseconds.  
 
//Set the colors, first color is same as background, last color is the color it stops at:  
//You can have as many colors you want  
nColor=new Array('#FFFFFF', '#EEEEEE','#CCCCCC','#999999','#666666','#333333','#000000')  
 
/********************************************************************************  
Object code...Object constructors and functions...  
********************************************************************************/  
function makeNewsObj(obj,nest,font,size,color,news,fadespeed,betweendelay,slidespeed,works,newsheight){  
nest=(!nest) ? "":'document.'+nest+'.'  
    this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;      
    this.writeref=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj+".document" ):0;  
    if(font){  
        this.color=new Array();  
        this.color=eval(color);  
        this.news=new Array();  
        this.news=eval(news);  
        this.font=font;  
        this.size=size;  
        this.speed=fadespeed;  
        this.delay=betweendelay;  
        this.newsheight=newsheight;  
        this.fadeIn=b_fadeIn;  
        this.fadeOut=b_fadeOut;  
        this.newsWrite=b_newsWrite;  
        this.x=0;  
        this.y=1;  
        this.slideIn=b_slideIn;  
        this.moveIt=b_moveIt;  
        this.slideSpeed=slidespeed;  
        this.works=works ;  
        if(bw.dom || bw.ie4){  
            this.css.fontFamily=this.font;  
            this.css.fontSize=this.size;  
            this.css.color=this.color[0];  
        }  
    }  
    this.obj = obj + "Object";      
    eval(this.obj + "=this" );  
    return this  
}  
 
// A unit of measure that will be added when setting the position of a layer.  
var px = bw.ns4||window.opera?"":"px";  
 
function b_moveIt(x,y){  
this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px;  
}  
 
function b_newsWrite(num,i){  
    if (bw.ns4){  
        this.writeref.write("<a href=\""+this.news[num]['link']+"\" target=\"myTarget\" style=\"text-decoration:none; font-size:"+this.size+"px\">"  
            +"<font face=\""+this.font+"\" color=\""+this.color[i]+"\">"+this.news[num]['text']+"</font></a>" )  
        this.writeref.close()  
    }else {  
        this.writeref.innerHTML = '<a id="'+this.obj+'link' +'" target="myTarget" style="text-decoration:none; font-size:'+this.size+'px; color:'+this.color[i]+'" href="'+this.news[num]['link']+'">'+this.news[num]['text']+'</a>'  
    }      
}  
//Slide in  
function b_slideIn(num,i){  
    if (this.y>0){  
        if (i==0){  
            this.moveIt(0,this.newsheight);  
            this.newsWrite(num,this.color.length-1);  
        }  
        this.moveIt(this.x,this.y-this.slideSpeed)  
        i ++  
        setTimeout(this.obj+".slideIn("+num+","+i+" );",50)  
    }  
    else {  
        setTimeout(this.obj+".fadeOut("+num+","+(this.color.length-1)+" )",this.delay);  
    }  
}  
//The fade functions  
function b_fadeIn(num,i){  
    if (i<this.color.length){  
        if (i==0 || bw.ns4) this.newsWrite(num,i)  
        else{  
            obj = bw.ie4?eval(this.obj+"link" ):document.getElementById(this.obj+"link" )  
            obj.style.color = this.color[i]  
        }  
        i ++  
        setTimeout(this.obj+".fadeIn("+num+","+i+" )",this.speed)  
    }else setTimeout(this.obj+".fadeOut("+num+","+(this.color.length-1)+" )",this.delay)  
}  
 
function b_fadeOut(num,i){  
    if (i>=0){  
        if (i==0 || bw.ns4) this.newsWrite(num,i)      
        else{  
            obj = bw.ie4?eval(this.obj+"link" ):document.getElementById(this.obj+"link" )  
            obj.style.color = this.color[i]  
        }  
        i --  
        setTimeout(this.obj+".fadeOut("+num+","+i+" )",this.speed)  
    }else{  
        num ++  
        if(num==this.news.length) num=0  
        works = !this.works?0:this.works==1?1:Math.round(Math.random())  
        if(works==0) setTimeout(this.obj+".fadeIn("+num+",0)",500)  
        else if (works==1){this.y=1;setTimeout(this.obj+".slideIn("+num+",0)",500)  
        }  
    }  
}  
/********************************************************************************************  
The init function. Calls the object constructor and set some properties and starts the fade  
*********************************************************************************************/  
function fadeInit(){  
    oNews = new makeNewsObj('divNews','divNewsCont',nFont,nFontsize,"nColor","nNews",nFadespeed,nBetweendelay,nSlidespeed,nWorks,nNewsheight)  
    oNewsCont = new makeNewsObj('divNewsCont')  
    works = !oNews.works?0:oNews.works==1?1:Math.round(Math.random())  
    if (works==0) oNews.fadeIn(0,0)  
    else if (works==1) oNews.slideIn(0,0)  
    oNewsCont.css.visibility = "visible"  
}  
 
//Calls the init function on pageload.  
if(bw.bw) onload = fadeInit  
//***********************************************************************************  
//***********************************************************************************  
//***********************************************************************************  
</script>  
</HEAD>  
 
<BODY>  
 
<div id="DivConteneur">  
 
<ul class="menu">  
    <li class="menuTitre">PARTIE 1</li>  
    <li><a href="index.htm">Acceuil</a></li>  
    <li><a href="_Acceuil.css">Voir la feuille de style</a></li>  
    <li class="menuTitre">PARTIE 2</li>  
    <li><a href="_Page.htm">Partie2 menu1</a></li>  
    <li><a href="_Page.htm">Partie2 menu2</a></li>  
    <li><a href="_Page.htm">Partie2 menu3</a></li>  
    <li><a href="_Page.htm">Partie2 menu4</a></li>  
    <li class="menuTitre">PARTIE 3</li>  
    <li><a href="_Page.htm">----- Partie3 menu1 -----</a></li>  
    <li><a href="_Page.htm">----- Partie3 menu2 -----</a></li>  
    <li><a href="_Page.htm">----- Partie3 menu3 -----</a></li>  
    <li><a href="_Page.htm">----- Partie3 menu4 -----</a></li>  
</ul>  
 
<div id="DivContenu">  
 
    <div id="divContenuZone1">  
 
    <div id="DivRecherche">  
    <form name="frm" method="post" action="_Page.htm">  
    <p>  
        <span class="TitreRecherche">  Effectuer une recherche :  </span>  
        <input type="Submit" value="Résultat" name=Submit1>  
        <input type="Reset" value="Initialiser" name=Reset1>  
    </p>  
    <p>  
        <span class="LibRecherche">Nom :</span>  
        <input type="Textbox" name="ChoixNom" style="width:350px" maxlength="50">  
    </p>  
    <p>  
        <span class="LibRecherche">Référence :</span>  
        <select name="ChoixReference" style="width:350px">  
            <option value="1">Choix1</option>  
            <option value="2">Choix2</option>  
            <option value="3">Choix3</option>  
        </select>  
    </p>  
    <p>  
        <span class="LibRecherche">Lieu :</span>  
        <input type="Textbox" name="ChoixLieu" style="width:350px" maxlength="50">  
    </p>  
    </form>  
    </div>  
 
    <div id="divNewsCont">  
        <p class="TitreNews">Les dernières news</p>  
        <div id="divNews">  
            Default text, this is the text that 3.x browsers will see  
            You can have lot's of ˜ here in stead. Or you can use a  
            script to write in text only if it's Netscape 4 (you have to  
            do that so that the layer gets some content or the written in text  
            won't show correct.  
        </div>  
    </div>  
     
    </div>  
     
    <div id="divResultat">  
        <table>  
        <col width="35%"><col width="15%"><col width="30%"><col width="20%">  
        <tr><th>NOM</th><th>Activité</th><th>Lieu</th><th>Téléphone</th></tr>  
        <tr><td>Nom1</td><td>Référence1</td><td>Lieu1</td><td>Téléphone1</td></tr>  
        <tr><td>Nom2</td><td>Référence2</td><td>Lieu2</td><td>Téléphone2</td></tr>  
        <tr><td>Nom3</td><td>Référence3</td><td>Lieu3</td><td>Téléphone3</td></tr>  
        <tr><td>Nom4</td><td>Référence4</td><td>Lieu4</td><td>Téléphone4</td></tr>  
        </table>  
    </div>  
     
</div> <!--divContenu-->  
</div>  
</BODY>  
</HTML>  
 


 

Reply

Marsh Posté le 03-08-2004 à 17:04:13   

Reply

Marsh Posté le 03-08-2004 à 17:05:37    

passe le dans le VALIDATOR
 
il trouve 46 erreurs


Message édité par masklinn le 03-08-2004 à 17:07:26

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 03-08-2004 à 17:11:59    

moi j'utiliserai plutôt (c un exemple)
 
DIV.topmenu {
 LEFT: 635px; VISIBILITY: visible; POSITION: absolute; TOP: 11px;
}
 
dans la css avec  
 
<div class="topmenu">
 
dans la page.
Et y'a du <style> dans ta page alors que t'as un fichier CSS ? pas super propre.
 
just my two cents...


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 03-08-2004 à 17:18:54    

Merci pour la rapidité de ta réponse
 
- j'ai l'impression que la plupart des erreurs du validator vient du code que rajoute ifrance. Qu'en penses-tu ?
 
- de plus je ne comprends pas car le validator me mets des erreurs sur des commentaires en js. Je me trompe ?
 

Reply

Marsh Posté le 03-08-2004 à 17:24:53    

staff04 a écrit :

- de plus je ne comprends pas car le validator me mets des erreurs sur des commentaires en js. Je me trompe ?

Je crois bien  :D
sur quelles erreurs ?


Message édité par effisk le 03-08-2004 à 17:25:28

---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 03-08-2004 à 17:26:54    

effisk,
ton <div class="topmenu">, c pour la bannière ifrance ?
si oui, c ifrance qui rajoute son propre code,
si non, je ne comprends pas de quoi tu parles...
 
c vrai, t'as raison pour le <style> dans la page, mais je crois pas que ce soit qui déconne.
 
merci pour ton aide

Reply

Marsh Posté le 03-08-2004 à 17:35:32    

nan, ce que je voulais dire c'est qu'au lieu de mettre
 
#divConteneur {
 position:absolute;
 width:100%;
 height:100%;
 background-color: #336699;
}
 
je mettrai
 
DIV.Conteneur {  
 position:absolute;
 width:100%;
 height:100%;
 background-color: #336699;
}  
 dans la CSS,
et
<div class="Conteneur"> dans ton code.
J'trouve ça plus propre, et je me demande si c'est pas ça qui fait foirer ton truc avec NN7 et Mozilla, mais je suis pas sûr, chuis pas champion CSS.


---------------
London Box Office: Comédie Musicale Londres
Reply

Marsh Posté le 03-08-2004 à 17:41:01    

staff04 a écrit :

Merci pour la rapidité de ta réponse
 
- j'ai l'impression que la plupart des erreurs du validator vient du code que rajoute ifrance. Qu'en penses-tu ?
 
- de plus je ne comprends pas car le validator me mets des erreurs sur des commentaires en js. Je me trompe ?


je t'ai filé un lien 'VALIDATOR', il te permet d'envoyer ton fichier source à toi (par contre il faut pas de PHP/ASP/Autre dedans) sans les merdes ajoutées par IFrance


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed