Ad:

HTML and CSS Discussion Thread
Marked Solved
Views: 1060

Mar 25th, 2008

Image showing up twice as much

Expand Post »

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:

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

Similar Threads

css loaded image doesn't show up in browser in HTML and CSS
Code for Image Processing in C
Image in DataGridView in C#
over image not showing in HTML and CSS
image doesn't show in browser using CSS in JavaScript / DHTML / AJAX

Loopster

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

15 posts
since Feb 2008

Permalink

Mar 25th, 2008

Re: Image showing up twice as much

Simple.

You keep calling:

class="title"

That will display the image as stated in your css.

background: url(/images/img04.gif)

techniner

Reputation Points: 12

Solved Threads: 19

Posting Pro

Offline

521 posts
since May 2005

Permalink

Mar 25th, 2008

Re: Image showing up twice as much

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

Loopster

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

15 posts
since Feb 2008

Permalink

Mar 25th, 2008

Re: Image showing up twice as much

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

Loopster

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

15 posts
since Feb 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Css With Different resolution

Next Thread in HTML and CSS Forum Timeline: horizontal menus

DaniWeb Message

Cancel Changes

User Name
Password