[HTML/js] Hauteur d'un bloc <div> sous Mozilla

Marsh Posté le 20-02-2004 à 12:32:04

j'ai 2 <div> imbriqués :

Code :

<div class="bloc1">
<div>pouet</div>
</div>

Voici la classe CSS :

Code :

.bloc1 {
border: 1px solid #777763;
height: 35px;
}
.bloc1 div {
display: inline;
list-style-type: none;
padding: 0px 35px;
border: 1px solid #DDDDDD;
height: 35px;
}

Je veux fixer la hauteur de tous les <div> contenus dans 'bloc1' à 35 pixels. Sous IE, pas de problème. Mais avec d'autres naviguateurs comme Mozilla, çà veut pas !
Quelqu'un a une solution ?

Un exemple ici --> YEP
-> Sous IE le cadre blanc fait bien 35 pixels de hauteur, mais sous Mozilla il est plus petit.

Si on enlève le "display: inline", çà résoud le problème. Mais j'ai besoin de cette propriété, je l'utilise pour mettre une liste (<ul> ; boite en bloc par défault) en ligne.

Thx

Reply

Marsh Posté le 20-02-2004 à 12:32:04

Reply

Marsh Posté le 20-02-2004 à 12:34:56

En effet c'est à cause du inline. Mais tu peux l'enlever et l'appliquer juste à ton <ul> plutôt qu'à ton <div> non ?

Message édité par fastclemmy le 20-02-2004 à 12:35:14

Reply

Marsh Posté le 20-02-2004 à 13:05:27

Si tu mets le 2e div en inline, alors ensuite la hauteur de ce dernier est la hauteur de la ligne... Don c'est normal que la propriete "height" se soit pas prise en compte. A la limite tu peux essayer avec "line-height"...

De plus la propriete "list-style-type: none;" est pour les listes par pour les divs...

Comme l'a dit fastclemmy, il vaudrait mieux laisser ce div en "block" et appliquer les proprietes voulues a ta liste....

PS : Je suis pas sur a 100% de mes propos, j'espere n'avoir pas dit une betise grosse comme un camion...

Reply

Marsh Posté le 20-02-2004 à 13:41:25

yep il vaut mieux que j'applique les propriétés à la liste. Mais toujours le même problème grrr.

et line-height ne donne malheureusement pas le résultat attendu.

Code HTML :

Code :

<div class="test">
<ul><li>AAA</li>
<li>BBB</li>
<li>CCC</li></ul>
</div>

CSS :

Code :

.test {
border: 1px solid #777763;
height: 80px;
}
.test ul{
border: 1px solid #96FD3B;
margin: 0;
padding: 0;
height: 60px;
}
.test li{
border: 1px solid #DDDDDD;
display: inline;
list-style-type: none;
padding: 5px 5px;
height: 40px;
}

- L'exemple ICI -
--> Notez que sur IE çà fonctionne, mais sous Mozilla non
De plus, les cadres blancs <li> sont décalés vers le haut sur Mozilla.

Message édité par sephiburp le 20-02-2004 à 13:43:49

Reply

Marsh Posté le 20-02-2004 à 14:54:06

Je te conseille d'aller faire un tour sur ces deux sites :

http://openweb.eu.org
http://www.alsacecreations.com/articles

Je te propose notament la lecture de cet article :
http://www.alsacreations.com/articles/menu/
Dont tu peux voir un exemple ici :
http://www.alsacreations.com/artic [...] smenu2.htm

Reply

Marsh Posté le 20-02-2004 à 16:40:06

Yes ! apparament je vais pouvoir trouver ma solution

merci beaucoup Cerel, je connaissais pas ce site, il a l'air bien foutu

Edit : yep, le truc c'est d'utiliser un mode block et non en ligne, avec un float: left;

:bounce:

Message édité par sephiburp le 20-02-2004 à 16:41:46

Reply

[HTML/js] Hauteur d'un bloc <div> sous Mozilla

Sujets relatifs:

Leave a Replay