Results 1 to 6 of 6

Thread: spaces for images in right place but no images

  1. #1
    Join Date
    Jun 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation spaces for images in right place but no images

    I am using this css in a javascript app that produces a report in an html page at the end.
    As an index.html file it worked fine...When I was using a separate css.txt file I got nothing so I added the style to the html. The background shows up and the space for the images are in the right place but the images don't show up. The buttons show up but not the spacers in between them.
    Since the files are local I wondered if the url reference was the issue but I tried removing those and it still didn't fix it. Do you have any suggestions or insights about how I can fix this?
    Thanks in advance for any help


    Code:
    <STYLE TYPE="text/css" MEDIA=screen>
    * {margin:0px;padding:0px;top:0px;left:0px;}
    body{
    	text-align: center;
    	background-color: #44607e;
    }
    #central{
    	margin-right: auto;
    	margin-left: auto;
    	margin-top: 10px;
    	position: relative;
    	width: 777px;
    	text-align: left;
    	background-color: #FFFFFF;
    }
    #header{
    	background-image: url(images/header.jpg);
    	height: 226px;
    	width: 777px;
    	left: 0px;
    	top: 0px;
    }
    #header a{
    	font-size: 18px;
    	font-style: normal;
    	line-height: normal;
    	font-weight: bolder;
    	color: #FFFFFF;
    	text-decoration: none;
    	margin-left: 112px;
    	font-family: "Arial", Helvetica, mono;
    	margin-top: 35px;
    }
    #navlist{
    	margin-left: 0px;
    	padding-left: 0px;
    	white-space: nowrap;
    	position: absolute;
    	height: 27px;
    	width: 777px;
    	top: 225px;
    }
    #navlist li{
    	display: inline;
    	list-style-type: none;
    }
    #navlist a {
    	padding: 3px 10px;
    	background-image: url(images/button.gif);
    	height: 20px;
    	width: 91px;
    	display: inline;
    	position: absolute;
    	text-align: center;
    	color: #fff;
    	text-decoration: none;
    }
    #navlist a:hover{background-image: url(images/buttonover.gif);}
    #n1{left: 0px;}
    #n2{left: 111px;}
    #n3{left: 222px;}
    #n4{left: 333px;}
    #n5{left: 444px;}
    #n6{left: 555px;}
    #n7{left: 666px;}
    #leftside{
    	float: left;
    }
    #leftside h3{
    	border-top-width: 3px;
    	border-right-width: 3px;
    	border-bottom-width: 0px;
    	border-left-width: 3px;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-top-color: #00306f;
    	border-right-color: #00306f;
    	border-bottom-color: #00306f;
    	border-left-color: #00306f;
    	width:200px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	color: #333333;
    	background-color: #FFFFFF;
    	text-align: center;
    	display: block;
    	margin-left: 35px;	
    	margin-top: 35px;	
    }
    #content{
    	margin-top: 252px;
    	position: absolute;
    	width: 777px;
    	background-color: #FFFFFF;
    }
    #picture1{
    	margin-left: 35px;
    	height: 150px;
    	width: 200px;
    	background-image: url(images/money1.jpg);
    	border: 3px solid #00306f;
    }
    #picture2{	
    	margin-left: 35px;
    	height: 150px;
    	width: 200px;
    	background-image: url(images/bg.gif);
    	border: 3px solid #00306f;
    }
    #picture3{	
    	margin-left: 35px;
    	height: 150px;
    	width: 200px;
    	background-image: url(images/sponsor.jpg);
    	border: 3px solid #00306f;
    }
    #picture4{	
    	margin-left: 35px;
    	height: 150px;
    	width: 200px;
    	background-image: url(images/MoneyRain.jpg);
    	border: 3px solid #00306f;
    }
    #footer{
    	clear: both;
    	background-color: #FFFFFF;
    	position: relative;
    	height: 46px;
    	background-image: url(images/footer.gif);
    	background-repeat: no-repeat;
    	background-position: right bottom;
    }
    #rightside{
    	float: right;
    	width: 460px;
    	background-color: #FFFFFF;
    	margin-right: 15px;
    	margin-top: 20px;
    	overflow: hidden;
    }
    #rightside p{
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #666666;
    	margin-left: 0px;
    	margin-bottom: 20px;
    	width: 460px;
    }
    #rightside h1{
    	margin: 10px 0px 10px 0px;
    	width: 300px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	color: #033387;
    }
    #rightside span{
    	margin-top: 10px;
    	margin-bottom: 4px;
    	width: 430px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #649721;
    }
    #rightside a{color: #666666;}
    #footer p{
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #FFFFFF;
    	float: right;
    	padding-top: 23px;
    	margin-right: 10px;
    }
    #footer a{color: #fff;}
    #footer a:hover{color: #fff;}
    #imagepreloader{
    	visibility: hidden;
    	overflow: hidden;
    	height: 0px;
    	width: 0px;
    }
    
    </STYLE>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I may have missed it but I see no reference to a spacer image in your posted code.

    Here are some of the rules (the ones that pertain to your question) governing css style background images -

    • If a stylesheet is external, the paths to the images it uses for background images are relative to the stylesheet, not to the page using the stylesheet.
    • The convention: background-image:url(some.gif); must still be used, even for local pages.


    Now, if your spacer image is hard coded (or injected via javascript as an image tag) onto your page, its path must be relative to the page, not to the script.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    In the index htm file everything looks right, but in my output page the spaces for the images show up but not the images. The images are in a subfolder called images. The installer adds this folder with the other files when the program is installed. I have uploaded the zipped files/folders and you can get them here

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    What image isn't showing?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default None of them

    Thanks for your question....
    None of the images or buttons show up.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    They all show up for me here using the archive you posted.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •