[Html] Au pays des navigateurs boulay

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Html] Au pays des navigateurs boulay

hop le fou

Tu m'en diras tant

C est bien marrant (enfin marrant question de point de vue ):
je teste une page html sur
- ie6
- opera 6
- netscape6
- opera7

opera 6 n'arrive a comprendre ceci : margin-top : 4%; alors que ca passe tres bien dans le validateur (css1)
il calcule les % d'une manière bien étrange, c le seul a me faire n importe quoi (cadre pas aligné dans un tablo alors que les colonnes des lignes se répartissent bien (sans parler du positionnement qui ma tellement soulé qu il est passé a la trappe... paske aucune correspondance sur les différents navigateurs... :pfff: )

netscape quand a lui ne comprend pas vertical-align : bottom; pas plus que text-align : right;

g pas eu trop de probleme avec ie6 (si si fo me croire... ) et opera 7 non plus

mais bon ca devient navrant ce genre de différences, surtout que tout est validé par w3c...

je suis déçu...

Publicité

sibelius

Vous êtes sûr ?

Une page validée, n'empêche pas d'avoir un code illogique... donc interprêté différemment.

Opera (et les autres) calcule très bien les %... mais ça doit être le reste du code qui doit lui paraître illogique.

Url ?

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

Profil supprimé

wai je testarait bien avec mon moz

burgergold

5$? va chez l'diable!

Selon moi, faut ca passe avec IE6, Mozilla, et les ptits derniers si tu veux t'amuser c opera et IE 5.5 (encore beaucoup utilisé malheureusement)

---------------
http://www.boincstats.com/signature/user_664861.gif

Profil supprimé

opera tray bien [:mmmfff]

moz quand ca merde sur op, car il a un comportement proche de ie à mon gout

hop le fou

Tu m'en diras tant

pas d URL... g pas l'acces au serveur a mon boulot (je suis stagiaire...)

tout ce que je peux faire c mettre le code ici...

par contre il manquera les fichier images aussi...

page html :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>SADA Assurances</TITLE>
<META name="description" content="">
<META name="keywords" content="">
<META name="author" content="SADA Assurances">
<META name="generator" content="WebExpert 5">
<LINK href="style.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<DIV class="PageHaut">
<TABLE class="haut" cellspacing="0" cellpadding="0">
<tr>
<td class="Z2"> </td>
<td class="Z1"> </td>
<td class="ImageBordure"><IMG src="logo_petit.gif" class="ImageBordure" alt="Presentation"></td>
<td class="Z1"> </td>
<td class="ImageLien"><A href="../../www.sada.fr/vehicules_avec_index.htm"><IMG src="Images/Automobile.gif" alt="Automobile" class="ImageLien"></A></td>
<td class="Z1"> </td>
<td class="ImageLien"><A href="../../www.sada.fr/personnes_avec_index.htm"><IMG src="Images/Personne.gif" alt="Personne" class="ImageLien"></A></td>
<td class="Z1"> </td>
<td class="ImageLien"><A href="../../www.sada.fr/multirisque_artisans_commercants_avec_index.htm"><IMG src="Images/Professionnels.gif" alt="Professionnels" class="ImageLien"></A></td>
<td class="Z1"> </td>
<td class="ImageLien"><A href="../../www.sada.fr/multirisque_habitation_avec_index.htm"><IMG src="Images/Habitation.gif" alt="Habitation" class="ImageLien"></A></td>
<td class="Z1"> </td>
<td class="ImageLien"><A href="../../www.sada.fr/multirisque_immeuble_avec_index.htm"><IMG src="Images/Immeubles.gif" alt="Immeubles" class="ImageLien"></A></td>
<td class="Z2"> </td>
</tr>
</TABLE>
</DIV>
<DIV class="PageBas">
<table class="bas" cellspacing="0" cellpadding="0">
<tr>
<td class="Z2"> </td>
<td class="Z1" rowspan="2"><IMG src="carrevert2.gif" class="CarreVert" alt="Découvrez les avantages de la proximité"></td>
<td class="Texte">Découvrez</td>
<td class="Z1"> </td>
<td class="TexteAuto">Automobile</td>
<td class="Z1"> </td>
<td class="TextePers">Personne</td>
<td class="Z1"> </td>
<td class="TextePro">Profesionnels</td>
<td class="Z1"> </td>
<td class="TexteHab">Habitation</td>
<td class="Z1"> </td>
<td class="TexteImm">Immeubles</td>
<td class="Z2"> </td>
</tr>
<tr>
<td class="Z2"> </td>
<td class="Texte2">les avantages<br/>de la proximité</td>
<td class="Z4" colspan="10"> </td>
</tr>
</table>
<IMG class="Absolu" src="logo2.gif" alt="Logo">
<DIV class="TexteAdresse">
<P><SPAN class="Gras">Nîmes</SPAN><BR/>
4, rue Scatisse <br/> 30934 NÎMES Cedex 9
<P> Tél. : 04 66 62 70 00<br/>Fax : 04 66 38 26 60 <br/>www.sada.fr
<P class="GroupeDevk"> Groupe <SPAN class="TexteVert"> DEVK </SPAN><DIV class="TexteRelatif">A chaque passion son assurance.</DIV>
</DIV>
</DIV>
</BODY>
</HTML>

