Css minimaliste et différences IE-FF

**Jipété** · 31/01/2007, 10h31

Bonjour,

(désolé pour ce post sur un pb qui a l'air récurrent, mais ch'suis largué...)

Je crée un style.css minimaliste pour afficher un bandeau top :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.maintop {
     width: 100%;
     height: 115px;
     background-color: rgb(152, 151, 152);
     border-bottom-style: ridge;
}
#imglogo {
     float: left;
     margin-left: 10px;
     margin-top: 5px;
     margin-right: 5px;
     margin-bottom: 0px;
     height: 106px;
     width: 106px
}
h1 {
    font-family: Arial,Helvetica,Verdana,sans-serif;
    font-size: 40px;
    font-weight: bold;
    line-height: 10px;
    color: rgb(128, 0, 0);
}
h3 {
    font-family: Arial,Helvetica,Verdana,sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: lighter;
    color: rgb(128, 0, 0);
}

Le problème est clairement mis en évidence sur l'image attachée : affichage sous FF à gauche, sous IE à droite : c'est vraiment différent ! et si je supprime la ligne "line-height: 10px;", ça devient correct sous IE mais nul sous FF : la seconde ligne s'affiche sous le bandeau,

!
Comment faire pour avoir un affichage correct avec ces 2 navigateurs (si tant est que ça soit possible...) ?
Le code hachteumeuleu :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<!-- The above DOCTYPE and html lines and the meta http-equiv line below the head are critical. DO NOT DELETE them -->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 
<title>Mon titre</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
 
<body>
 
<div class=maintop>
<img src="img.gif" alt="Mon image" id="imglogo">
<br>
<h1>&nbsp;A</h1>
<h3>&nbsp;&nbsp;Association</h3>
</div>
 
Blah&nbsp;!
 
</body>
</html>

Merci d'avance,
--
jp
PS : l'image n'est pas belle mais permet de voir le pb.

**Peut-êtreUneRéponse** · 31/01/2007, 10h51

Tu peux utiliser des commentaires conditionnels pour appeler une feuille de style corrective et spécifique à IE.

**Dan_A** · 31/01/2007, 11h05

Il faut étudier float. ( http://garyblue.port5.com/webdev/floatdemo.html )

**Jipété** · 31/01/2007, 11h06

Merci de ta réponse.

des commentaires conditionnels

Oui, j'ai vu ça partout (je découvre le css et suis vraiment effondré par tant d'incompatibilités

!).
Mais même en suivant le lien donné par Dan_A sur mon autre post, le code que j'y ai trouvé :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* commented backslash hack \*/ 
html, body{height:100%;} 
/* end hack */
html,body {margin:0;padding:0}
#outer{
min-height:100%;
height:auto;
background:#ffffcc;
width:200px;
}
* html #outer{height:100%;}
</style>
</head>
<body>
<div id="outer"> 
<p>content goes here</p>
</div>
</body>
</html>

s'affiche mal, cette fois dans FF (petit bandeau au dessus des 2 colonnes).

C'est vraiment abominable de chez abominable, et j'admire et tire mon chapeau à tous les WebMasters et autres WebDesigners qui arrivent à se dépatouiller de ce merdier infâme et nous font quand même des jolis sites.
Moi, ch'suis à 2 doigts de laisser tomber et garder mes frames qui fonctionnent (même si c'est lourd pour la maintenance...)
--
jp, anéanti...

**MasterOfChakhaL** · 31/01/2007, 11h25

Salut,

Tu peux éventuellement commencer ta feuille de style par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
* {
  margin: 0;
  padding: 0;
}

Ca remet a 0 les marges et les padding de tous les éléments de la page...

Il faudra que tu les redefinisses la ou tu en as besoin, mais ca gommera un certains nombres de différences de rendu visuel par défaut des différents navigateurs.

**Jipété** · 31/01/2007, 20h40

Tu peux éventuellement commencer ta feuille de style par...

+ 1, MasterOfChakahl !

Donc voilà où on en est en ce début 2007 : on trouve des codes sur des sites qui ont l'air pointus, mais quand on copie/colle il faut s'attendre à tout et à n'importe quoi...

Heureusement que dvlp existe,

! (sauf que depuis hier soir, impossible d'accéder aux cours et faq css, grrr !)

Merci encore,
--
jp
PS : désolé pour l'oubli de "=html" dans la balise.