[CSS] [IE] width auto non reconnu

Fermé
trop-gnon Messages postés 16 Date d'inscription lundi 27 février 2006 Statut Membre Dernière intervention 8 juillet 2008 - 5 juil. 2008 à 23:21
trop-gnon Messages postés 16 Date d'inscription lundi 27 février 2006 Statut Membre Dernière intervention 8 juillet 2008 - 8 juil. 2008 à 12:14
Bonjour,

IE Grrrrrrrrrrrrrrrrr!

J'ai un souci avec un bloc div (deux en fait) dont la largeur (identique pour chacun) doit s'adapter au contenu. j'ai ainsi deux blocs div l'un dans l'autre:

<div class="donneeslogo" >
      <div class="donnees" >

      <?php echo... texte dynamique ;  ?>

      </div> <!-- fin bloc donnees -->
</div> <!-- fin bloc donneeslogo -->


mon but est de placer un logo au dessus du texte dynamique.

j'ai fait ça:

.donnees {
position: relative;
font-size: 30px;
font-style: oblique;
color: #990000;
background-color: #000000;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #990000;
border-right-color: #990000;
border-bottom-color: #990000;
border-left-color: #990000;
height: 40px;
margin-top: 60px;
padding-right: 10px;
padding-left: 10px;
width: inherit;
}

.donneeslogo {
color: #990000;
float: right;
position: relative;
top: -82px;
right: 30px;
height: 100px;
margin-bottom: -82px;
background-image: url(../Pics/logomontagne.gif);
background-repeat: no-repeat;
background-position: left bottom;
border: 2px dotted #00CC00;
width: auto;
}

et ça donne ça : http://www.regards.coin-pomme.com/terrephoto.php

La zone concernée est encadrée en pointillés verts.
et bien entendu, ça marche sous FF, mais ça bugg sous IE7 et autres probablement (et il n'y a pas que ça qui bugg sous IE, mais chaque chose en son temps!)

ma version sans logo fonctionnait très bien (pour ce point précis) sous les deux navigateurs, par exemple sur cette page :

http://www.regards.coin-pomme.com/astrophoto.php

Je crois comprendre que mes blocs div (données et donnéeslogo) dont la largeur n'est pas fixée, prend la largeur du premier bloc parent dont la largeur est fixée (ici le bloc "rouge" dont cette dernière est fixée à 780px)

Quelqu'un voit-il une solution, quitte à repenser un peu mes imbrications de bloc div?

Merci d'avance aux âmes charitables jetant un oeil jusqu'au bout ce ce post. Et un énorme MERCI pour celui ou celle qui me lancera sur une piste exploitable.

TG.

PS: j'ai déjà essayé de triturer l'argument du width de mes deux blocs div, plusieurs combinaisons (auto, inherit, voire rien du tout) fonctionnent sous FF, aucune ne fonctionne sous IE! (IE Grrrrrrrrrrrr!)
A voir également:

1 réponse

trop-gnon Messages postés 16 Date d'inscription lundi 27 février 2006 Statut Membre Dernière intervention 8 juillet 2008
8 juil. 2008 à 12:14
Bon, j'ai trouvé cette solution :

.donneeslogoDemi-lune {
color: #0066FF;
float: right;
position: relative;
top: -82px;
right: 30px;
height: 100px;
margin-bottom: -82px;
background-image: url(../Pics/logodlune.png);
background-repeat: no-repeat;
background-position: left bottom;
?width: 100px ;
}

l'astuce est située à la dernière ligne : ?width: 100px ;

le "?" permet de donner une instruction seulement pour IE (6 et 7), ce qui corrige mon bug (un de mes bugs)

J'attends un peu avant de fermer le post, au cas ou quelqu'un trouve une solution plus propre.

Merci tout de même, TG.
0