et la feuille de style

Code :

@charset "iso-8859-1";
BODY {
margin-top: 2px;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 2px;
}
DIV.PageHaut {
background : #c0e080;
border : 1px solid green;
}
DIV.PageBas {
border-bottom : 1px solid green;
border-right : 1px solid green;
border-left : 1px solid green;
}
TABLE.haut {
width : 100%;
}
TABLE.bas {
width : 100%;
}
TD.Z1 {
width : 2.2%;
}
TD.Z2 {
width : 4.4%;
}
TD.Z4 {
width : 60%;
}
IMG.ImageLien {
width : 100%;
border : 0px;
}
TD.ImageLien {
vertical-align : bottom;
margin-bottom : 0px;
width : 10.8%;
}
IMG.ImageBordure {
width : 99%;
border-top : 1px solid green;
border-right : 1px solid green;
border-left : 1px solid green;
margin-top : 4%;
}
TD.ImageBordure {
margin-bottom : 0px;
width : 24%;
}
IMG.CarreVert {
margin-right : 0px;
width : 100%;
}
TD.Texte {
font-weight : bold;
font-size : 18pt;
border-right : 1px solid green;
border-left : 1px solid green;
padding-left : 1em;
padding-top : 5px;
width : 24%;
}
TD.Texte2 {
font-weight : bold;
font-size : 18pt;
border-right : 1px solid green;
border-left : 1px solid green;
border-bottom : 1px solid green;
padding-left : 1em;
padding-bottom : 10px;
width : 24%;
}
TD.TexteAuto {
font-weight : bold;
font-size : 11pt;
color : #ffffff;
background : red;
text-align : center;
width : 10.8%;
}
TD.TextePers {
font-weight : bold;
font-size : 11pt;
color : #ffffff;
background : green;
text-align : center;
width : 10.8%;
}
TD.TextePro {
font-weight : bold;
font-size : 11pt;
color : #ffffff;
background : blue;
text-align : center;
width : 10.8%;
}
TD.TexteHab {
font-weight : bold;
font-size : 11pt;
color : #ffffff;
background : yellow;
text-align : center;
width : 10.8%;
}
TD.TexteImm {
font-weight : bold;
font-size : 11pt;
color : #ffffff;
background : orange;
text-align : center;
width : 10.8%;
}
DIV.TexteAdresse {
font-size : 10pt;
padding-left : 7em;
}
P.GroupeDevk {
font-weight : bold;
line-height : 16pt;
}
SPAN.Gras {
font-weight : bold;
}
SPAN.TexteVert {
font-weight : bold;
color : green;
}
IMG.Absolu {
float : right;
width : 20%;
margin-right : 20%;
}
DIV.TexteRelatif {
text-align : right;
font-weight : bold;
font-size : 11pt;
margin-right : 2em;
margin-bottom : 1em;
}

oui c un peu lourd a mettre le code comme ca mais je pe pas faire autrement...

