28111 sujets

CSS et mise en forme, CSS3

IE 7 : problème de marge…

Bonjour à tous,

je suis un petit nouveau ici et débutant en CSS… et déjà, des soucis avec IE 7 :
ce dernier ne veut pas afficher correctement une image de fond (fond_essai.jpg) en 200 * 200 (de la même taille que la page qui est ouverte grace à un "window.open") et me comprime l'image en 150 * 200 en me générant une marge blanche à droite de la page.

Une idée sur le problème ?

D'avance, merci beaucoup



Code de la page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>@ Contact</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<style type="text/css">
#fond {
position: absolute;
width : 200px;
height: 200px;
left: 0px;
top: 0px;
border: 0px;
background: url(fond_essai.jpg) top left no-repeat;
}
    
#texte1 {
position: absolute;
left: 30px;
top: 29px;
font-family: arial, sans-serif;
font-size: 13pt;
color: #3399FF;
background-color: transparent;
z-index: 2;
}

#texte1ombre {
position: absolute;
left: 31px;
top: 31px;
font-family:arial, sans-serif;
font-size: 13pt;
color: #000000;
background-color: transparent;
z-index: 1;
}

#texte2 {
position: absolute;
left: 45px;
top: 59px;
font-family: arial, sans-serif;
font-style: italic;
font-size: 13pt;
color: #3399FF;
background-color: transparent;
z-index: 2;
}

#texte2ombre {
position: absolute;
left: 46px;
top: 61px;
font-family: arial, sans-serif;
font-style: italic;
font-size: 13pt;
color: #000000;
background-color: transparent;
z-index: 1;
}

#bouton_blog {
position: absolute;
width: 120px;
height: 40px;
left: 40px;
top: 108px;
border: 0px;
background: url(bt_blog.gif) top left no-repeat;
z-index: 1;
}

#bouton_blog:hover {
background: url(bt_blog_over.gif) top left no-repeat;
z-index: 1;
}

#bouton_email {
position: absolute;
width: 120px;
height: 40px;
left: 40px;
top: 158px;
border:0px;
z-index: 1;
}

</style>
<script language="Javascript"><!--
function Fenetre_blog() {
    var marge_horizontale = screen.width/2-360;
window.open('http://css.alsacreations.com/','fenetre5','scrollbars=yes,toolbars=yes,location=yes,status=yes,menubar=yes,resizable=yes,directories=no,width=720,height=540,left=' + marge_horizontale + ',top=30');
}
// --></script>
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;" onload="window.focus();">
    <div id="texte1">Pour me contacter</div>
    <div id="texte1ombre">Pour me contacter</div>
    <div id="texte2">To contact me</div>
    <div id="texte2ombre">To contact me</div>
<div style="display: none;"><img alt="" src="bt_blog_over.gif" /></div>
<div id="fond">
    <a id="bouton_blog" href="http://css.alsacreations.com/" target="_blank" title="" onClick="Fenetre_blog(); return false;"></a>
	<a id="bouton_email" href="mailto:proudhon@netcourrier.com?subject=contact"><img style="border: 0px solid ; width: 120px; height: 40px;" name="bouton_email" src="bt_email.gif" alt=""></a>
</div>
</body>
</html>


Lien :

http://www.proudhon.kokoom.com/test_essai.html



P.S : merci à Igor pour ses précisions sur le fonctionnement du forum Smiley confused
Modifié par Proudhon (26 Jun 2007 - 23:20)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
J'ai consulté les FAQ et les tutoriaux sur Alsacréations (notamment concernant les doctypes et le quirk mode d'IE) mais rien qui puisse, à mon niveau, expliquer ce problème d'affichage.
Quelqu'un aurait-il pitié du débutant que je suis ? Smiley smile

Merci…
Salut,

j'aimerais bien savoir ce que vient faire ce code dans ta page Smiley confus :
function Alerte() {
if(TestString == 'echec' || TestString == null)
{
window.resizeTo(680,430);
}
else
{
window.location.replace('http://css.alsacreations.com/');
}
}
En plus d'être agaçant (d'avoir le navigateur redimensionné et/ou d'être redirigé vers une page qui n'a rien à voir avec ton problème Smiley fache ) je ne vois pas l'intérêt ni le rapport avec l'ouverture de ta popup...

En attendant que tu l'enlèves... A+
Enlever le blocage des pop-up de mon navigateur ? Ben pourquoi faire, pour me prendre des pop-up non sollicitées dans la figure ? Ça donne pas trop envie de le faire.

Sinon, le problème principal pour cette page me semble être l'hébergeur, qui rajoute ses bouts de code à chaque page.
Bonsoir Heyoan et Florent,
le code JS dont vous parlez est un canvas (pour un site avec plusieurs fenetres à l'écran) pour un test de verif si le navigateur accepte les popup :
1) affichage de la page de test aux dimensions minimale (200 * 200 et non en 100 * 100 pour eviter des problemes d'affichage sur certains navigateurs) contenant un texte d'alerte au blocage des popup.
2) obligation d'agrandir la page de test à 640 *430 pour rendre lisible le contenu du texte (si blocage de la popup)
2) si popup non bloquée , la fonction window.location.replace sert alors à remplacer le contenu de la page de test (impossible à refermée via un window.close ) avec son message d'erreur devenu obsolète par n'importe quel autre page (ici, il s'agit de la page d'accueil d'Alsacréations).

Mais vous avez raison, c'est une erreur de ma part , je viens de supprimer le code JS.

OK pour l'hebergeur mais il reste le probleme de la "marge de droite" sur la page "@ contact " et ca sous IE 7…

Merci
re-Salut,

voilà ce que j'ai avec IE6 :
upload/8634-prodhon.gif

Donc pas de problème de marge à droite (peut-être un problème de taille de fenêtre par contre Smiley murf )

A+

PS1 : je n'ai pas IE7
PS2 : merci d'avoir enlevé ce satané script Smiley ravi
Moi c'est pire, j'ai un mac ! Smiley cligne
Donc, faire des test sous IE et notamment la version 7…
En tout cas, merci Heyoan
Modifié par Proudhon (27 Jun 2007 - 01:28)
Avis aux utilisateurs de IE 7,
quelles sont les dimensions minimale possible d'un fenêtre ?
(Je sais que pour FF, c'est 100*100 pixels)

Merci
Sujet clos
Aller à