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.

Css minimaliste et différences IE-FF

CSS

Mode arborescent

Discussions similaires

Partager

Partager