css mozilla/ie

Marsh Posté le 06-08-2004 à 17:55:04

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

Reply

Marsh Posté le 06-08-2004 à 17:55:04

Reply

Marsh Posté le 06-08-2004 à 18:05:14

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

Reply

Marsh Posté le 06-08-2004 à 22:24:39

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+

Reply

css mozilla/ie

Sujets relatifs:

Leave a Replay