Problème "float: right;" sous IE

  • Auteur de la discussion marsien
  • Date de début

marsien

Grand Maître
Salut à tous,

J'ai un petit problème avec des conteneurs flottants dans IE.

PLutôt que des mots, une simple comparaison entre ce qui marche (Firefox et Opera) et ce qui ne marche pas (IE) permet de comprendre le problème.

Firefox et Opera :
Vous devez être connecté pour voir les images.


IE :
Vous devez être connecté pour voir les images.




Pour les coutons "suiv" et "prec", j'ai utilisé un conteneur div en "float: right"

Voici le bout de code html correspondant :
[cpp]
<div id="principal">
<div class="imgnav">
<div class="imgprevious"><a href="/Page_perso/version_php/zen.php?album=test6&image=Image22.jpg" title="Previous Image">&laquo; prec</a></div>
<div class="imgnext"><a href="/Page_perso/version_php/zen.php?album=test6&image=Image24.jpg" title="Next Image">suiv &raquo;</a></div>
</div>
<div id="gallerytitle">
<h2><span><a href="/Page_perso/version_php/zen.php?page=1" title="Gallery Index">Mes Photos</a>
| <a href="/Page_perso/version_php/zen.php?album=test6&page=1" title="Gallery Index">test6</a>
| </span> Image23</h2>
</div>
<div id="image">
...
[/cpp]

Et le bout de css associé
[cpp]
#image {
text-align: center;
line-height: 0;
}


/* !-- Image navigation --! */
.imgnav {
float: right;
width: 140px;
margin-right: 110px;
text-align: center;
border: 1px #028b00 solid;
background: #dbffd9;
}

.imgnav .imgprevious a, .imgnav .imgnext a {
display: block;
width: 50%;
height: 100%;
float: left;
padding: 4px 0;
font-size: 0.7em;
text-decoration: none;
color: #ef6500;
}

.imgnav .imgprevious a:hover, .imgnav .imgnext a:hover {
background-color: #ffffff;
text-decoration: none;
color: #ef6500;
}

.imgnav .imgprevious a {
float: left;
}

.imgnav .imgnext a {
float: right;
}


/* !-- Title --! */
#gallerytitle {
width: 600px;
margin: auto;
border-bottom: 1px #028b00 solid;
padding-bottom: 14px;
margin-bottom: 12px;
_margin-top: 40px; /* IE Only */
}

h2 {
color: #028b00;
margin-top: 25px;
font-size: 1em;
font-weight: normal;
}

h2 a {
background: #ffffff;
color: #ef6500;
text-decoration: none;
}

h2 a:hover {
border-bottom: 1px #ef6500 solid;
}
[/cpp]

Quelqu'un pourrait-il m'expliquer comment je dois expliquer à IE d'aligner ces boutons "Suiv" et "Prec" avec le titre de la galerie de photo... :/

Merci pour votre aide précieuse :)

Votre dévoué, marsien :D
 

KangOl

Grand Maître
enleve moi ce php du code, il embrouille plus qu'autre chose, donne le code généré ...
 

KangOl

Grand Maître
je demande peut etre beaucoup mais tu as une url ou on peut tester ?
 

Johan_et_Pirlouit

Grand Maître
Un truc bête : ton 'gallerytitle' fait 600px de large et ton 'imgnav' est placé avant lui.. De fait, IE ne peut que placer 'gallerytitle' à la ligne, vu que dans 'principal' il n'a pas la place de mettre les deux sur la même ligne..

Une soluce éventuelle : tu places ton 'gallerytitle' à gauche dans 'principal' avec 'text-align: left' pour 'principal' et tu ne lui appliques pas de largeur..

Donc, un truc du genre :
Code:
#principal {
    width: 600px; // si telle est sa largeur
    text-align: left; // alignement du texte à gauche, pour placer 'gallerytitle' à gauche ou une marge nulle à gauche pour 'gallerytitle'
    }

#gallerytitle { // pas de largeur définie, pas de marge latérale définie ou 'margin-left: 0px'
    border-bottom: 1px #028b00 solid; 
    padding-bottom: 14px; 
    margin-bottom: 12px; 
    _margin-top: 40px; /* IE Only */ 
    }

:merci:
 

marsien

Grand Maître
Merci à tous les 2 :) :merci:

Kangol, je n'ai pas encore de version en ligne de ce code pour le moment, je ne l'ai qu'en local, ayant encore pas mal de boulot avec mes petites compétences pour que mon code php remplisse son office.

Johann & Pirlouit, mais que ferais-je sans toi ! Ta piste était la bonne, même si je ne pouvais pas redimensionner directement le div principal. Et maintenant ça marche nichel, voire même mieux qu'avant sous IE (heureusement), mais aussi sous tous les navigateurs autres que IE :) Pfffiou, mais comment tu fais pour toujours penser à la bonne solution, celle de la simplicité ?!
Tu es vraiment très fort, et j'ai encore beaucoup à apprendre pour t'arriver ne serait-ce qu'à la cheville. Encore merci :merci:
 

Johan_et_Pirlouit

Grand Maître

Vas-y, fais passer la valise de billets...... :D

J'déconne ;)..


A force de chercher à faire des choses visuelles pas toujours évidentes à mettre en oeuvre, pour finir par m'apercevoir que c'est souvent beaucoup plus simple que je ne le pense et que parfois des fonctions spécifiques existent déjà :D...

C'est surtout de passer son temps à constater les différences entre les navigateurs et leurs réactions dans certains cas..

Un petit truc pour comprendre visuellement comment sont traîtés nos objets est de leur attribuer une bordure temporaire du genre 'border: 1px solid #ff0000;'.. Ainsi, on voit bien comment chaque moteur de rendu place l'objet concerné.. Mais il faut toujours tenir compte du fait que la bordure est ajoutée au calcul de l'aire finale de l'objet.. Parfois, cette simple bordure provoque des décalages non désirés, notamment avec IE : dans un bloc de 600px de large qui en contient deux sur la même ligne de 300px chacun, le second passera sous le premier avec une bordure déclarée : (300px + 2px de bordure totale) x 2 blocs = 604px.. Ca dépasse du conteneur qui est défini à 600px, ça part à la ligne avec IE et pas forcément avec FF ou Opera..

(Sinon : nickel [:al0y] ;).. Au fait : tu as compté les fautes dans mon dernier mail :whistle: ?)


Que tu crois ;)..

:merci:
 
Vous devez vous inscrire ou vous connecter pour répondre ici.
Derniers messages publiés
Statistiques globales
Discussions
730 098
Messages
6 717 049
Membres
1 586 282
Dernier membre
Yannick3553
Partager cette page
Haut