Bonne journée tout le monde,
Je suis en train de réadapter le thème Drupal "Analytic" pour le site communautaire www.morebacks.com et j'ai un "petit" souci de css3.
En effet, si le background-size situé sous la page fonctionne parfaitement dans Safari 4 et Opera 10 , il ne s'adapte du tout à la taille de la fenêtre dans Firefox 3.5.
Je précise que je travaille sous Mac.
Voici le lien (pour voir la différence entre les navigateurs) -- le site est encore en phase de test.
http://evolution.morebacks.com
et le css correspondant dont la partie problématique débute à "background-image: url("images/header-mb03.jpg");" (pour mieux vous situer -- désolé, le css est un peu... long :
J'ai certainement fait une erreur mais je ne vois pas laquelle, si ce n'est peut-être que FF3.5 ne supporterait pas cette fonction, ce qui m'étonnerait beaucoup.
Quoiqu'il en soit, je vous remercie par avance de vos suggestions et vous souhaite une bonne continuation.
tbr
Je suis en train de réadapter le thème Drupal "Analytic" pour le site communautaire www.morebacks.com et j'ai un "petit" souci de css3.
En effet, si le background-size situé sous la page fonctionne parfaitement dans Safari 4 et Opera 10 , il ne s'adapte du tout à la taille de la fenêtre dans Firefox 3.5.
Je précise que je travaille sous Mac.
Voici le lien (pour voir la différence entre les navigateurs) -- le site est encore en phase de test.
http://evolution.morebacks.com
et le css correspondant dont la partie problématique débute à "background-image: url("images/header-mb03.jpg");" (pour mieux vous situer -- désolé, le css est un peu... long :
/*
@font-face {
font-family: Delicious;
src: url('Delicious-Roman.otf');
}
@font-face {
font-family: Delicious;
font-weight: bold;
src: url('Delicious-Bold.otf'); }
*/
#html-main, .body-main {
background-color:#444544;
padding: 0em;
margin: auto;
width: 100%;
font-family: /*Georgia, "Times New Roman", Arial, */"Myriad Pro", Verdana, Tahoma, sans-serif;
font-size: 0.9em !important;
color: #181818;
/*
background-image: url("images/header-mb02.jpg");
-webkit-background-origin: border;
-moz-background-origin: border;
-webkit-background-size: 100% auto;
-o-background-size: 100% auto;
-moz-background-size: 100% auto;
background-repeat: no-repeat;
*/
}
.body-main
{
display:block;
text-align:center;
/*background:transparent url("images/bg_white.gif") repeat;*/
}
.make-it-center
{
margin: 2em auto;
height: auto;
width:90%;
background-color:#FFF;
opacity: 0.85;
-moz-box-shadow: 0 0 2em #000;
-webkit-box-shadow: 0 0 2em #000;
-moz-border-radius: 0.75em;
-webkit-border-radius: 0.75em;
background-image: url("images/header-mb03.jpg");
-webkit-background-origin: border;
-moz-background-origin: border;
-webkit-background-size: 100% auto;
-o-background-size: 100% auto;
-moz-background-size: 100% auto;
background-repeat: no-repeat;
}
.clear
{
clear: both;
font-size: 0em;
line-height: 0em;
visibility: collapse;
}
a{color:#8d6e00; text-decoration:none;}
a:hover{color: #685100; text-decoration:none;}
a:visited{color: #685100; text-decoration:none;}
p
{
margin: 0em;
padding: 0 0 2em 0;
}
/** headers **/
h1, h2, h3, h4, h5, h6 {line-height:normal;}
h1, h1.title
{font-size:1.75em; margin-bottom:0.16em; font-weight:normal;}
h2{
font-size:1.50em;
font-weight:normal;
font-family: /*"Times New Roman", Georgia, Arial*/, "Myriad Pro", Verdana, Tahoma, sans-serif;
color:#8d6e00;
padding:0em;
margin:0.25em 0 0.25em 0;
text-shadow: 0 0 0.25em #000;}
h2 a{color:#8d6e00;}
.block h2, .block h2.title{
font-size:1.50em;
padding:0.15em 0.33em;
color:#fff;
background-color:#FF9F00;
margin: 0 0.25em 0.75em 0.25em;
-moz-box-shadow: 0 0 0.33em #000;
-webkit-box-shadow: 0 0 0.33em #000;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
}
.block h2 a, .block h2.title a{color:#fff;}
.block h2 a:hover, .block h2.title a:hover{color:#bbbbbb; text-shadow: 0 0 0.25em #000;}
.sticky h2, .sticky h2 a{color:#343434 !important; font-weight:bold;}
/* .column-1 .block h2, .column-1 .block h2.title{background-color:#b6b5b5; } */
h3{margin-bottom:0; font-size:1.33em;}
h4, h4.title
{
font-size:1.25em;
font-family: "Myriad Pro", Verdana, Tahoma, sans-serif;
margin: 0em;
padding:0 0 0.5em 0;
color:#666666;
clear:both;
display:block;
font-weight:normal;
}
.clear-both{clear:both;}
table {width:100%;}
table td{padding:0.16em 0.415em;}
.content li{margin-bottom:0.6em;}
.content form li{margin-bottom:0;}
/*////////////////////////////CUSTOM BODY STYLES/////////////////////////////////*/
.top-menu{background-color:#6093BF; padding:0.66em 0.25em; text-align:left; -moz-box-shadow: 0 0.75em 10em #000; -webkit-box-shadow: 0 0.75em 10em #000; opacity: 1; -moz-border-radius-topleft: 0.75em; -moz-border-radius-topright: 0.75em; -webkit-border-top-left-radius: 0.75em; -webkit-border-top-right-radius: 0.75em;
}
.mission{float:left; font-style:italic; color:#8a8a8a; font-size:0.9em;}
#top-links{float:right;}
.top-links-ul, .top-links-ul li{padding:0; margin:0; list-style:none;}
.top-links-ul li{float:left; padding:0 0 0 2em; font-family: "Myriad Pro", Verdana, Tahoma, sans-serif;}
.top-links-ul li a{color:#000;}
#logo-container{/*border-top:0.08em solid #000;*/ padding-top:0.50em; margin-bottom:0.25em;}
/*#money-bg{background:transparent url("images/header-image.jpg") repeat right top;}*/
#logo-picture img{display:block;}
#logo-picture{float:left; padding-right:1.25em; }
#logo{/*background-color:#c82128;*/ float:left; padding:0.66em 4.16em; color:#fff; /*border-right:0.25em solid #fff;*/}
#logo h1{font-size:4em; padding:0 0 0.16em 0; margin:0; line-height:100%;}
#logo h1.logo-picture-true{/*font-family: Delicious, "Myriad Pro", Verdana, Tahoma, sans-serif;*/ text-align:left; display:inline; height:100%;text-shadow: 0 0 0.25em #000;}
#logo strong.logo-picture-true{text-align:left; }
#logo h1.logo-picture-true-slogan-false{line-height:150%; display:inline;}
#logo strong{font-weight:normal; color:#ffa0a0; font-size:0.8em; line-height:normal; display:block;}
#logo a{color:#fff; text-decoration:none;}
#logo a:hover{color:#FF9F00; }
/******** Primary menu ************************************************/
.rws-primary-menu{
background-color: #C82128;
color:#fff;
font-family: "Myriad Pro", Verdana, Tahoma, sans-serif;
text-align:left;
margin:1em 1em 5em 1em;
font-weight: bold;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
}
.rws-primary-menu a{color:#fff; text-decoration: none;}
.rws-primary-menu .block, .rws-primary-menu .block-menu{padding:0; margin:0; border:none; background-color:transparent;}
.rws-primary-menu h2{display:none; }
.rws-primary-menu ul, .rws-primary-menu ul.menu{margin:0; padding:0;}
.rws-primary-menu li, .rws-primary-menu li.leaf, .rws-primary-menu ul.links li{margin:0; padding:0; list-style:none;
float:left;
font-size:1.5em;
font-weight: bold;
}
.rws-primary-menu li a{display:block; padding:0.33em 1.25em 0.33em 1.25em; color:#fff !important; }
.rws-primary-menu li a:hover{background-color:#FF9F00; color:#f5f5f1; }
.rws-primary-menu li a:active{color:#fff; background-color:#4a4a4a;}
/******************** SEARCH *****************************************/
.rws-primary-menu #search-theme-form {float:right; padding:0.33em; border:none;}
.rws-primary-menu #search-theme-form label{display:none;}
.rws-primary-menu .form-submit{background-color:#eaeaea; border:0.08em solid #b8b8b8; margin:0; float:left; height:1.75em; padding:0.08em 0.66em; font-family: "Myriad Pro", Verdana, Tahoma, sans-serif;
}
.rws-primary-menu #search-theme-form div{display:inline;}
.rws-primary-menu .form-text{font-family: "Myriad Pro", Verdana, Tahoma, sans-serif; background-color:#fff; border:0.08em solid #b8b8b8; margin:0; float:left; height:1.416em; padding:0.08em 0.33em; font-family: "Myriad Pro", Verdana, Tahoma, sans-serif; width:130px;
}
/****************** Columns********************************************/
.column-1{
width:15%;
padding:0em 0.83em 0.83em 0.83em;
float:left;
border-right:0.08em solid #c9c9c6;
text-align:left;
overflow:hidden;
margin-bottom:2.5em;
/*background-color:#f5f5f1;*/
}
.column-2{
width:60%;
padding:0em 0.83em 0.83em 0.83em;
float:left;
border-left:0.08em solid #c9c9c6;
border-right:0.08em solid #c9c9c6;
margin-left:-0.08em;
text-align:left;
overflow:hidden;
margin-bottom:2.5em;
/*background-color:#f5f5f1;*/
}
.no-left-column{width:695px; margin-left:0;}
.no-right-column{width:807px; }
.no-right-and-left-columns{width:978px; margin-left:0;}
.column-3{
width:20%;
padding:0em 0em 0.83em 0.83em;
float:left;
border-left:0.08em solid #c9c9c6;
margin-left:-0.08em;
text-align:left;
overflow:hidden;
margin-bottom:2.5em;
/*background-color:#f5f5f1;*/
}
/******** MENUs and BLOCKs in COLUMN 1 *******************************************/
.column-1 .block-menu{}
.column-1 .block-menu ul,
ul.menu{margin:0; padding:0;
}
ul.menu li,
ul.menu li.leaf,
ul.menu li.expanded,
ul.menu li.collapsed{margin:0; list-style:none; list-style-image:none;
font-size:1.1em;
padding: 0 0 0.83em 0;
}
/** expanded **/
ul.menu li ul.menu{padding-left:0.83em; margin-top:0.25em; font-size:0.8em; border-left:0.33em solid #c9c9c6; line-height:normal; }
ul.menu li ul.menu li.leaf, ul.menu li ul.menu li.collapsed {padding: 0 0 0.5em 0;}
ul.menu .active{font-weight:bold;}
.column-1 .block{
border-bottom:0.08em solid #c9c9c6;
margin-bottom:1.25em;
}
/*************** LOGIN FORM ******************************************************/
#user-login-form{text-align:left;}
#user-login-form input{width:99%;}
#user-login-form input.form-submit{width:auto;}
/******** COLUMN 2 NODES *********************************************************/
.sticky{
border:0.08em solid #c0c0c0;
background:#fff url("images/featured.gif") no-repeat 1.5em 0 !important;
padding-top:2.91em !important ;
}
/*************** NODE ***********************************/
.node{padding:1.416em 1.5em;
margin-bottom:0.415em;
background:transparent url("images/bg_node.gif") repeat-x bottom left;
}
.links{text-align:right; font-size:0.9em;}
.content p{line-height:150%;}
.submitted, .submitted a{color:#9fa35c;}
.sticky .submitted, .sticky .submitted a{color:#83837d;}
.block{margin-bottom:2.5em;}
.block .content{padding: 0 0.66em 0.33em 0.66em;}
/*************** column-2-blocks ****************************/
.column-2-blocks{margin-top:1.66em;}
.column-2-blocks-left, .column-2-blocks-right{width:48%; float:left; overflow:hidden;}
.column-2-blocks-left .block, .column-2-blocks-right .block{margin-bottom:0.83em;}
.column-2-blocks-no-right-and-left-columns .column-2-blocks-left, .column-2-blocks-no-right-and-left-columns .column-2-blocks-right{width:478px;}
.column-2-blocks-no-left-column .column-2-blocks-left, .column-2-blocks-no-left-column .column-2-blocks-right{width:337px;}
.column-2-blocks-no-right-column .column-2-blocks-left, .column-2-blocks-no-right-column .column-2-blocks-right{width:393px;}
.column-2-blocks-left{
border:0.08em solid #c9c9c6;
border-left:none;
border-bottom:none;
overflow:hidden;
padding-right:0.83em;
padding-top:0.83em;
}
.column-2-blocks-right{
border:0.08em solid #c9c9c6;
border-right:none;
border-bottom:none;
overflow:hidden;
margin-left:-0.08em;
padding-left:0.83em;
padding-top:0.83em;
}
.no-left-block{margin-left:251px;}
.content_after_blocks{clear:both; padding-top:0.83em; border-top:0.08em solid #c9c9c6; }
.main-content-block{padding-bottom:2.08em;}
.main-content-block .block{margin:1.5em 0 0.16em 0;}
#block-top{margin-top:0; border-bottom:0.08em solid #c9c9c6; margin-bottom:0.83em;}
#block-top .column-2-blocks-left, #block-top .column-2-blocks-right{border-top:none; padding-top:0;}
#block-top h2{background-color:#c82128;}
#content-top{border-bottom:0.08em solid #c9c9c6; margin-bottom:0.66em;}
/****** FOOTER *************************************************/
#footer{
text-align:left;
clear:both;
background:transparent url("images/bg_node.gif") repeat-x top left;
font-size:0.83em;
padding:1.25em 1.33em;
color:#707070;
}
#footer h2{display:none;}
#footer .block-menu ul, #footer1 .block-menu ul.menu{margin:0; padding:0; font-family: "Myriad Pro", Verdana, Tahoma, sans-serif; }
#footer .block-menu li, #footer .block-menu li.leaf{margin:0; list-style:none;
font-size:1.1em;
float:left;
}
#footer .block-menu ul a{display:block; padding: 0.83em 1.66em 0.83em 0.83em 0.83em 0;}
#footer .block{clear:both; margin-bottom:0.83em;}
#footer .block .content {padding:0; }
#footer p{padding: 0 0 0.415em 0;}
/*** Comments ***/
.comment{border-left: 0.08em solid #c9c9c6; border-bottom: 0.08em solid #c9c9c6; padding:0.83em 0 0.5em 1.08em; margin:0 0em 0em 0;}
.comment .picture img {float:left; margin:0 0.83em 0.25em 0; border:0.08em solid #dadada; padding:0.08em;}
.comment .submitted {font-size: 1em; font-size: 0.91em; display:inline;}
.comment .submitted a {}
.comment-author {margin-bottom:0.5em; font-weight:bold;}
.comment-date {margin-bottom:0.5em; }
.this-link{color:#aab7b7;font-size:0.91em;} .this-link a{color:#aab7b7;}
.this-link a:visited{color:#aab7b7;}
.comment .new { background:#c82128; color:#fff; padding:0.08em 0.33em 0.08em 0.33em;}
.comment .new a{color:#fff; text-decoration:none; } .comment .new a:hover{color:#fff; }
.comment p{padding-bottom:0.5em;}
.comment .content {padding-top:0.83em;}
.links-comment {float:left; margin:0; padding:0;color:#869999;}
.links-comment ul.links{margin:0; padding:0;}
.links-comment .links li{font-size:0.85em; padding:0; margin-right:1.25em;}
.links-comment a {color:#869999;}
.links-comment a:hover {color:#517074;}
.links-comment li.comment_reply a.comment_reply{color:#349f00;}
#comment-form .form-item{margin-top:0;}
#comment-form .resizable-textarea{clear:both;}
#comment-form .form-item label{float:left; padding-right:0.83em;}
ul.tips {clear:both;}
.node .picture img{border:0.08em solid #dadada; padding:0.08em; float:right; margin-left:0.16em;}
ul.links{display:inline;}
.breadcrumb{font-size:0.85em;}
.preview .node {
padding:0.83em;
}
blockquote{border:0.08em solid #ebebeb; background-color:#fcfcfa; color:#717171; font-style:italic; clear:both; padding:1em 1em 0.5em 1em; margin:0.2em 0; display:block;}
.profile .picture{float:none;}
.signature p {
border-top: 0.08em solid #d6ddb9;
font-size: 0.9em;
margin: 0.83em 1.66em 0;
padding: 0;
}
.taxonomy{background:#e7e7d6 url("images/bg_taxonomy.gif") no-repeat top left; padding:0.3em 0.6em; border:0.08em dashed #fff; margin-top:0.415em;}
.developer{color:#707070; color:#9a9a9a; clear:both; display:block; margin-top:0.33em;}
.developer a{color:#707070; color:#9a9a9a; font-weight:normal; background:transparent url("images/star.gif") no-repeat center left; padding-left:1.25em;}
.developer strong a{text-decoration:none; background: none; padding-left:0;}
.version{color:#f5f5f1; padding-left:1.66em;}
/***************** ADMIN MENU PRIMARY****************************/
#rws-uni-tabs{
background-color:#23749e;
margin:0;
padding:0;
clear:both;
}
#rws-uni-tabs li{float:left; padding:0; margin:0; list-style:none;}
#rws-uni-tabs li a{display:block; padding:0.31em 1.5em 0.45em 1.5em; color:#fff; }
#rws-uni-tabs li a:hover{background-color:#3a9ed1; color:#fff; }
.edit-this-link{background-color:#23749e; font-weight:bold; font-family: Tahoma; font-size:0.8em; padding:0.25em 0.5em; white-space:nowrap; clear:none; border-bottom:0.08em solid #093c57;
border-right:0.08em solid #093c57;
}
.edit-this-link:hover{color:#89d7ff;}
/*********** MESSAGES *************/
div.messages{padding:0.66em; margin: 0.08em 0 0.16em 0;}
div.error {background:#ff9797; padding-left:2.33em; border: 0.08em solid #ff0000; font-weight: bold; color: #fff; display:block;}
div.status {background:#eefcea; padding-left:2.33em; border: 0.08em solid #aade91; font-weight: bold; color: #35a000; display:block;}
.error a{color:#fff;}
.error a:hover{color:#ffe7e7;}
div.messages ul{padding:0;}
/********************* box *******************/
.box{
margin-top:2.08em;
}
.item-list ul{padding-left:0; margin-top:0.415em;}
.block-region{color:#000; font-weight:bold; font-family: Tahoma; padding-left:0.83em;}
/***** FIX OPEN ID **************************/
#user-login-form li.openid-link, #user-login li.openid-link{margin-left:0; padding-left:1.5em;
background-position:top left;
}
#user-login-form #edit-submit{margin-bottom:0.83em;}
/*********** FIX TINYMCE ********************/
/*
* Tabs CSS
*
* Adds styles for the primary and secondary tabs.
*
*/
div.tabs
{
margin: 0 0 0 0;
}
ul.primary
{
margin: 0;
margin-left: 0em;
padding: 0 0 0 0.83em;
border-width: 0;
list-style: none;
white-space: nowrap;
line-height: normal;
background: url(images/tab-bar.png) repeat-x left bottom;
}
ul.primary li
{
float: left;
margin: 0;
padding: 0;
}
ul.primary li a
{
display: block;
height: 2em;
margin: 0;
padding: 0 0 0 0.415em; /* width of tab-left.png */
border-width: 0;
font-weight: bold;
text-decoration: none;
color: #777;
background-color: transparent;
background: url(images/tab-left-new.gif) no-repeat left -3.16em;
}
ul.primary li a .tab
{
display: block;
height: 1.66em; /* 2em (parent) - 0.33em (padding) */
margin: 0;
padding: 0.33em 1.08em 0 0.5em;
border-width: 0;
line-height: 1.66em;
background: url(images/tab-right-new.gif) no-repeat right -3.16em;
cursor: pointer;
}
ul.primary li a:hover
{
border-width: 0;
background-color: transparent;
background: url(images/tab-left-new.gif) no-repeat left -6.33em;
}
ul.primary li a:hover .tab
{
background: url(images/tab-right-new.gif) no-repeat right -6.33em;
}
ul.primary li.active a,
ul.primary li.active a:hover
{
border-width: 0;
color: #000;
background-color: transparent;
background: url(images/tab-left-new.gif) no-repeat left 0;
}
ul.primary li.active a .tab,
ul.primary li.active a:hover .tab
{
background: url(images/tab-right-new.gif) no-repeat right 0;
}
ul.secondary
{
margin: 0;
margin-left: 0em;
padding: 0 0 0 0.415em;
border-bottom: 0.08em solid #c0c0c0;
list-style: none;
white-space: nowrap;
background: url(images/tab-secondary-bg.png) repeat-x left bottom;
}
ul.secondary li
{
float: left;
margin: 0 0.415em 0 0;
padding: 0.415em 0;
border-right: none;
}
ul.secondary a
{
display: block;
height: 2em;
margin: 0;
padding: 0;
border: 0.08em solid #c0c0c0;
text-decoration: none;
color: #777;
background: url(images/tab-secondary.png) repeat-x left -4.66em;
}
ul.secondary a .tab
{
display: block;
height: 1.5em; /* 2em (parent) - 0.5em (padding) */
margin: 0;
padding: 0.25em 0.66em;
line-height: 1.5em;
}
ul.secondary a:hover
{
background: url(images/tab-secondary.png) repeat-x left bottom;
}
ul.secondary a.active,
ul.secondary a.active:hover
{
border: 0.08em solid #c0c0c0;
color: #000;
background: url(images/tab-secondary.png) repeat-x left top;
}
/* IE */
ul.primary li a,
ul.primary li a .tab,
ul.secondary li a,
ul.secondary li a .tab
{
_display: inline; /* Otherwise the blocks mistakenly get 100% width in IE5 */
_di\splay: inline-block; /* Otherwise the blocks mistakenly get 100% width in IE6 */
}
ul.primary,
ul.secondary
{
_width: 100%; /* Otherwise IE5 treats the ul as floated */
_w\idth: auto; /* Reset to auto width for IE6 */
}
J'ai certainement fait une erreur mais je ne vois pas laquelle, si ce n'est peut-être que FF3.5 ne supporterait pas cette fonction, ce qui m'étonnerait beaucoup.
Quoiqu'il en soit, je vous remercie par avance de vos suggestions et vous souhaite une bonne continuation.
tbr