HTML and CSS

Image showing up twice as much

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Feb 2008

Posts: 14

Reputation: Loopster is an unknown quantity at this point

Solved Threads: 0

Loopster

Offline

Newbie Poster

Image showing up twice as much

Mar 25th, 2008

Hello,
I have put together code for a website using a working directory where all looked fine. Then ported the code over to the production URL - with some changes that I checked over - and now I'm getting a duplication of an image img04.gif that is coded in the common-style.css

The website is www.thestuffsafari.com The 25 pixel image shows up 12 times on the homepage, and should only be 6. The production URL is a Linux server, the working server was windows. But I really only made changes to directories, which I checked over very carefully...

Anyone see why the problem?

Here is the code:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

/* Released 20080305 */
 
* {
	margin: 0;
	padding: 0;
}
 
 
body {
	margin: 20px 0;
	background: #FFFFFF;
	font: normal 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #666666;
}
 
a {
	color: #29A3E1;
}
 
a:hover {
	text-decoration: none;
	color: #1A7196;
}
 
/* Boxed */
 
.title {
	padding-left: 30px;
	background: url(/images/img04.gif) no-repeat left center;
}
 
.boxed1 .title {
	height: 24px;
	padding-top: 5px;
	font-size: 100%;
}
 
.boxed1 .content {
	background: url(/images/img04.gif) no-repeat left bottom;
	padding: 20px;
}
 
.boxed2 .title {
	font-size: 182%;
}
 
.boxed2 .content {
	background: url(/images/img04.gif) no-repeat left bottom;
	padding: 20px;
}
 
.boxed3 .title {
	font-size: 129%;
}
 
.boxed3 .content {
	background: url(/images/img04.gif) no-repeat left bottom;
	padding: 20px;
}
 
.boxed3 ol, .boxed3 ul {
	margin-left: 1em;
}
 
 
/* Header */
 
#header {
	width: 760px;
	height: 161px;
	margin: 0 auto;
	background: url(/images/ele03.jpg) no-repeat 100% 50px;
	border-bottom: 5px solid #29A4E1;
}
 
/* Logo */
 
#logo {
	float: left;
	width: 239px;
	height: 160px;
	background: #9A8825 url(/images/img01.jpg) no-repeat;
	border-right: 1px solid #FFFFFF;
	text-align: center;
}
 
#logo h1 {
	padding-top: 5px;
	text-transform: lowercase;
	letter-spacing: -2px;
	font-size: 36px;
	font-weight: normal;
}
 
#logo h2 {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 9px;
}
 
#logo a {
	text-decoration: none;
	color: #FFFFFF;
}
 
 
/* Top */
#top {
	float: left;
	width: 520px;
	height: 49px;
	background: #B09733 url(/images/ele02.jpg) no-repeat;
	border-bottom: 1px solid #FFFFFF;
}
 
#top h1 {
	padding-top: 11px;
	text-transform: lowercase;
	letter-spacing: -2px;
	font-size: 28px;
	font-weight: normal;
}
 
 
/* Menu */
 
#menu {
	clear: both;
	float: none;
	width: 760px;
	height: 32px;
	color: #666666;
        margin: 0 auto;
	border-bottom: 1px solid #FFFFFF;
}
 
 
#menu a:hover {
	border-top-color: #1A7196;
}
 
#menu .active a {
}
 
#menu a b {
	text-decoration: underline;
}
 
/* Page */
 
#page {
	width: 760px;
	margin: 0 auto;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
}
 
/* Content */
 
#content {
	float: right;
	width: 480px;
	padding: 20px;
	border-bottom: 1px solid #FFFFFF;
}
 
#content p, #content ol, #content ul {
	line-height: 152%;
}
 
 
/* HIDE MENU AND ITEMS FOR PRINTING */
 
 
@media print {
.printhide 	{ display:none; }
.printhelp	{ width:600px; }
}
@media screen{
.printonly 	{ display:none; }
}
 
 
 
 
/* Sidebar */
 
#sidebar {
	float: left;
	width: 200px;
	padding: 20px;
}
 
/* News */
 
#news {
	padding-bottom: 0;
}
 
#news ul {
	list-style-type: square;
}
 
#news li {
	margin-bottom: 15px;
}
 
#news h3 {
	margin-bottom: 10px;
	text-transform: uppercase;
	font-size: 77%;
}
 
#news h3 a {
	display: block;
}
 
#news p {
	font-size: 85%;
}
 
/* Welcome */
 
#welcome {
	margin-bottom: 20px;
}
 
/* Samples */
 
#sample1, #sample2 {
	float: left;
	width: 230px;
}
 
#sample1 {
}
 
#sample2 {
	margin-left: 20px;
}
 
/* Footer */
 
#footer {
	width: 760px;
	margin: 0 auto;
	padding: 20px 0;
	border-top: 5px solid #29A4E1;
}
 
#footer p {
	text-align: center;
	font-size: 77%;
}

/* Released 20080305 */

* {
	margin: 0;
	padding: 0;
}


body {
	margin: 20px 0;
	background: #FFFFFF;
	font: normal 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #666666;
}

a {
	color: #29A3E1;
}

a:hover {
	text-decoration: none;
	color: #1A7196;
}

