1 reply [Last post]
cdallabetta
Offline
newbie
Last seen: 9 years 40 weeks ago
Timezone: GMT-5
Joined: 2008-12-19
Posts: 8
Points: 5

I'm having quite an issue with a template i'm editing for joomla. When I preview the site in Safari, everything is as it should be so far. In firefox, no background images are showing up and there should be at least two so far. Unfortunately, I can't post the site due to it being on my local server, but I'll post both the html and css.

I know the css looks a mess right now, but that's just because it's a found template, i'm still in the process of removing css i wont need.

the background images that won't show up for me are the #pg_bg and #top. I tried putting the #pg_bg image in the body tag, and it still didn't show up.

and as i said, everything is perfect so far when previewed in safari.

html/php:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
JPlugin::loadLanguage( 'tpl_SG1' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<!--[if lte IE 6]>
<link href="templates/<?php echo $this->template ?>/css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link id="JTKLocalCss" href="../Persichettis/css/template.css" rel="stylesheet" type="text/css" />
</head>
 
<body id="page_bg">
 
	<div id="top"></div>
 
	<div id="wrapper">
		<div id="wrapper_inside">
			<div id="holder">
				<div id="holder_inside">
 
					<div id="header">
						<div id="logo">
							<a href="index.php"><?php echo $mainframe->getCfg('sitename') ;?></a>
						</div>	
 
						<div id="news">
							<?php if($this->countModules('user1') and JRequest::getCmd('layout') != 'form') : ?>
 
							<?php else: ?>
							<div class="header">
								<div id="newsflash_long">
									<jdoc:include type="modules" style="rounded" name="top" />
								</div>
							</div>
							<?php endif; ?>
							<div class="header">
								<div id="newsflash">
									<jdoc:include type="modules" style="rounded" name="top" />
								</div>
							</div>
						</div>
					</div>
 
					<div class="pill_m">
						<div id="pillmenu">
							<jdoc:include type="modules" name="user3" />
						</div>
					</div>	
 
					<div class="center">
						<?php if($this->countModules('left') and JRequest::getCmd('layout') != 'form') : ?>
						<div id="leftcolumn">	
							<jdoc:include type="modules" name="left" style="rounded" />
							<?php $sg = 'banner'; include "templates.php"; ?>
						</div>
						<?php endif; ?>
 
						<?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>			
						<div id="maincolumn">
						<?php else: ?>
						<div id="maincolumn_full">
						<?php endif; ?>
							<div class="nopad">				
								<jdoc:include type="message" />
								<?php if($this->params->get('showComponent')) : ?>
									<jdoc:include type="component" />
								<?php endif; ?>
							</div>
						</div>
						<div class="clr"></div>
						<jdoc:include type="modules" name="debug" />
					</div>	
				</div>	
			</div>		
		</div>	
	<div id="content_bottom"></div>
	</div>
 
	<div id="footer">
		<div id="sgf">
			<?php $sg = ''; include "templates.php"; ?>
		</div>
	</div>
	<div id="validation">
		<a href="http://validator.w3.org/check/referer">valid xhtml</a>
		<a href="http://jigsaw.w3.org/css-validator/check/referer">valid css</a>
		<br>
 
 
	</div>
 
</body>
</html>

css:

html {
  height: 100%;
  margin-bottom: 0px;
}
 
form {
  margin: 0;
  padding: 0;
}
 
img,table {
	border: none;
}
 
body {
	font-family: Tahoma, Arial, sans-serif;
	line-height: 1.3em;
	margin: 0;
	padding: 0;
	font-size: 12px;
	background-image:url(../images/bg.jpg);
	background-repeat: repeat;
}
 
body.contentpane {
	background: #FEFEFE;
}
 
p {
	margin-top: 0;
	margin-bottom: 5px;
	text-align: justify;
}
 
a:link, a:visited {
	text-decoration: underline;
	font-weight: normal;
	color: #88611d;
	outline: none;
}
 
a:hover {
	text-decoration: none;
	font-weight: normal;
}
 
input  {
	border: 1px solid #88611d;
	color: #FFF;
	padding: 2px;
	background: #C3984A;
}
 
button {
	color: #FFF;
	font-size: 11px;
	border: 1px solid #88611d;
	background: #C3984A;
}
 
.inputbox {
	border: 1px solid #88611d;
	color: #FFF;
	padding: 2px;
	background: #C3984A;
}
 
.inputbox:hover, input {
	background: #cfa354;
}
 
input.button, .validate  {
	color: #FFF;
	font-size: 11px;
	border: 1px solid #88611d;
	background: #C3984A;
}
 
input.button:hover, .validate:hover, button  {
	background: #cfa354;
	cursor: pointer;
}
 
.search input.button {
	text-align: right;
}
 
/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
 
#page_bg {
	padding: 0;
	background-image:url(../images/bg.jpg);
	background-repeat: repeat;
	min-height: 600px;
}
 
#top {
	background: url(../images/top.png) top center no-repeat;
	height: 69px;
	width: 930px;
	margin-left: 208px;
	margin-top: 5px;
}
 
#wrapper {
	background: url(../images/content.jpg) top center repeat-y;
	width: 925px;
	margin: 0 auto;
}
 
#wrapper_inside {
	background: transparent url(../images/wrapper_inside.jpg) top center no-repeat;
}
 
#holder {
	background: url(../images/holder.jpg) top center no-repeat;
	width: 925px;
	margin-top: -3px;
}
 
#holder_inside {
	width: 900px;
	margin: 0 auto;
}
 
div.center {
	text-align: left;
	margin: 20px auto 10px auto;
	padding: 0;
}
 
#news {
	height: 254px;
	width: 900px;
	margin: 28px 0 10px 0;
	padding: 0;
	overflow: hidden;
}
 
#news h3 {
	color: #eaeaea;
	font-family: Verdana, Tahoma, sans-serif;
	font-size: 14px;
	font-weight: normal;
}
 
#latestnews {
	background: url(../images/latestnews.jpg) top left no-repeat;
	overflow: hidden;
	height: 242px;
	width: 198px;
	padding: 0;
	float: left;
	padding: 6px;
	margin: 0 10px 0 0;
}
 
#latestnews ul {
	margin: 0;
	padding: 0 0 0 6px;
	list-style: none;
	text-align: left;
}
 
#latestnews ul li {
	padding: 0 0 0 16px;
	background: transparent url(../images/bullets.jpg) center left no-repeat;
}
 
#latestnews ul li a {
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 11px;
	color: #c4984a;
	text-decoration: none;
	line-height: 18px;
}
 
#latestnews ul li a:hover {
	text-decoration: underline;
}
 
.header {
	height: 242px;
	width: 750px;
	float: left;
	padding: 6px;
	background: url(../images/header.jpg) top center no-repeat;
	margin-left: 45px;
}
 
 
 
#newsflash  {
	overflow: hidden;
	margin: 0;
	width: 320px;
}
 
#newsflash a, #newsflash_long a{
	color: #ccc;
}
 
#newsflash a:hover, #newsflash_long a:hover {
	text-decoration: none;
}
 
#newsflash_long {
	overflow: hidden;
	margin: 0;
	width: 520px;
}
 
#newsflash div.module div div div, #newsflash_long div.module div div div{
	text-align: left;
	font-size: 11px;
	text-align: justify;
	color: #aaaaaa;
}
 
#newsflash div.module div div div table.contentpaneopen, #newsflash_long div.module div div div table.contentpaneopen {
	margin: 0 0 0 2px;
}
 
#content_bottom {
	height: 8px;
	margin: 0 auto;
}
 
#logo {
	padding: 0;
	text-align: center;
	margin: 0 auto;
	width: 600px;
}
 
#logo a, #logo a:link, #logo a:hover {
	font-weight: normal;
	font-family: Georgia, Tahoma, Verdana, Arial, sans-serif;
	font-size: 26px;
	padding: 0;
	margin: 0;
	letter-spacing: 1px;
	color: #302f2f;
	text-decoration: none;
	outline: none;
	line-height: 36px;
}
 
.pill_m {
	text-align: center;
	padding: 0;
	background: url(../images/menu.jpg) top left repeat-x;
	height: 40px;
	width: 863px;
	margin-left: 22px;
}
 
#pillmenu {
	float: left;
	margin: 0;
}
 
#pillmenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
 
#pillmenu li {
	float: left;
	margin: 0;
	padding: 0;
	height: 40px;
	background: url(../images/menu_li.jpg) center right no-repeat;
}
 
#pillmenu li:hover {
 
}
 
#pillmenu li a#active_menu-nav {
	color: #FFF;
}
 
#pillmenu li a {
	font-family: Georgia, Tahoma, Verdana, sans-serif;
	font-size: 16px;
	float: left;
	display: block;
	line-height: 40px;
	padding: 0 14px 0 8px;
	color: #88611d;
	text-decoration: none;
	font-weight: normal;
	text-transform: uppercase;
}
 
#pillmenu li a:hover {
	color: #FFF;
}
 
#leftcolumn ,#rightcolumn {
	margin: 0;
	width: 184px;
	float: left;
	padding: 0 0 10px 0;
	text-align: left;
}
 
div#maincolumn {
	float: left;
	width: 706px;
	margin: 0;
	padding: 0 0 10px 10px;
}
 
div#maincolumn_full {
	float: left;
	width: 706px;
	margin: 0;
	padding: 0 0 0 10px;
}
 
div.nopad {
	overflow: hidden;
	padding: 0;
}
 
div.nopad ul {
	clear: both;
}
 
td.middle_pad {
	width: 20px;
}
 
#banner_l {
	text-align: left;
	padding: 0 0 0 24px;
}
 
#validation {
	width: 280px;
	margin: 0 auto;
	text-align: center;
	height: 20px;
}
 
#validation a {
	color: #c9c9c9;
	font-size: 11px;
	text-decoration: underline;
	padding: 0 2px;
}
 
#validation a:hover {
	color: #FFF;
	padding: 0 2px;
	text-decoration: none;
}
 
#footer {
	margin: 0 auto;
	width: 920px;
	text-align: center;
	vertical-align: top;
	padding: 0;
	line-height: 20px;
}

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 6 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

First, tell us if ANY images

First, tell us if ANY images are appearing in Firefox. We only know the backgrounds don't.

Also this same copy of FF can see images on other websites?

Your files are local; sometimes image problems resolve themselves once they go online.

If you type in the absolute url of an image in your Firefox, can you see the image? Since Safari is showing them, it's not that the paths are bad, but possibly either FF wants absolute paths locally, or images may have been turned off in your FF.

Those are some of the first things I do when I don't see images. It helps narrow down where the problem is.

I'm no expert, but I fake one on teh Internets