Petit décalage de CSS apercu sur PC

[LadiePassyon]

Bonjour,

Alors voilà www.mikimya.com/aspirlux

Sous mac tout est beau (de chez moi ). : Safari

Par contre sur PC : http://www.danvine.com/iecapture/detail/fl...ya.com/aspirlux

On remarque un petit décalage avec le titre Aspirlux.

J'aimerais savoir comment regler ce probleme.

Merci de m'en donner des nouvelles le plus vite possible.

[LaurentDenis]

Hum... ce petit décalage, c'est bien que ta <div id="titre_site"> déborde de quelques pixels vers le bas et recouvre la bordure de <div id="header"> ?

Il est dû au modèle de boîte (mode de calcul des hauteurs et des largeurs des blocs). IE5 et IE5.5 utilisent un modèle microsoft pour lequel il faut prévoir des dimensions spécifiques en utilisant par exemple le box model hack:

#titre_site  {
...
position: absolute;
top: 119px;
voice-family: "\"}\"";
voice-family:inherit;
top: 120px;
}
html>body #titre_site {
  top: 120px;
}

En supposant ici que le décalage est de 1px : on envoie à IE un top: 119px; et on rétablit pour les "bons" navigateurs un top: 120px;

Voir http://openweb.eu.org/articles/dimensions_boites_css/

Au passage, es-tu sûr que le float:left sert à quelque-chose pour #titre_site ?

D'autre part, plutôt qu'un

 
<div id="header">
    <div id="titre_site">Aspirlux Beauport enr.</div>
</div>

Pourquoi ne pas utiliser l'élément <h1> qui est fait pour ça ?

 
<div id="header">
    <h1>Aspirlux Beauport enr.</h1>
</div>

Et pour indiquer ce que signifie ce mystérieux enr. (je suppose que ça ne doit pas être enragé :

<h1>Aspirlux Beauport <acronym title="enragé">enr</acronym>.</h1>

[pierredureau]

Je n'aime pas le box model hack, il fait trop bricolage et je crois me souvenir qu'il pertube le validateur CSS.

Pour ma part, je préfère la technique consistant à mettre le doctype XHTML sans mettre l'en-tête XML. C'est qui a pour conséquence de passer IE en mode standard sans perturber els autres navigateurs et en restant conforme.

Je me réfère à la même page que Laurent Denis (Openweb est vraiment une référence) :

http://openweb.eu.org/articles/dimensions_boites_css/

Cette techniqe est expliquée et appelée DoctypeSwitching. Je voudrais juste rajouter que, contrairement à ce qui est dit sur cette page, le DTSwitching fonctionne aussi sur des IE 5.x, en tout cas sur ceux de mon école. Il doit exister des mise à jour ou des SP qui donne à IE5.x cette capacité.

[LaurentDenis]

Je voudrais juste rajouter que, contrairement à ce qui est dit sur cette page, le DTSwitching fonctionne aussi sur des IE 5.x, en tout cas sur ceux de mon école. Il doit exister des mise à jour ou des SP qui donne à IE5.x cette capacité.

Je ne suis peut-être pas très bien réveillé ce matin, mais il n'y aurait pas une petite confusion entre

- IE5 Windows, qui ne supporte pas le doctype switching,

- et IE5 Mac, qui a été le premier navigateur à implémenter le doctype switching ?

Ou alors, tu utilises http://dean.edwards.name/IE7/ pour les IE5 windows, qui rétablit le modèle de boîte standard, mais au prix d'un hack beaucoup plus lourd que le box model hack.

Sinon, sur le fond du box model : ma préférence va à la solution la plus valide, c'est à dire des dimensionnements suffisamment fluides pour se dégrader correctement dans le box model Microsoft, sans qu'aucun hack ne soit nécessaire... Contrôler un rendu au pixel près est certes très tentant, mais pas dans l'esprit des CSS, qui est d'indiquer et non de figer le rendu utilisateur.

[pierredureau]

Moi non plus je n'étais pas très bien reveillé et j'ai fait la confusion dont tu parles. Je suis incorrigible, mais je ne devrais plus laisser des messages lors que je rentre de soirée ivre ou à mes reveils difficiles.

Sinon, bug ou pas, mac ou win. Je réitère que je préfrère le DoctypeSwitching aux hacks.