/* Boxed */

.title {
	padding-left: 30px;
	background: url(/images/img04.gif) no-repeat left center;
}

.boxed1 .title {
	height: 24px;
	padding-top: 5px;
	font-size: 100%;
}

.boxed1 .content {
	background: url(/images/img04.gif) no-repeat left bottom;
	padding: 20px;
}

.boxed2 .title {
	font-size: 182%;
}

.boxed2 .content {
	background: url(/images/img04.gif) no-repeat left bottom;
	padding: 20px;
}

.boxed3 .title {
	font-size: 129%;
}

.boxed3 .content {
	background: url(/images/img04.gif) no-repeat left bottom;
	padding: 20px;
}

.boxed3 ol, .boxed3 ul {
	margin-left: 1em;
}


/* Header */

#header {
	width: 760px;
	height: 161px;
	margin: 0 auto;
	background: url(/images/ele03.jpg) no-repeat 100% 50px;
	border-bottom: 5px solid #29A4E1;
}

/* Logo */

#logo {
	float: left;
	width: 239px;
	height: 160px;
	background: #9A8825 url(/images/img01.jpg) no-repeat;
	border-right: 1px solid #FFFFFF;
	text-align: center;
}

#logo h1 {
	padding-top: 5px;
	text-transform: lowercase;
	letter-spacing: -2px;
	font-size: 36px;
	font-weight: normal;
}

#logo h2 {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 9px;
}

#logo a {
	text-decoration: none;
	color: #FFFFFF;
}


/* Top */
#top {
	float: left;
	width: 520px;
	height: 49px;
	background: #B09733 url(/images/ele02.jpg) no-repeat;
	border-bottom: 1px solid #FFFFFF;
}

#top h1 {
	padding-top: 11px;
	text-transform: lowercase;
	letter-spacing: -2px;
	font-size: 28px;
	font-weight: normal;
}


/* Menu */

#menu {
	clear: both;
	float: none;
	width: 760px;
	height: 32px;
	color: #666666;
        margin: 0 auto;
	border-bottom: 1px solid #FFFFFF;
}


#menu a:hover {
	border-top-color: #1A7196;
}

#menu .active a {
}

#menu a b {
	text-decoration: underline;
}

/* Page */

#page {
	width: 760px;
	margin: 0 auto;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
}

/* Content */

#content {
	float: right;
	width: 480px;
	padding: 20px;
	border-bottom: 1px solid #FFFFFF;
}

#content p, #content ol, #content ul {
	line-height: 152%;
}


/* HIDE MENU AND ITEMS FOR PRINTING */


@media print {
.printhide 	{ display:none; }
.printhelp	{ width:600px; }
}
@media screen{
.printonly 	{ display:none; }
}




/* Sidebar */

#sidebar {
	float: left;
	width: 200px;
	padding: 20px;
}

/* News */

#news {
	padding-bottom: 0;
}

#news ul {
	list-style-type: square;
}

#news li {
	margin-bottom: 15px;
}

#news h3 {
	margin-bottom: 10px;
	text-transform: uppercase;
	font-size: 77%;
}

#news h3 a {
	display: block;
}

#news p {
	font-size: 85%;
}

/* Welcome */

#welcome {
	margin-bottom: 20px;
}

/* Samples */

#sample1, #sample2 {
	float: left;
	width: 230px;
}

#sample1 {
}

#sample2 {
	margin-left: 20px;
}

/* Footer */

#footer {
	width: 760px;
	margin: 0 auto;
	padding: 20px 0;
	border-top: 5px solid #29A4E1;
}

#footer p {
	text-align: center;
	font-size: 77%;
}

Last edited by peter_budo; Mar 25th, 2008 at 4:05 pm. Reason: Keep It Organized - please use [code] tags

•

Join Date: May 2005

Posts: 514

Reputation: techniner is an unknown quantity at this point

Solved Threads: 19

techniner

Offline

Posting Pro

Re: Image showing up twice as much

Mar 25th, 2008

Simple.

You keep calling:

class="title"

That will display the image as stated in your css.

background: url(/images/img04.gif)

Did my post help?

Visit Little Jon's Web Portal
Utilize Jon Coiro's Tech Support Remote Services
Need to Increase Your Traffic?

•

Join Date: Feb 2008

Posts: 14

Reputation: Loopster is an unknown quantity at this point

Solved Threads: 0

Loopster

Offline

Newbie Poster

Re: Image showing up twice as much

Mar 25th, 2008

Techniner,
Thanks for the look and reply. I'll work at it with your suggestion in mind. The odd thing is, none of this showed up when under my worksite, it only showed up 2X when moved over, and I didn't change any of the code in that CLASS area. I was wondering if the common-style.css "No Repeat" had something to do with it...
Loopster

•

Join Date: Feb 2008

Posts: 14

Reputation: Loopster is an unknown quantity at this point

Solved Threads: 0

Loopster

Offline

Newbie Poster

Re: Image showing up twice as much

Mar 25th, 2008

Techniner,
The problem is solved. I guess it just didn't make sense how the problem didn't show up before now. But, based on your suggestion, hunted down the prob and mods were made and it's good to go.
Thanks again!
Carl