petite question en passant :
j ai une image dans une cellule d'un tableau : g défini une taille pour la cellule (en % bien sur) et l'image a 100% dans la cellule ==> probleme, si l'image de base est plus grande que la taille définie en % de la page, l'image agrandie la cellule et donc agrandie la page par la meme occasion...
ya pas d autre solution que de redimensionner l'image (cela ne me pose aucun problème mais bon...)

sibelius

Vous êtes sûr ?

Bah : voir des balises en majuscule, ça me suffit déjà :non:

Citation :

La grammaire du XHTML répond à certaines règles :
· Les noms des balises et des attributs sont en minuscules.
On écrit : <p> et plus <P>.
· Les valeurs des attributs sont entre doubles quotes.
On écrit : <p align="center"> et plus <p align=center>.
· Tout attribut doit impérativement avoir une valeur.
On écrit : <table border="1"> et plus <table border>.
· Toute balise ouvrante doit être refermée.
On écrit : <p>blabla</p> et plus <p>blabla.
· Toutes les balises sont ouvrantes.
On écrit : <br /> et plus <br> ou encore : <hr width="50%" /> et plus < hr width="50%" >.
· Les balises doivent être correctement imbriquées.
On écrit : <p><i>blabla</i></p> et pas <p><i>blabla</p></i>.
Tout document qui se conforme strictement à ces règles sera dit bien formé.

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

hop le fou

Tu m'en diras tant

SIBELIUS a écrit :

Bah : voir des balises en majuscule, ça me suffit déjà :non:

Citation :

ou tu as vu que je faisais du Xhtml?
je fais juste du html

Les noms des éléments sont écrits en lettres majuscules (par exemple, BODY). Les noms des attributs sont écrits en lettres minuscules (par exemple, lang, onsubmit). Rappelez-vous que les éléments et les attributs HTML sont indifférents à la casse ; la convention d'écriture est élaborée dans un souci de plus grande lisibilité.

--> sur le site de w3c traduit en francais (vu sur la forum des liens ici)

gizmo

c'est quoi cette mise en page à base de tableaux?

hop le fou

Tu m'en diras tant

oui je sais c pas bo...
g bien essayé avec les positions mais je suis arrivé a rien pour l instant...
g juste fait toute la partie haute (avec le fond vert) comme ca dans une autre page mais j arrive pas a aligner les images avec les cadres de textes sinon...
en plus les navigateurs (oui encore eux) interpretent souvent différement les choses alors que je dois avoir qqchose de nickel au pixel pres...

je pense que peut etre que je ne devrais pas redimensionner les images mais je n ai aucune informations a ce sujet concernant la charte graphique...

Publicité

sibelius

Vous êtes sûr ?

Ce que je veux dire, c'est que tant que tu ne seras pas en XHTML (strict) tu t'exposes à des appréciations différentes selon les browsers...

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

hop le fou

Tu m'en diras tant

SIBELIUS a écrit :

Ce que je veux dire, c'est que tant que tu ne seras pas en XHTML (strict) tu t'exposes à des appréciations différentes selon les browsers...

ah c con je savais pas...
je pensais que html strict suffirait (meme si il peut y avoir des différences quand mem)
je pourrais essayer d y passer...
ca m apporterait vraiment qqchose en plus? (du genre moins de différences entre les navigateurs?)

hop le fou

Tu m'en diras tant

c pas possiblede définir une taille pour une cellule de tablo contenant du texte?
avec ie6 ==>

Code :

TD.Texte {
font-weight : bold;
font-size : 18pt;
border-right : 1px solid green;
border-left : 1px solid green;
padding-left : 20px;
padding-top : 5px;
width : 200px;
border : solid black;
}

la largeur donnée ne correspond a rien
g essayé de passé a 300px ==> ca ajoute environ 10px
g essayé de passé a 1300px (dans le doute du bug) ==> ca a ajouté 10 autre px
11300 ==> 10 autres de plus...

incroyable :pt1cable:

pourtant avec les % ca marche a peu pres convenablement
décidement...

Edit : oui le border est redéfini mais c paske je fais plein de test... faites comme si il était pas la...

Message édité par hop le fou le 01-08-2003 à 12:43:17

hop le fou

Tu m'en diras tant

encore une question : ca ne marche pas de faire des border sur un élément tr?
il faut faire tous les éléments TD?

gizmo

