[CSS/HTML] Similaire sous IE & Mozilla ? Mission Impossible ?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS/HTML] Similaire sous IE & Mozilla ? Mission Impossible ?

quickman

Bonjour,

hier j'ai eut l'idée un peu farfelu d'un nouveau design que j'aurais aimé utilisé pour mon site web perso, ce serait quelques chose se basant sur des trucs comme ca:

J'ai essayé de le codé, en passant par 36000 manières ... mais j'ai pas réussi a ce que le dessin passe aussi bien sous IE que sous Firefox ...

Quand IE fonctionne *bien* (ironique ?), sous Firefox ca fait un picasso, et quand inversement.

Alors vu que j'ai pas envie d'imprimer ce que génére l'un de ces 2 logiciels quand ils déconnent pour le revendre au Louvre, serait-il possible que je trouve un peu d'aide ici ?

Donc au final j'ai essayé plusieurs manières:
- Tableau : le tout est dans un tableau avec border collapse, les cases de la diagonale 'occupé' ont un border de 1px noire et dans la case de gauche ont retrouve une div avec un border de 1px blanche et un background-color de la couleur désiré ( orange, vert, etc... ), idem pour celle de droite, et pour le milieu, ben background-color: white, et stou ( pour l'instant ).

Bien entendu ca marche pas, et sur les 2

- Tableau SE : là même chose mais on remplace les div dans les cases par des images ( avec un background-image )

Ca marche bien sur l'un ( firefox je crois ) mais pas sur l'autre ...

Sinon les tableaux ca puxx tout ca tout ca donc:
- Vive les CSS : 3 div dans une grosse div, toutes les 3 avec border 1px black, la première et la troisieme ont un background-image et la seconde ( celle du milieu ) un background-color white. Pour la position, j'utilise de l'absolute ...

Si vous m'avez suivi jusqu'ici ( ouah :ouch: ), vous avec peut être une idée du pourquoi du comment que ca marche pas :'( ?

PS: je vais poster le code correspondant à chaque méthode, ce sera ptet plus explicite ...

Publicité

afbilou

pouet your life

Verifie le lien vers l'image ... il ne fonctionne pas !

quickman

afbilou a écrit :

Verifie le lien vers l'image ... il ne fonctionne pas !

exact :jap:

EDIT: réparé

Message édité par quickman le 14-07-2005 à 13:30:17

quickman

Sous Firefox, le coin supérieur gauche d'une div est considéré sans la bordure, contrairement à IE, y a t-il moyen de faire pensser les 2 à l'identiques ?

J'ai fait le code pour la version "Tableau", ca passerait presque ...

Code :

<body>
<table id="tLogo">
<tr>
<td class="pixG"><div class="pixG_2"></div></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td class="pixC"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="pixP"><div class="pixP_2"></div></td>
</tr>
</table>
</body>

Code :

body {
background-color: #EEEEEE;
}
#tLogo {
position: absolute;
top: 15px;
left: 15px;
border-collapse: collapse;
border: none;
}
.pixG {
border: 1px solid Black;
padding: 0px;
}
.pixC {
border: 1px solid Black;
width: 120px;
height: 30px;
background-color: White;
}
.pixP {
border: 1px solid Black;
padding: 0px;
}
.pixG_2 {
width: 10px;
height: 10px;
border: 1px solid white;
padding: 0px;
background-color: #FFA500;
}
.pixP_2 {
width: 4px;
height: 4px;
border: 1px solid white;
padding: 0px;
background-color: #FFA500;
}

EDIT: le rendu
1/ Firefox ( ca passe ) 2/ IE ( ca casse )

Message édité par quickman le 14-07-2005 à 14:00:36

The-Shadow

Développeur
T'as été voir dans ton profil?

le hack de la mort qui tue
border-width:4px;
width:200px;
_width:196px;

ou un truc du genre.

The-Shadow

Développeur
T'as été voir dans ton profil?

Malheureux, une mise en page en tableau sur HFR, ça va saigner. [:amandine75011]

quickman

The-Shadow a écrit :

Malheureux, une mise en page en tableau sur HFR, ça va saigner. [:amandine75011]

Si tu regardes bien j'ai aussi essayé avec des div mais j'y suis pas arrivé :'(
Mais si j'y arriverais, ce serait vraiment super ...

The-Shadow

Développeur
T'as été voir dans ton profil?

