css mozilla / ie (suite)

css mozilla / ie (suite) - HTML/CSS - Programmation

Marsh Posté le 12-08-2004 à 17:47:11    

bonjour,
 
je reviens avec mes css qui font ce que je veux sous mozilla pas toujours pas sous IE.
 
J'ai effectué les modifications suivantes:
- ajout de margin:0;padding:0; sur tous les blocs où l'affichage diffère,  
- afin gérer le modèle de boîte css de IE 5.x, je me suis servi de l'article http://openweb.eu.org/articles/dimensions_boites_css/
 
Ci-dessous la liste des problèmes qui subsistent:
_______________________________________________________
 
Description du problème  IE 6 IE 5.5 IE 5.01  
_______________________________________________________
 
- le menu n'occupe pas toute  
 la hauteur de la page    X
 
- les titres du menu ne sont
pas sur toute la largeur     X
 
- présence d'espace avant et/ou
après sur les liens du menu    X   X
 
- le bloc divContenu ne prend pas
toute la largeur restante de la page   X   X
 
- la largeur du bloc divRecherche
est réduite      X   X
 
- le style h1 de divNewsCont ne
s'applique pas       X
_______________________________________________________
 
 
Voila, j'espere que je suis assez précis,
Si quelqu'un a des idées...
Merci beaucoup.
 
 
- voici la feuille de style  
 

Citation :


/**********************************************/
/************  BLOCS DE LA PAGE  **************/
/**********************************************/
 
body {
 margin:0%;
 padding:0%;
}
 
.divConteneur {
 position:absolute;
 width:100%;
 height:100%;
 background-color: #336699;
}
 
.divContenu {
 margin:0%;
 padding:0%;
 margin-left:20%;
 width:80%;
 height:100%;
 background-color:white;
}
 
.divRecherche {
 margin:0%;
 padding:5px 2% 30px 2%;
 width:77%;
 background-color:#66CCFF;
 voice-family:"\"}\"";
 voice-family:inherit;
 width:73%;
}
html>body .divRecherche {width:73%;}
 
.divRecherche h1 {
 font-weight:bold;
 font-size:14pt;
 text-align:left;
 color:black;
}
 
#divNewsCont {
 float:right;
 width:22%;
 padding:0%;
 margin:0.5%;
 height:120px;
 visibility:hidden;
 overflow:hidden;
 background-color:white;
 border:1pt solid black;
 voice-family:"\"}\"";
 voice-family:inherit;
 width:20%; /* difference sur border */
 
}
 
#divNewsCont h1 {
 font-size:10pt;
 font-weight:bold;
 text-align:center;
}
 
#divNews {
 position:relative;
}  
 
.divResultat {
 background-color:red;
 margin:0%;
 padding:2%;
 width:100%;
 voice-family:"\"}\"";
 voice-family:inherit;
 width:96%;
}
html>body .divResultat {width:96%;}
 
 
/**********************************************/
/*********  MENU VERTICAL DE GAUCHE  **********/
/**********************************************/
 
ul.menu {
 position:absolute;
 left:0%;
 width:20%;
 list-style-type:none;
 margin:0%;
 padding:0%;
 text-align:left;
}
 
ul.menu a {
 margin:0; padding:0;
 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;
}
 
 
/**********************************************/
/*********  Formulaire et Tableau  ************/
/**********************************************/
 
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 :&nbsp&nbsp
  <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>


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

Reply

Marsh Posté le 12-08-2004 à 17:47:11   

Reply

Marsh Posté le 12-08-2004 à 17:56:04    

Désolé, petit problème de format sur la liste des problèmes
_____________________________________________________________________  
 
=> PB UNIQUEMENT SOUS IE 6  
- le menu n'occupe pas toute la hauteur de la page
 
=> PBS COMMUNS A IE 5.5 ET IE 5.01
- présence d'espace avant et/ou après sur les liens du menu
- le bloc divContenu ne prend pas toute la largeur restante de la page  
- la largeur du bloc divRecherche est réduite  
 
=> PB UNIQUEMENT SOUS IE 5.01  
- les titres du menu ne sont pas sur toute la largeur
- le style h1 de divNewsCont ne s'applique pas  
______________________________________________________________________
 

Reply

Sujets relatifs:

Leave a Replay

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