[RESOLU] Background image et ie

bonjour
je suis en train de modifier un template joomla. la structure est la suivante :
sur toute la largeur de l'écran, header et footer même couleur, content une autre.
la couleur de l'ensemble du site, c'est à dire le fond de l'écran est défini par le code:

.page_bg { background: #f8f8f8 url("../images/page_bg.png") repeat center top; }

et pour le centre de la page , le 'content' par le code:

#content {
	background: url("../images/content_bg.png") repeat scroll left top transparent;	
}

avec firefox,, la couleur de la page centrale , tout est parfait, mais avec ie rien n'apparaît.
j'ai déjà réalisé plusieurs sites, je sais qu'il faut ramer un peu avec les différents navigateurs. Mais là, je bute lamentablement
Peut-être avez-vous une idée? Merci d'avance.
Modifié par ideal (25 Oct 2011 - 00:41)

Salut,

Y a très peu de code pour comprendre ton problème, cela dit:
ne mets pas scroll, c'est une valeur par défaut.

Bonjour,

Essaye en supprimant "transparent".

L'ordre des valeurs est important, le color devrait se trouver avant l'url.

Merci de vos réponses
Malheureusement les modifications ne changent rien.Je veux bien mettre tout le code , mais un peu long.

body,html {height:100%;}
body{background:#ffffff ;font: 400 12px/1.3em Arial, Tahoma, Verdana, Helvetica;color:#777;margin:0;padding:0}
.clr{clear:both;overflow:hidden;font-size:0;line-height:0;}
ul{list-style:none;margin:0;padding:0}
a,img{outline:none;margin:0;padding:0;border:none;}
a:link, a:visited { color:#777;text-decoration:none;}
a:hover, a:active, a:focus { color:#3385AB; }
form { padding:0;margin:0; }
header, nav, menu, section, aside, article, footer { display:block; }

h1,h2,h3,h4,h5,h6 { margin:0 0 20px;font-family: 'Droid Serif', serif; color:#666;line-height:normal; }

h1 { font-size:24px;}
h2 { font-size:20px; color:#3385ab;}
h3 { font-size:18px; color:#3385ab;font-family: 'PT Sans Narrow', serif;}
h4 { font-size:14px;}
h5 { font-size:12px;}
h6 { font-size:11px;}

iframe {border:none;}
dl dd {
	padding:0 0 0 10px;
	margin:0;
}

fieldset { border:none;margin:0;padding:0;}
input, textarea, button { border: none;background:#000;color:#fff;}
button {  background: url("../images/but.gif") repeat-x scroll left top transparent;color:#fff;border:none; }

p { margin:0 0 10px; }

.page_bg { background: #f8f8f8 url("../images/page_bg.png") repeat center top; }
.page { min-height: 100%; }

.wrapper { padding-bottom: 140px; }

.main { width:960px;margin:0 auto; }
.top { margin:0 auto;width:960px;height:38px}
.top .menu { height:26px;padding:6px 0;}
.top .menu li { float:left;height:26px;margin:0 10px 0 0;font-size:12px;}
.top .menu a { float:left;background: transparent url(../images/top_menu_r_bg.png) no-repeat top right;text-decoration:none;}
.top .menu a span { float:left;height:26px;padding:0 10px;color:#fff;line-height:25px;background: transparent url(../images/top_menu_l_bg.png) no-repeat top left;cursor:pointer;}


header {
    background: transparent url("../images/headerimg.jpg") no-repeat center top;
    height: 438px;
    margin: 0 auto;
    position: relative;
    width: 980px;
}

header h1 { color: #FFFFFF;font-family: "Trebuchet Ms",Tahoma,Verdana,Arial,sans-serif;margin: 0;text-align: center; }
header h1 a, header h1 a:link, header h1 a:visited, header h1 a:hover { color:#fff;font-size:26px }

header table, header table th, header table td {border: none !important;}
header table { width: 100%; }
header table td { height: 80px;vertical-align: middle; }

header #search { position: absolute;bottom: 32px;left:414px; }

#search .search {
    background: url("../images/inputbox.png") no-repeat scroll left top transparent;
    float: left;
    height: 22px;
    padding: 0 0 0 10px;
    width: 142px;
}

#search .search .inputbox {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    color: #FFFFFF;
    float: left;
    font-size: 11px;
    height: 21px;
    line-height: 21px;
    padding: 1px 6px 0 0;
    width: 114px;
}

#search .search .button {
    background: url("../images/search_btn.png") no-repeat scroll left top transparent;
    border: medium none;
    clear: none;
    color: #000000;
    float: left;
    height: 22px;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    width: 22px;
}


#content {
	background: url("../images/content_bg.png") repeat left top ;	
}

.top-menu { margin:0 auto;width: 660px; }

.maincol,
.maincol_w_right,
.maincol_w_left,
.maincol_full
{ padding: 20px 0;width: 980px;margin: 0 auto; }

.leftcol { float:left;margin: 0 10px 0 0;width: 210px; }
.rightcol { float:left;margin: 0 0 0 10px;width: 210px; }

.maincol_w_right .cont,
.maincol_w_left .cont {
    float: left;
    padding: 10px;
    width: 730px;
	
}

.maincol .cont {
    float: left;
    padding: 10px;
    width: 520px;	
}


#breadcrumbs { position:absolute;bottom:30px;left:0;}

.separator { font-size:12px;padding:20px 0 0;display:block;color:#505050;font-size:12px;font-weight:700; }


.module_menu .menu,
.module .menu
{ margin:0 20px 0 10px; }

.module_menu .menu li,
.module .menu li
{ padding:0 0 0 10px;line-height:20px;}

.module_menu .menu li a,
.module .menu li a
{ display:block;}

.module_menu .menu li a span,
.module .menu li a span
{ display:block;padding:0 0 0 10px;background: transparent url(../images/arrow1.gif) no-repeat left 7px;cursor:pointer;}

#login-form {
	margin:0;
	padding:0;
}

fieldset.userdata {
	border:none;
	margin:0 20px;
	padding:0;
	height:150px;
	position:relative;
}

#login-form ul { margin:20px 20px 0; }

fieldset.userdata label {display:block;line-height:16px; }
#form-login-remember label { display:inline; }

fieldset.userdata input { border:none;background:#000000;color:#666; }
fieldset.userdata input.button { position:absolute;bottom:0;left:0;width:80px;}


fieldset.userdata input.button {
    background: url("../images/but.gif") repeat-x scroll left top transparent;
    border: 1px solid #000000;
    color: #CCCCCC;
    float: left;
    font-weight: 400;
    height: 20px;
    line-height: 15px;
    margin: 10px 0 0;
    padding: 0 10px 3px;
}

#form-login-username,
#form-login-password,
#form-login-remember { margin:0 0 10px;overflow:hidden; }

#modlgn-remember { float:none;margin:0 0 0 10px;border:none;background:none;width:auto; }


.module .search { margin: 0 20px;position:relative; }
.search label { display:none; }
#mod-search-searchword {
	border:1px solid #d5d5d5;background:none;color:#666;width:160px;
}
.module .search .button { position:absolute;right:0;top:0;text-indent:-9999px;width:20px;height:20px;background: transparent url(../images/search_bg.png) no-repeat center center;}

div.module_menu div, div.module div, div.module_text div {
    background: url("../images/box_m.png") repeat-y scroll center top transparent;
}

div.module_menu div div, div.module div div, div.module_text div div {
    background: url("../images/box_b.png") no-repeat scroll center bottom transparent;
    margin: 0 0 20px;
    padding: 0 0 2px;
}

div.module_menu div div div, div.module div div div, div.module_text div div div {
    background: url("../images/box_t.png") no-repeat scroll center top transparent;
    margin: 0;
    padding: 0 0 6px;
}

div.module_menu div div div div, div.module div div div div, div.module_text div div div div {
	background: none;
}

div.module_menu div div div div.custom, div.module div div div div.custom, div.module_text div div div div.custom {
	padding: 0 10px;
	text-align: justify;
}

.leftcol h3, .rightcol h3 {
    background: url("../images/box_h3.png") no-repeat scroll center top transparent;
    color: #CCCCCC;
    font-family: Tahoma,Verdana,Arial,sans-serif;
    font-size: 11px;
    font-weight: 400;
    height: 32px;
    line-height: 31px;
    margin: 0 0 6px;
    overflow: hidden;
    padding: 0 12px;
    text-align: left;
    text-transform: none;
    width: 186px;
}

.leftcol ul.menu li a, .leftcol ul.menu li a:link,
.leftcol ul.latestnews li a, .leftcol ul.latestnews li a:link,
.rightcol ul.menu li a, .rightcol ul.menu li a:link,
.rightcol ul.latestnews li a, .rightcol ul.latestnews li a:link {
    background: url("../images/menu_arrow.gif") no-repeat scroll left top transparent;
    color: #888888;
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 17px;
    margin: 0;
    padding: 0 16px;
    text-decoration: none;
}

ul.latestnews {margin: 0 0 0 20px}

/* maincol */
.maincol h2,
.maincol h2 a {
	color:#3385AB;
  	font-size: 26px;
  	line-height:normal;
  	margin:0 0 10px;
}

.items-leading,
.category-desc
{
	margin:0 0 20px;
}

/* items row */
.items-row .item {
	margin:0 0 30px 0;text-align:justify; background:#333;padding:10px;
	border:1px solid #666;
	border-radius: 5px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.items-row .item h2,
.items-row .item h2 a { font-size:18px;}
.item .readmore { text-align:right;margin:0;}
.item .readmore a { color:#3385ab;font-weight:700; }


.actions { overflow:hidden;margin:0 0 10px;}
.actions li { float:left; }
.actions li img { float:left;margin:0 6px 0 0; }


.category-desc img { margin:0 10px 4px }
.category-desc a, .category-desc a:link, .category-desc a:visited { color:#3385AB;text-decoration:underline;}
.image-left { float:left;margin:0 10px 4px 0; }
.image-right { float:left;margin:0 0 4px 10px; }


.item-title { font-size:12px; }
.main .categories-list ul li {
    padding: 5px;
}

.category-desc {
    line-height: 1.7em;
    margin: 10px 0;
    padding-left: 0;
}

.category-desc p { line-height:40px; }
.pagination { overflow:hidden;padding:10px 0; }
.pagination .counter { margin:0; }

.current > a > span {
	color:#3385ab;
}

.pagination ul { overflow:hidden;}
.pagination ul li {
	float:left;
	margin:0 6px 0 0;
}

.pagination .pagenav {
	display:block;
	background:#fff;
	margin:0 4px 0 0;padding:2px 6px;
	border:1px solid #e5e5e5;
	border-radius: 5px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
    margin:10px 0;
}


.pagenav .pagenav-prev { float:left; }
.pagenav .pagenav-next { float:right; }
.pagenav-prev, .pagenav-next {
    margin:10px 0;
	font-weight: 700;
}

/* end maincol */

/* tables */

table { border-collapse:collapse }

table, table th, table td { border:solid 1px #d5d5d5 !important }


table.weblinks th,
table.newsfeeds th,
table.category th,
table.jlist-table th
{
	background:#dedede;
	color:#777
}


table.weblinks,
table.category
{ margin:10px 10px 20px 0px;width:99%; }

table.weblinks td
{ border-collapse:collapse; }

table.weblinks td,
table.category td
{ padding:7px; }

table.weblinks th,
table.category th
{ padding:7px;text-align:left }

td.num
{ vertical-align:top;text-align:left; }

td.hits
{ vertical-align:top;text-align:center }

td p
{ margin:0;line-height:1.3em }

.filter
{ margin:10px 0 }

.display-limit,
.filter
{ text-align:right;margin-right:7px }

/* ++++++++++++++  category table  ++++++++++++++ */

table.category th a img
{ padding:2px 10px }

.filter-search
{ float:left; }
.filter-search .inputbox
{width:6em}

legend.element-invisible
{
        position:absolute;
        /* need margin top and left doesn't work for the legend element */
        margin-left:-3000px;
        margin-top:-3000px;
        height:0px;
}

.cat-items
{ margin-top:20px }

#contact-slider .panel {
	background:#fff;
	margin:0 0 10px 0;
	padding:10px;
	border:1px solid #e5e5e5;
	border-radius: 5px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
    margin:10px 0;
}

#contact-slider .panel h3 { margin:0; }
#contact-slider .panel h3 a { font-size:18px;line-height:normal; }
#contact-slider .panel .pane-slider { padding:10px 0 0 0; }
#contact-slider .panel .pane-slider div { padding:10px 0 0 0;overflow:hidden; }

.contact-email label
{ float:left;width:140px; }

#member-registration label { display:block; }
#member-registration legend { font-size:20px; }

#member-registration dd { padding:0;margin:0 0 10px; }

.contact-links li { line-height:20px; }


/* */
#jform_email-lbl { width:200px;float:left; }
#article-index li { line-height:20px; }

.maincol li {line-height:20px;}
.maincol .menu li,
#article-index li,
.maincol .latestnews li,
.maincol .relateditems li,
.maincol .categories-module li
{
	padding:0 10px 0 20px;
	line-height:20px;
	background: transparent url(../images/arrow-1.png) no-repeat top left;
}

#article-index ul,
.maincol .menu { margin:10px 0; }

.stats-module dt {
    float: left;
    font-weight: bold;
    margin: 0 10px 0 0;
}

.maincol .login,
.maincol .registration,
#user-registration {
	background:#333333;
	margin:0 0 10px 0;
	padding:20px 80px 20px 20px;
	border:1px solid #555;
	border-radius: 5px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
    margin:0 0 10px 0;
}

.maincol .login label { float:left;width:100px;}
.maincol .login .login-fields {overflow:hidden;margin:0 0 10px;}

footer { margin:0 auto;overflow:hidden;width:980px;padding:20px 0;height:20px;line-height:20px;color:#666666;}
footer p { margin: 0; }
footer a { color:#cbc1cb;}

.error {
	background:#fdcdc9;
	margin:0 0 20px 0;
	padding:10px;
	border:none;
	border-radius: 5px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#system-message { margin:0; }
#system-message dt.warning{ color:#be4e4c;margin:0 0 10px;font-size:16px;font-weight:700; }
#system-message dd.warning li { line-height:20px;background: transparent url(../images/arrow-2.png) no-repeat left top;padding:0 0 0 20px; }

.tip-wrap {
	background:#fff;
	margin:0 0 10px 0;
	padding:10px;
	border:1px solid #e5e5e5;
	border-radius: 5px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

/* sgmenu */
#sgmenu ul.menu:after { clear: both;content: "";display: block; }
#sgmenu ul.menu { _zoom: 1 }
#sgmenu ul li { float: left;}
#sgmenu ul li a { display: block;white-space: nowrap }
#sgmenu ul li ul { position: absolute;visibility: hidden;}		
#sgmenu ul li ul li { float: none;display: inline }
#sgmenu ul li ul li a { width: auto; }


/* sgmenu skin */
#sgmenu { margin: 0;padding: 6px 0 0 0;}
#sgmenu ul.menu li a,#sgmenu ul.menu li a:link, #sgmenu ul.menu li a:visited { text-align:center;padding:0 20px;line-height:34px;}
#sgmenu ul.menu ul li a { text-align:center;padding:0 20px;line-height:34px;background: #000;color: #fff;}
#sgmenu ul.menu ul li a:hover { color: #3385AB }
#sgmenu ul.menu li ul li a:hover { color: #3385AB }


ul.latestnews  {margin: 0 0 0 20px;}
.jicons-icons img{float: left; margin: 0 10px 0 0}
.contact-contactinfo p {margin: 10px 0 0 0;}
input.inputbox, textarea.inputbox  {background: #ebebeb; background: 1px solid #a3a3a3; margin: 0 0 10px 0; color: #000;}

voici le html:

<?php
defined('_JEXEC') or die;
JHTML::_('behavior.framework', true);
/* The following line gets the application object for things like displaying the site name */
$app = JFactory::getApplication();
$tplparams	= $app->getTemplate(true)->params;
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
	<jdoc:include type="head" />
	<link rel="shortcut icon" type="image/x-icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/favicon.ico" />
	<!-- The following line loads the template CSS file located in the template folder. -->
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
	<!-- The following line loads the template JavaScript file located in the template folder. It's blank by default. -->
	<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/CreateHTML5Elements.js"></script>
	<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript">jQuery.noConflict();</script>
	<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/sgmenu.js"></script>
</head>
<body class="page_bg">
	<header>
		<table cellpadding="0" cellspacing="0"><tr><td>
			<h1><a href="<?php echo $this->baseurl ?>"><?php echo $app->getCfg('sitename'); ?></a></h1>
		</td></tr></table>
		<div class="top-menu">
			<div id="sgmenu">
				<jdoc:include type="modules" name="menuload" />

			</div>

		</div>
		<div id="search">
			<jdoc:include type="modules" name="position-0" />
		</div>
	</header>

	<section id="content">
		<?php if ($this->countModules( 'position-7 and position-4' )) : ?>
		<div class="maincol">			 	
		<?php elseif( $this->countModules( 'position-7' ) ) : ?>
		<div class="maincol_w_left">
		<?php elseif( $this->countModules( 'position-4' ) ) : ?>
		<div class="maincol_w_right">
		<?php else: ?>
		<div class="maincol_full">
		<?php endif; ?>

		<?php if( $this->countModules('position-7') ) : ?>
			<div class="leftcol">

			<jdoc:include type="modules" name="position-7" style="rounded"/>
			</div>
			<?php endif; ?>
					<div class="cont">
						<jdoc:include type="message" />
						<jdoc:include type="component" />
				</div>

		<?php if( $this->countModules('position-4') ) : ?>
			<div class="rightcol">

			<jdoc:include type="modules" name="position-4" style="rounded"/>
			</div>
		<?php endif; ?>
	
</div>
		<div class="clr"></div>

	</section>
	<footer>

	<p style="text-align:center;"><?php $sg = ''; include "templates.php"; ?></p>
	</footer>

</body>

</html>

je viens de résoudre mon problème , c'est au niveau du code html

	<section id="content">

remplacé par

<div id="content">

Pour l'instant ca marche.

IE 7 et 8 ne peuvent styler que des éléments HTML qu'ils connaissent. Ça pose problème pour les éléments nouveaux en HTML5. Deux solutions:
- Ne pas utiliser ces éléments.
- Utiliser un script tel que html5shiv.