Webmaster Hub > Problème d'affichage sous firefox mais pas sous IE

Version complète: sur le forum Webmaster Hub : Problème d'affichage sous firefox mais pas sous IE

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

P.O.K

jeudi 18 septembre 2008 à 10:53

Bonjour,

Je suis un débutant en programmation et tente de créer un site en utilisant une feuille de style.

Après avoir réussi à élimier la plupart de mes problèmes, l'un d'eux persiste... L'une de mes images d'arrière-plan n'apparait pas sous firefox... Voyez vous-même :

Sous IE :

Sous FF :

Le code de la feuille de style :

CODE-BOX

@charset "utf-8";
/* CSS Document */

body {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
margin: 0;
padding: 0;
text-align: center;
background-color : #5F0000;
border-style:hidden;
}

a img {
border:0;
}

html {
height:100%;
margin:0;
}

h1 {
display:none;
margin:0;
}

h2 {
background-color:#FFF;
font-size: 1.1em;
color:#005E5F;
font-weight :bold;
text-align:left;
text-align:justify;
margin:15px 5px 5px 5px;
}

ul {
list-style-type: none;
padding: 0;
margin: 0;
}

li {
list-style-image : none;
padding : 0;
margin : 0;
color: #005E5F;
}

hr {
width:70%;
color:#AC7E7E;
background-color:#AC7E7E;
height:1px;
border: 0;
}

#conteneur {
min-height: 100%;
width: 1009px;
margin: 0 auto;
position: relative;
}

#header {
margin: 0;
margin-top:3px;
height: 235;
background : url(images/header.gif) no-repeat left top;
width:1009px;
}

#conteneurcontenu1 {
margin: 0;
background : url(images/part1.gif) no-repeat left top;
width:1009px;
height:162px;
}

#part1 {
background-color: #FFF;
width:450px;
margin: 0;
margin-left:240px;
}

* html #part1 {
margin-left:0;
margin-right:90px;
}

#conteneurcontenu2 {
margin: 0;
background : url(images/fond.gif) left top;
width:1009px;
height:auto;
}

#contenu {
background-color: #FFF;
float:left;
width:450px;
margin: 0;
margin-left:240px;
}

#conteneurmenu {
width: 160px;
float : left;
background-color:#005E5F;
margin-left:18px;
}

#menuvertical {
width: 150px;
background-color: #005E5F;
margin:0;
margin-left:0;
}

#contenucopy {
margin: 0;
background : url(images/footer.gif) no-repeat left top;
width:1009px;
height:203px;
clear:both;
}

#copyright {
width: 300px;
background-color: #FFF;
margin-left:354.5px;
height:auto;
}

* html #copyright {
margin-left:0;
margin-right:10px;
}

.cont {
margin: 0 5px;
padding: 0;
color : black;
text-align:left;
}

.cont a {
color: #005E5F;
}

.cont2 {
margin: 0 5px;
padding: 0;
color : #999999;
text-align:left;
font-size:9px;
}

.cont3 {
margin: margin: 0 5px;
padding: 0;
color : black;
text-align:right;
font-style:italic;
}

.copy {
text-align:center;
padding-top: 65px;
margin:0;
font-size:9px;
color: #999999;
}

.copy a {
color: #005E5F;
text-decoration:none;
}

Le code de la page :

CODE-BOX

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Association Lachak</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="conteneur">
<div id="header">
<h1 align="center">Association Lachak</h1>
</div>
<div id="conteneurcontenu1">
<div id="part1">
<br>
<h2><img src="images/buttons/titre_bienvenue.gif"></h2>
<p class="cont">
<br>
blabla
<br>
</p>
</div>
</div>
<div id="conteneurcontenu2">
<div id="contenu">
<%dim conn, ConnString, rs

set conn = Server.CreateObject("ADODB.Connection")
ConnString = "DBQ=" & Server.MapPath("BD/guest.mdb") & ";Driver={Microsoft Access Driver (*.mdb)};DriverId=25"
conn.Open connString
SQL = "select * from Message order by datemsg desc"
set rs = conn.execute (SQL)%>

<% if RS.EOF = true then%>
<hr>
<p class="cont">Il n'y a aucune new pour l'instant...</p><br>
<%end if%>

<%do while rs.eof = false %>
<hr>
<h2><%= rs("titremsg")%></h2>
<p class="cont2"><%= rs("DateMsg")%></p>
<br>
<p class="cont"><%= Replace(RS("Msg"), chr(13), "<br>") %></p>
<p class="cont3"><%= rs("nomexped")%></p>
<br>
<% RS.MoveNext%>
<%loop%>
<% RS.Close %>
<% conn.Close %>
<% Set conn=nothing %>
</div>
<div id="conteneurmenu">
<div id="menuvertical">
<ul>
<li><a href="index.asp"><img src="images/buttons/button_1.gif"></a></li>
<li><a href="programme.asp"><img src="images/buttons/button_2.gif"></a></li>
<li><a href="emplacement.asp"><img src="images/buttons/button_3.gif"></a></li>
<li><a href="http://myphotoalbum.com/" target="_blank"><img src="images/buttons/button_4.gif"></a></li>
<li><a href="historique.asp"><img src="images/buttons/button_5.gif"></a></li>
<li><a href="comite.asp"><img src="images/buttons/button_6.gif"></a></li>
<li><a href="sponsors.asp"><img src="images/buttons/button_7.gif"></a></li>
</ul>
</div>
</div>
</div>

<div id="contenucopy">
<div id="copyright">
<p class="copy">
2007-2008 Lachak Association - 1926 Fully <br>
Kit graphique - <a href="http://www.tcheval.net" target="_blank">Tcheval</a><br>
</p>
<noscript>
<p class="copy">
Kit Graphique : <a href="http://www.tcheval.net" target="_blank" title="Le site perso de Tcheval">Tcheval</a>
</p>
</noscript>
</div>
</div>

</body>
</html>

Pouvez-vous m'aider ?

Merci beaucoup

yuston

vendredi 19 septembre 2008 à 09:34

CODE

#conteneurcontenu2 {
margin: 0;
background : url(images/fond.gif) left top;
width:1009px;
height:auto;
}

Je ne sais pas si c'est la cause mais tu n'as pas mis le no-repeat qu'il y a partout! Essaie de définir quel mode de répétition pour voir (x, y ou no).

P.O.K

vendredi 19 septembre 2008 à 10:45

Justement, le no-repeat fait que l'image "part1" se répète en fonction de la longueur de la page. Il faudrait trouver une façon de faire comprendre cela à FF...

P.O.K

vendredi 19 septembre 2008 à 12:12

CITATION(yuston @ vendredi 19 septembre 2008 à 09:34)

CODE

#conteneurcontenu2 {
margin: 0;
background : url(images/fond.gif) left top;
width:1009px;
height:auto;
}

Je ne sais pas si c'est la cause mais tu n'as pas mis le no-repeat qu'il y a partout! Essaie de définir quel mode de répétition pour voir (x, y ou no).

Comment je fais pour "définir le mode de répétition" ?

Dudu

vendredi 19 septembre 2008 à 14:58

Salut

Le mode de répétition se définit avec la propriété background-repeat.
Mais tu peux aussi l'utiliser dans la propriété raccourcie background

P.O.K

vendredi 19 septembre 2008 à 15:16

Merci beaucoup pour ces réponses mais cela ne marche toujours pas...

J'ai essayé background-repeat et background. J'ai défini le mode de répétition avec y, ca marche sous IE mais pas sou firefox...

Reste-il encore d'autres alternatives ?

Merci

JokoZetla

lundi 22 septembre 2008 à 10:50

Je pense que c'est tout simplement le fait de ne pas avoir déclaré de float sur tes blocs. Pour le conteneur, le fait de vouloir le centrer, il ne faut pas de float effectivement, mais si tu lui affecte un bg, tu te rendras compte que FF ne le considere pas. C'est sans doute la ton problème.

P.O.K

mardi 23 septembre 2008 à 07:27

Merci beaucoup JokoZetla ! Ca marche enfin !

Un petit float et tout fonctionne.

Merci beaucoup ;-)

JokoZetla

mardi 23 septembre 2008 à 14:49

De rien, toujours un plaisir

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.