Je ne sais pas si j'ai bien compris ton soucis, mais ça, ça n'irais pas (fait pas gaffe aux couleurs et aux dimensions, j'ai pris un peu n'importe quoi).
http://cristalo.online.fr/forums/testdiv.html

quickman

The-Shadow a écrit :

pas tout a fait en fait

Je me suis re-essayé au 'tout CSS' ( enfin presque )

Sous firefox, ca fonctionne nikel, ... sous IE vous l'auriez deviné sans moi, ca merde, ... On dirait qu'il ne tient pas compte du height de mes div :??:

Code :

<body>
<div id="main">
<div id="mLogo">
<div class="pixG"> </div>
<div class="pixC"> </div>
<div class="pixP"> </div>
</div>
</div>
</body>

Code :

body {
background-color: #EEEEEE;
}
#main {
margin-left: auto;
margin-right: auto;
width: 600px;
}
#mLogo {
position: relative;
top: 15px;
left: 15px;
width: 150px;
height: 50px;
}
.pixG {
display:block;
position: absolute;
top: 0px;
left: 0px;
height: 10px;
width: 10px;
background-image: url(../pixG.gif);
border: 1px solid Black;
}
.pixP {
display:block;
position: absolute;
bottom: 0px;
right: 0px;
width: 5px;
height: 5px;
background-image: url(../pixP.gif);
border: 1px solid Black;
}
.pixC {
display:block;
position: absolute;
top: 11px;
left: 11px;
bottom: 6px;
right: 6px;
background-color: White;
border: 1px solid Black;
}

Pour mieux voir le problème, vous pourrez trouver les pages ici:

http://aimless-network.com/Aimless-Network/css/
http://aimless-network.com/Aimless-Network/tableau/

Message édité par quickman le 14-07-2005 à 14:28:07

The-Shadow

Développeur
T'as été voir dans ton profil?

IE ne peut pas faire des blocs plus petit que la hauteur de la ligne.
Rajoute un line-height:2px dans les petits blocs.
quand à pixC, dans ta CSS, je ne vois pas de largeur définie, donc, c'est normal que sous IE il ne s'aggrandisse pas.

Publicité

quickman

The-Shadow a écrit :

Je t'aime :love: Merci !

Bon ben, topic résolu jusqu'à la prochaine vague ...

FlorentG

Unité de Masse

quickman a écrit :

Sous firefox, ca fonctionne nikel, ... sous IE vous l'auriez deviné sans moi, ca merde, ... On dirait qu'il ne tient pas compte du height de mes div :??:

Code :

<body>
<div id="main">
<div id="mLogo">
<div class="pixG"> </div>
<div class="pixC"> </div>
<div class="pixP"> </div>
</div>
</div>
</body>

PS, Parenthèse et précision :   sert à mettre une espace insécable. Ca sert pas à faire un truc vide

FlorentG

Unité de Masse

Ensuite, ce que tu veux faire ne doit pas être fait avec des <div> comme ça. Du moins si tes carrés ne sont que purement décoratif, et qu'ils ne servent à rien d'autre...

The-Shadow

Développeur
T'as été voir dans ton profil?

FlorentG a écrit :

PS, Parenthèse et précision :   sert à mettre une espace insécable. Ca sert pas à faire un truc vide

Mais faut reconnaitre que quand on développe un site, certains div n'apparaissent pas sous IE si on ne les remplis pas un minimum.
Si le div est vide, tu préfèrerais peut-être un <img src="images/imagegiftransparentepourempliretpasalourdirlecode.gif" alt="image gif transparente" /> [:amandine75011]

FlorentG

Unité de Masse

Si le <div> n'apparaît pas, c'est qu'on ne lui a pas donné une dimension

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS/HTML] Similaire sous IE & Mozilla ? Mission Impossible ?

Sujets relatifs
Probleme menu deroulant html/css/javascript	bonne syntaxe CSS pour une page
LaTeX -> HTML	[HTML] - Sous menus qui apparaissent au fur et à mesure des clics
[HTML/PHP] Récupérer données d'un csv	[Dreamweaver] Les raccourcis Dreamweaver pour le CSS ?
[HTML/CSS/Javascript] z-index avec rollover sur image ( zoom CSS )	[HTML] Gros problème de Checkbox
Document Word dans une cellule d'un tableau HTML
Plus de sujets relatifs à : [CSS/HTML] Similaire sous IE & Mozilla ? Mission Impossible ?

Page générée en 0.080 secondes