si ca marche. mais tu peux le faire sur tout les TD, mais le résultat ne sera pas le même.

hop le fou

Tu m'en diras tant

gizmo a écrit :

si ca marche. mais tu peux le faire sur tout les TD, mais le résultat ne sera pas le même.

ie ma envoyé promené quand g voulu le faire sur les <TR>
par contre sur les td ca marche bien donc je garde ca...

hop le fou

Tu m'en diras tant

dans une cellule de tableau, j ai une image qui ressemble a un carré vert (tres interessant et primordial )

je veux mettre cette image sur le bord droit de ma cellule (sans agrandir mon image)
==> je pense a mettre 0 en marge de l'image

Code :

IMG.CarreVert {
margin-right : 0px;
}

sans résultat

alors je me dis je vais mettre le padding de la cellule a 0

Code :

TD.CarreVert {
padding-right : 0px;
}

ca ne marche pas non plus...
j utilise ie6 ( ) et je ne comprend pas pkoi ce carré ne ve pas faire ce qu on lui demande...

de l'aide siouplé...

EDIT : g essayé float dans la cellule du tableau
ca fonctionne sous ie6 , je teste avec les autres...

Message édité par hop le fou le 01-08-2003 à 16:10:48

the real antp

SIBELIUS a écrit :

Ce que je veux dire, c'est que tant que tu ne seras pas en XHTML (strict) tu t'exposes à des appréciations différentes selon les browsers...

:heink: bah non, ce qui compte c'est que ce soit Strict (HTML 4, XHTML 1.0, XHTML 1.1)
Le fait que ce soit HTML ou XHTML ne doit pas influencer, sauf IE qui buggue si tu mets un en-tete XML a ta page XHTML (en-tete facultatif pour la validation en fait).

hop le fou

Tu m'en diras tant

THE REAL Antp a écrit :

de toute facon mem en strict il y a encore des différences entre les navigateurs (c sur que ca sert a aller vers un standard mais c pas encore ca...)

hop le fou

Tu m'en diras tant

je repose ma question qui est passé tout droit sans avoir de réponse en haut du topic
==> netscape ne reconnait pas text-align : right

Code :

DIV.TexteDroite {
text-align : right;
font-weight : bold;
font-size : 11pt;
margin-right : 2em;
padding-bottom : 12px;
}

keske je peux faire pour remplacer?
je ne pe pas utiliser float:right paske c pas accepté non plus (ce que j avais au début je sais plus si c opera ou netscape qui ma refoulé...)

gizmo

comment ca il ne le reconnait pas? ton texte n'est pas aligné à droite?

hop le fou

Tu m'en diras tant

gizmo a écrit :

comment ca il ne le reconnait pas? ton texte n'est pas aligné à droite?

non il est en plein milieu...

gizmo

en plein milieu? :heink: Tu veux dire centré?

hop le fou

Tu m'en diras tant

gizmo a écrit :

en plein milieu? :heink: Tu veux dire centré?

oui (horizontalement je parle...)
c comme si y avais center au lieu de right mais non c bien right...

étrange...

gizmo

Et c'est utilisé où dans ton texte?

hop le fou

Tu m'en diras tant

comment ca utilisé ou?
c utilisé en bas de page
c marqué dans le code (6post fin de page html) mais g changé pâs mal de truc
ya que ce texte qui subit ce style...

marrant paske c le seul navigateur qui me fait ca...

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

[Html] Au pays des navigateurs boulay

Sujets relatifs
album photo qui scan un rep. et affiche les images sur une page html?	[(X)HTML et Flash] Probleem Mozilla != IE
[Html] Modifier la taille de la police	[HTML/CSS] Support IE 5.5, 6, Mozilla 1.0, 1.2.1, et 1.4
[HTML] rendre une image flottante et "persistante"	[HTML] Adapter la hauteur de ce qu'on veut afficher
Tableau trop grand en html?	[HTML/JS] Ouvrir un lien dans une nouvelle fenêtre ?
[HTML] Enregistrer un .htm au lieu de l'ouvrir ?	[HTML] Comment éviter de copier-coller du code sur chaque page ?
Plus de sujets relatifs à : [Html] Au pays des navigateurs boulay

Page générée en 0.132 secondes