Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1113 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  css mozilla/ie

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

css mozilla/ie

n°816787
staff04
Posté le 06-08-2004 à 17:55:04  profilanswer
 

bonjour,  
 
Voila mon code html et sa CSS, tous deux passés à la validation W3C.  
 
La page est OK sous Mozilla, mais pas sous IE (notamment pb largeur sur certains elements...)  
 
Que dois-je faire pour que ma page s'affiche correctement sous IE ?  
 
Merci d'avance  
 
- voici la feuille de style  
 

Citation :


body {  
    margin:0%;  
    padding:0%;  
}  
 
.divConteneur {  
    position:absolute;  
    width:100%;  
    height:100%;  
    background-color: #336699;  
}  
 
.divContenu {  
    margin-top:0%;  
    margin-left:20%;  
    height:100%;  
    background-color:white;  
}  
 
.divRecherche {  
    width:76%;  
    background-color:#66CCFF;  
    padding:5px 2% 30px 2%;  
    margin:0%;  
}  
 
.divRecherche h1 {  
    font-weight:bold;  
    font-size:14pt;  
    text-align:left;  
    color:black;  
}  
 
#divNewsCont {  
    float:right;  
    width:20%;  
    padding:0%;  
    margin:0%;  
    height:120px;  
    visibility:hidden;  
    overflow:hidden;  
    background-color:white;  
    border:1pt solid black;  
}  
 
#divNewsCont h1 {  
    font-size:10pt;  
    font-weight:bold;  
    text-align:center;  
}  
 
#divNews {  
    position:relative;  
}  
 
.divResultat {  
    margin:0%;  
    padding:2%;  
    background-color:red;  
}  
 
ul.menu {  
    position:absolute;  
    left:0%;  
    width:20%;  
    list-style-type:none;  
    margin:0%;  
    padding:0%;  
    text-align:left;  
}  
 
ul.menu a {  
    display:block;  
    height:20px;  
    background-color: #336699;  
    text-decoration:none;  
    font-weight:bold;  
    font-size:10pt;  
    color:white;  
    text-align:left;  
}  
ul.menu a:hover {  
    background:gray;  
}  
 
ul.menu li.menuTitre {  
    color: black;  
    font-weight:bold;  
    text-align:center;  
    background-color: yellow;  
}  
 
div.row {  
    clear:both;  
    padding-top:5px;  
}  
 
div.row span.label {  
    float:left;  
    width:15%;  
    text-align:right;  
}  
 
div.row span.ctrl {  
    float:right;  
    width:83%;  
    text-align:left;  
}  
 
div.row span.ctrl input,select{  
    width:50%;  
}  
 
table {  
    width:100%;  
    font-weight:normal;  
    font-size:10pt;  
    text-align:left;  
    border:1px solid black;  
    border-collapse:collapse;  
}      
td, th {  
    border: 1pt solid black;  
    padding:0.5%;  
}  


 
et le code html
 

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">  
 
<script 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"]="ceci est la troisième news";  
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){  
            if (bw.ie6) {  
                this.moveIt(0,this.newsheight-60);  
            }else {  
                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 class="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 class="divContenu">  
 
    <div id="divNewsCont">  
        <h1>Les dernières news</h1>  
        <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 class="divRecherche">  
    <form name="frm" method="post" action="_Page.htm">  
    <h1>  
        Effectuer une recherche :    
        <input type="Submit" value="Résultat" name=Submit1>  
        <input type="Reset" value="Initialiser" name=Reset1>  
    </h1>  
    <div class="row">  
        <span class="label">Nom :</span>  
        <span class="ctrl"><input type="Text" name="ChoixNom" maxlength="50"></span>  
    </div>  
    <div class="row">  
        <span class="label">Référence :</span>  
        <span class="ctrl">  
        <select name="ChoixReference">  
            <option value="1">Choix1</option>  
            <option value="2">Choix2</option>  
            <option value="3">Choix3</option>  
        </select>  
        </span>  
    </div>  
    <div class="row">  
        <span class="label">Lieu :</span>  
        <span class="ctrl"><input type="Text" name="ChoixLieu" maxlength="50"></span>  
    </div>  
    </form>  
    </div>  
 
    <div class="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>  
</div>  
</BODY>  
</HTML>  
 


 
PS: la page est visible ici:  
http://www.ifrance.com/staff04Site/index.htm
 

mood
Publicité
Posté le 06-08-2004 à 17:55:04  profilanswer
 

n°816792
staff04
Posté le 06-08-2004 à 18:05:14  profilanswer
 

quelques précisions sur les pb que je rencontre sous ie
 
problèmes de largeur sur :  
- le divRecherche : + petit que la largeur spécifiée  
- le divResultat qui dépasse de l'écran,
 
problème de positionnement du div contenant les news

n°816923
comar91
Posté le 06-08-2004 à 22:24:39  profilanswer
 

Bonsoir, essayes ceci:
......
.divContenu {  
    margin-top:0%;  
    width:80%;  
    margin-left:20%;  
    height:100%;  
    background-color:white;  
}
....
d'autre part erreur javascrip sous opera7 et IE5.5?  
A+


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  css mozilla/ie

 

Sujets relatifs
[mozilla] forcer la fermeture de la fenêtreimage sur le reseau avec mozilla
&amp; et JS avec mozillaespace entre les lignes d'un tableau, problème avec mozilla [résolu]
Probleme avec explorer ou mozilla[IE & Mozilla] A peine commencé déja des problèmes
background-position avec MOZILLAPb de code avec Mozilla/Firefox (alors qu'avec IE => OK)
Mozilla => problème de largeurAvis aux utilisateurs de netscape ou mozilla: j'ai besoin d'aide
Plus de sujets relatifs à : css mozilla/ie


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR