Script non reconnu par Firefox

[Daewyn]

Bonjour, bonsoir, et merci d'avance à ceux qui voudront bien m'aider.

Etant en train de créer un forum j'ai commencé par m'occuper du design, tout ça tout ça, avec nottamment un header de fond. Premier problème qui se pose, le header ne s'adapte bien sûr pas aux différentes résolutions, et est soit trop petit soit trop grand. J'ai donc utilisé le tuto de ce topic ( https://forum.forumactif.com/t286701-image-de-fond-changeante-selon-la-resolution-du-visiteur ) pour régler cela, avec succès. Enfin c'est ce que je pensais.

Car il se trouve, comble de l'ironie, qu'alors que ce script a un rendu impeccable sur IE 8 & 9, il n'est pas du tout reconnu par Fireox (et apparemment pas par Chrome non plus, mais c'ets une autre histoire).

J'aimerais savoir s'il y a quelque chose à changer, rajouter enlever ou déplacer au script ou dans le css pour régler ça. Voici le css (qu'à vrai dire je n'ai quasi pas touché) :

Code:

body {
background-attachement: no-fixed;
background-repeat: no-repeat;
background-position: top center;
}

.bodylinewidth {
  margin-top: 50px;
}


* html {
   scrollbar-face-color: #;
   scrollbar-highlight-color: #;
   scrollbar-shadow-color: #;
   scrollbar-3dlight-color: #;
   scrollbar-arrow-color: #;
   scrollbar-track-color: #;
   scrollbar-darkshadow-color: #;
   }
*+ html {
   scrollbar-face-color: #;
   scrollbar-highlight-color: #;
   scrollbar-shadow-color: #;
   scrollbar-3dlight-color: #;
   scrollbar-arrow-color: #;
   scrollbar-track-color: #;
   scrollbar-darkshadow-color: #;
   }
th,td,p {
    font-family: arial, arial narrow }
a img {
    border: none;
    }

/* Links */

/* a:link,a:active,a:visited {
    color : #302416;
    }
 */
a:link{
    color: #302416;
    }
a:visited{
    color: #302416;
    }
a:active{
    color: #d9c0a3 }
a:hover{
    text-decoration: underline !important;
    color : #b6ada4;
    }
hr{
    height: 0;
    border: solid #7d6647 0;
    border-top-width: 1px;
   }
   
.bodylinewidth {
   width:700px}

.forumline{
    background-color: #7d6647;
    border: 2px #7d6647 solid;
    }
td.row1,td.row3.over:hover {
    background-color: #7d6647;
    }
td.row2,td.row1.over:hover {
    background-color: #7d6647;
    }
td.row3{
    background-color: #7d6647;
    }
td.rowpic {
   background-color: #dee3e7;
   background-image: url("http://hitskin.com/themes/14/23/61/i_back_catd.png");
   css}
th {
   color: #302416;
   font-size: 11px;
   font-weight : bold;
   background-color: #006699;
   height: 25px;
   background-image: url("http://hitskin.com/themes/14/23/61/i_back_title.png");
   padding: 2px 3px;
   }
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
   background-image: url("http://hitskin.com/themes/14/23/61/i_back_catg.png");
   background-color:#dee3e7;
    border: #7d6647;
    border-style: solid;
    height: 28px;
   }
td.cat,td.catHead,td.catBottom {
   height: 29px;
   border-width: 0;
   }
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
   font-weight: bold;
    border: #7d6647;
    border-style: solid;
   
/*height: 20px;
   */
}
td.row3Right,td.spaceRow {
   background-color: #7d6647;
    border: #7d6647;
    border-style: solid;
   }
td.pourcentback {
    background-color : #544037;
    }
th.thHead,td.catHead {
    font-size: 12px;
    border-width: 1px 1px 0 1px;
    }
th.thSides,td.catSides,td.spaceRow {
    border-width: 0 1px;
    }
th.thRight,td.catRight,td.row3Right {
    border-width: 0 1px 0 0;
    }
th.thLeft,td.catLeft {
    border-width: 0 0 0 1px;
    }
th.thBottom,td.catBottom {
    border-width: 0 1px 1px 1px;
    }
th.thTop {
    border-width: 1px 0 0;
    }
th.thCornerL {
    border-width: 1px 0 0 1px;
    }
th.thCornerR {
    border-width: 1px 1px 0 0;
    }
.maintitle, .maintitle h1{
   font-weight: bold;
    font-size: 22px;
    font-family: arial,arial, arial narrow;
   text-decoration: none;
    line-height : 120%;
    color : #302416;
   }
.forumline .row1,.forumline .row2,.forumline .row3,.forumline .row3Right {
   padding: 2px 3px;
   }
.forumline td.pagination {
   padding:0;
    }
.maintitle h1 {
   margin: 0;
    padding: 0;
    display: inline;
    }
.gen {
    font-size : 12px;
    }
.genmed {
    font-size : 11px;
    }
.gensmall {
    font-size : 10px;
    }
.gen,.genmed,.gensmall {
    color : #302416;
    }
a.gen,a.genmed,a.gensmall {
    color: #302416;
    text-decoration: none;
    }
a.gen:hover,a.genmed:hover,a.gensmall:hover{
    color: #b6ada4;
    text-decoration: underline;
    }
.mainmenu{
    font-size : 11px;
    color : #302416 }
a.mainmenu{
    text-decoration: none;
    color : #302416;
   }
a.mainmenu:hover{
    text-decoration: underline;
    color : #b6ada4;
    }
.cattitle{
    font-weight: bold;
    font-size: 12px ;
    letter-spacing: 1px;
    color : #302416}
h1.cattitle {
   margin:0;
    padding: 0;
    display:inline;
   }
a.cattitle{
    text-decoration: none;
    color : #302416;
    }
a.cattitle:hover{
    text-decoration: underline;
    }
.forumlink{
    font-weight: bold;
    font-size: 12px;
    color : #302416;
    }
a.forumlink {
    text-decoration: none;
    color : #302416;
    }
a.forumlink:link {
    color : #302416;
    }
a.forumlink:visited {
    color : #302416;
    }
a.forumlink:active {
    color : #d9c0a3;
    }
a.forumlink:hover{
    text-decoration: underline;
    color : #b6ada4;
    }
.nav{
    font-weight: bold;
    font-size: 11px;
    color : #302416;
    }
a.nav{
    text-decoration: none;
    color : #302416;
    }
a.nav:hover{
    text-decoration: underline;
    }
.topictitle,h1,h2{
    font-weight: bold;
    font-size: 11px;
    color : #302416;
    }
div.topictitle {
   display: inline;
   }
h2.topic-title {
   display: inline;
    margin: 0;
    padding: 0;
   }
a.topictitle:link{
    text-decoration: none;
    color : #302416;
    }
a.topictitle:visited{
    text-decoration: none;
    color : #302416;
    }
a.topictitle:active{
    text-decoration: none;
    color : #d9c0a3;
    }
a.topictitle:hover{
    text-decoration: underline;
    color : #b6ada4;
    }
.name{
    font-size : 11px;
    color : #302416;
   }
.name a{
    text-decoration:none;
    }
.postdetails{
    font-size : 10px;
    color : #302416;
    }
.postbody{
    font-size : 12px;
    line-height: 18px}
a.postlink:link{
    text-decoration: none;
    color : #302416 }
a.postlink:visited{
    text-decoration: none;
    color : #302416;
    }
a.postlink:active{
    text-decoration: none;
    color : #d9c0a3;
    }
a.postlink:hover{
    text-decoration: underline;
    color : #b6ada4}
.code{
   font-family: courier;
   font-size: 11px;
   color: #d69c3c;
   background-color: #7d6647;
   border: #7d6647;
   border-style: solid;
   border-left-width: 1pxborder-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   }
.code div.cont_code {
   max-height:200px;
   overflow:auto;
   }
.quote{
   font-family: arial, arial narrow;
   font-size: 11px;
   color: #444444;
   line-height: 125%;
   background-color: #7d6647;
   border: #7d6647;
   border-style: solid;
   border-left-width: 1px;
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px}
a.copyright{
    color: #302416;
    text-decoration: none;
   }
a.copyright:hover {
    color: #b6ada4;
    text-decoration: underline;
   }
.coloradmin {
    color: #b6ada4}
.colormod {
    color: #d69c3c}
.vote {
   float: right;
   width: 10px;
   margin-left: 4px;
   }
.vote .vote-button {
   text-align: center;
   font-weight: bold;
   margin-left: -1px;
   }
.vote .vote-button a {
   text-decoration: none !important;
   }
.vote .vote-bar {
   width: 3px;
   height: 50px;
   margin: 0 auto;
   border: 1px solid #302416;
   font-size: 0;
   }
.vote .vote-no-bar {
   letter-spacing:-2px;
   margin-left:-2px;
   white-space:nowrap;
   }
.vote .vote-bar-plus {
   background-color: #0f0;
   }
.vote .vote-bar-minus {
   background-color: #f00;
   }
h1.pagetitle {
   display: inline;
   margin: 0;
   padding: 0;
   font-size: 12px;
   color: #302416;
   }
h1.title2 {
   font-size: 11px;
   }
.secondarytitle,.secondarytitle h2 {
   margin: 0;
   padding: 0;
   color: #302416;
   }
.secondarytitle h2 {
   display:inline;
   }
.nav h1 {
   display: inline;
   }
.hierarchy {
   display: inline;
   margin: 0;
   padding: 0;
   text-transform: none;
   border: none;
   font-size: 10px;
   }
.mod-text {
   font-weight: bold;
   }
img{
   border:0}
input,textarea, select, #text_editor_iframe {
   color : #302416;
   font: normal 11px arial, arial narrow;
   border-color : #302416;
   }
input.post,textarea.post,select,#text_editor_iframe,textarea.inputbox{
   background-color:#7d6647}
.post-options {
   text-align: right;
   }
.post-options img {
   cursor: pointer;
   vertical-align: middle;
   }
input {
    text-indent : 2px;
    }
input.button {
   background-color : #7d6647;
   color : #302416;
   font-size: 11px;
    font-family: arial, arial narrow;
   }
input.mainoption {
   background-color : #7d6647;
   font-weight : bold;
   }
input.liteoption {
   background-color : #7d6647;
   font-weight : normal;
   }
.helpline {
    background-color: #7d6647;
    border-style: none;
    }
input {
    background-color: #7d6647;
    }
button.button2, input.button2 {
   font-size: 0.7em;
   border: 1px solid #BCBCBC;
   width: auto !important;
   padding: 1px 0;
   font-family: arial, arial narrow;
   color: #000000;
   background-repeat: repeat-x;
   background-color: #FAFAFA;
   background-image: url('http://2img.net/i/fa/prosilver/bg_button.gif');
   background-position: top;
   overflow: visible;
   vertical-align:middle;
   }
button.button2:hover, input.button2:hover {
   border: 1px solid #b6ada4;
   color: #b6ada4;
   background-position: 0 100%;
   }
* html button.button2, * html input.button2 {
   padding-bottom: 0;
   margin-bottom: 1px;
   height: 24px;
   padding-right: 3px;
   padding-left: 3px;
   }
*+html button.button2, *+html input.button2 {
   height: 24px;
   padding-right: 3px;
   padding-left: 3px;
   }
*+html button.button2 img {
    vertical-align: middle;
    }
* html button.button2 img {
    vertical-align: middle;
    }
button.bbcode {
   border: 1px solid #e3adad;
   background-image: url("http://2img.net/i/fa/wysiwyg/bg_button.png");
   }
.select {
   background-color: #FFF;
   border: 1px solid #BCBCBC;
   position: absolute;
   z-index: 999;
   top: 0;
   left: 0;
   overflow: hidden;
   width: 0;
   }
.select p {
   padding: 4px 6px;
   font-size: 0.7em;
   margin: 0;
   white-space: nowrap;
   text-align: left;
   }
.select button {
   padding: 4px;
   font-size: 0.9em;
   margin: 0;
   background-color: #FFF;
   border: none;
   text-align:left;
   }
.select button.button2 {
   border:1px solid #BCBCBC;
   padding: 0;
   }
* html .select button.button2 {
   padding-right: 3px;
   padding-left: 3px;
   }
.select button.button2:hover {
   border: 1px solid #b6ada4;
   color: #b6ada4;
   background-position: 0 100%;
   }
.select button:hover,.selectHover {
   cursor: pointer;
   background-color: #EEE;
   }
textarea#text_editor_textarea {
    width: 100% !important;
    }
iframe#text_editor_iframe {
   width: 100%;
   height: 200px;
   }
form#quick_reply textarea#text_editor_textarea {
   width: 100% !important;
   height: 100%;
   }
form#quick_reply iframe#text_editor_iframe {
    width: 100%;
    }
* html form#quick_reply iframe#text_editor_iframe {
   width: 600px;
   }
*+html form#quick_reply iframe#text_editor_iframe {
   width: 600px;
   }
#page-footer .gen strong {
   font-weight: normal;
   }



/* Advanced profile */
#profile-advanced-avatar .module, #profile-advanced-points .module, #profile-advanced-reputation .module, #profile-advanced-details {
   margin-right: 3px;
   }
#profile-advanced-avatar .module, #profile-advanced-points .module, #profile-advanced-reputation .module, #profile-advanced-right .module {
   margin-bottom: 3px;
   }
#profile-advanced-button {
   padding: 1px;
   }
#profile-advanced-details {
   overflow: hidden;
   }
#profile-advanced-details ol {
   margin: 0;
   padding: 0;
   list-style: none;
   }
#profile-advanced-details ol li {
   display: block;
   margin-bottom: 4px;
   }
#profile-advanced-details .avatar {
   float: left;
   }
.avatar {
   width: 50px;
   border: 1px solid #006699;
   background-color: #fff;
   }
.avatar img {
   width: 50px;
   }
.friend-block .avatar {
   margin: 0 auto;
   cursor:pointer;
   }
.avatar.mini, .avatar.mini img {
   width: 38px;
   height: 38px;
   }
.friend-block {
   float: left;
   width: 70px;
   margin: 1px;
   text-align: center;
   overflow: hidden;
   }
.friend_list_online_status {
   line-height: 11px;
   font-size: .9em;
   }
.friend_list_online_status img {
   vertical-align: middle;
   }
.friends-foes-list {
   float: left;
   width: 200px;
   height: 2em;
   }
#profile-advanced-details .message-block {
   margin-left: 57px;
   }
#profile-advanced-details .message-header {
   border-top: 1px solid #7d6647;
   background: #7d6647;
   padding: 4px;
   margin-bottom: 4px;
   }
#profile-advanced-details .message-date {
   float: right;
   }
#profile-advanced-details .message-body {
   margin-bottom: 4px;
   }
#profile-advanced-details .message-footer {
   text-align: right;
   }
#profile-advanced-details .message-footer li {
   display: inline;
   margin: 0 0.25em;
   
/* Spacing between generation dot */
}
#profile-advanced-details .message-footer li:after {
   content: ' .';
   
/* Beware of character: can create a whitepage in IE6 if char does not exist in lang. */
}
#profile-advanced-details .message-footer li a {
   margin-right: 0.25em;
   
/* Spacing between generation dot */
text-decoration: underline;
   }
#profile-advanced-details .message-footer li.last:after {
   content: normal;
   }
#profile-advanced-add {
   margin-right: 4px;
   padding: 8px 0;
   text-align: right;
   }
#profile-advanced-details .stats-field {
   margin: 4px 0 10px 4px;
   padding: 0 10px 6px;
   }
#profile-advanced-details .stats-field legend {
   font-weight: bold;
   }
#profile-advanced-details .stats-field ul {
   list-style-type:none;
   text-indent: 10px;
   padding: 0;
   }
#profile-advanced-details .stats-field li {
   margin: 4px 0;
   }
#login_popup {
   position: absolute;
   z-index: 999;
   display: none;
   }
#login_popup_buttons {
   position: absolute;
   height:19px;
   bottom: 6px;
   right: 6px;
   }
#login_popup_buttons input {
   margin-left: 6px;
   }
ul.profile_field_list {
   padding:0;
   margin:0}
html ul.profile_field_list li {
   list-style-type: none;
   }
ul.profile_field_list > li {
   list-style-type: none;
   }
.inputURL {
   font-size:10px;
   font-family:"Courier New", "Times New roman";
   letter-spacing:-1px;
   }
.middleline {
   line-height:2em;
   }
.invisible{
   display:none;
   visibility:hidden;
   }
.visible{
   display:block;
   visibility:visible;
   }



/* Blog */
.blog_cal-border {
   display: inline;
   float: left;
   border: 1px solid #006699;
   background: #7d6647;
   padding: 1px;
   font-size: 0.9em;
   margin-right: 10px;
   }
.blog_cal-content {
   width: 2.9em;
   background: #006699;
   padding: 1px;
   line-height: 1.4em;
   text-align: center;
   font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Sans-Serif;
   color: #7d6647;
   }
.blog_cal-content span {
   display: block;
   }
.blog_cal-day {
   padding-left: 0.2em;
   font-size: 1.6em;
   letter-spacing: 0.2em;
   }
.blog_cal-month {
   line-height: 0.7em;
   font-size: 2em;
   font-weight: bold;
   }
.blog_cal-year {
   line-height: 1.2em;
   font-size: 0.8em;
   }
.blog_title {
   padding-top: 5px;
   font-size: 16px;
   }
.blog_title img {
   vertical-align: middle;
   }
.blog_title .topictitle {
   font-size: 16px;
   }
.blog_message {
   margin-top: 12px;
   font-size: 12px;
   }
.blog_comments {
   margin-bottom: 2px;
   text-align: right;
   }
.blog_comments img {
   vertical-align: middle;
   }
#blog_comments {
   width: 90%;
   margin: 0 auto;
   }
#blog_comments .postbody {
   width: 96%;
   }
.blog_comment-avatar {
   float: left;
   }
.blog_comment-avatar img {
   background-color: #fff;
   border: 1px solid #006699;
   vertical-align: middle;
   width: 38px;
   margin: 5px 5px 0 0;
   }
#blog_comments table {
   margin-bottom: 2px;
   }
#blog_comments .h3 {
   overflow: hidden;
   margin-top: 0;
   margin-left: 45px;
   padding: 0;
   min-height: 22px;
   }
.blog_comment-title {
   float: left;
   min-height: 12px;
   margin-top: 7px;
   }
.blog_comment-title a {
   text-decoration: none;
   }
#blog_comments .profile-icons {
   float: right;
   margin-bottom: 5px;
   }



/* Spoiler */
.spoiler_closed {
   display:block;
   font-family: arial, arial narrow;
   font-size: 11px;
   color: #444444;
   line-height: 125%;
   background-color: #7d6647;
   border: #7d6647;
   border-style: solid;
   border-left-width: 1px;
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   }
.spoiler_closed.hidden {
   display:none;
   }
.spoiler_content {
   display:block;
   font-family: arial, arial narrow;
   font-size: 11px;
   color: #444444;
   line-height: 125%;
   background-color: #7d6647;
   border: #7d6647;
   border-style: solid;
   border-left-width: 1px;
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   }
.spoiler_content.hidden {
   display:none;
   }

L'adresse de mon fo est celle-ci : http://fata-fantasia.forumactif.com/
Quant aux templates, aucun d'entre eux n'a été modifié.

Merci d'avance à ceux qui voudront bien m'aider @_@

[diedblack]

Voulez-vous exécutez ces techniques sur tout les navigateurs ?

Chrome, Firefox et IE.
https://forum.forumactif.com/t177493-vider-le-cache-internet#1747606

Après si cela ne fonctionne toujours pas revenez
EDIT: Bien, revenez même si cela fonctionne pour nous indiquez ^^'

[Daewyn]

Alors alors. J'ai bien suivi la procédure mais cela n'a rien changé. Ni sur IE ni sur Firefox.

Après, plus inquiétant. J'ai demandé à des amis, et pour certains le problème de non-redimensionnement que j'ai sur Firefox leur arrive sur Ie. En fait, il semblerait que le rendu soit bon... uniquement sur mon ordi ? ô_o

Je ne sais pas trop quoi en penser ^^""

EDIT : je viens de remarquer quelque chose. Mon header de fond est présent en deux endroits. D'abord le code javascript, comme indiqué dans le tuto de mon premier message ; ensuite à l'emplacement normal du fond de page (Affichage > Image et couleurs > Gestions des images > Général). Et apparemment, firefox (chez moi ; IE chez un ami) fait passer le fond de page "unique" avant ceux du code javascript. Raison pour laquelle sur un des deux navigateurs le redimensionnement ne s'effectue pas. Quelqu'un aurait une idée par hasard ? °°

[Daewyn]

Petit up ^^

[Ea]

Bonjour,


J'ai mis le tutoriel à jour, avec 2 \" vers la dernière ligne ça semble mieux aller.

[Daewyn]

C'est parfait, merci beaucoup **

J'en profite juste pour poser une question, puisqu'elle concerne en partie le fait que le header se redimensionne avec la résolution.

Sous une petite résolution (800*600 ; 1024*768) ; l'écart entre le header de fond et le début du forum (boutons acceuil inscription etc et annonce défilante) reste correct. Mais sous une résolution plus grande, ces boutons & annonce empiètent sur le header. Y a t'il de la même façon que pour le header de fond, un code javascript permettant de régler cet espace en fonction de la résolution ? Ou ce n'est tout simplement pas possible ?

(Si cette question n'a pas sa place ici, je créerai un autre sujet pour cela. Merci d'avance ^^ )

[Ea]

Vous pourriez mettre ce script :

Code:

$("html").addClass("sw" + (screen.width <= 800 ? "800" : screen.width <= 1024 ? "1024" : screen.width <= 1280 ? "1280" : screen.width <= 1600 ? "1600" : "1900"));

Ensuite il vous faudrait mettre dans le CSS :

Code:

.sw800 body { background-image:url(http://data.imagup.com/member2/1135451929_Header 01 - 800.png); }
.sw800 #i_logo { height: 600px; }

.sw1024 body { background-image:url(http://data.imagup.com/member2/1135452005_Header 01 - 1024.png); }
.sw1024 #i_logo { height: 700px; }

.sw1280 body { background-image:url(http://data.imagup.com/member2/1135452056_Header 01 - 1280.png); }
.sw1280 #i_logo { height: 800px; }

.sw1600 body { background-image:url(http://data.imagup.com/member2/1135452102_Header 01 - 1600.png); }
.sw1600 #i_logo { height: 900px; }

.sw1900 body { background-image:url(http://data.imagup.com/member2/1135452149_Header 01 - 1900.pngccc); }
.sw1900 #i_logo { height: 1000px; }

Suivant la largeur d'écran, la balise <html> devrait avoir une classe sw800, sw1024, sw1280, sw1600 ou sw1900 ( qui est utilisée en CSS pour choisir les options souhaitées ).

( #i_logo c'est le logo transparent, j'ai mis ses tailles au pif il faudra probablement en changer ^^ )

[Daewyn]

Ca marche impec ^^ Merci infiniment, je ne m'en sortais plus x)

Je marque le sujet en résolu, bonne soirée.