Display problem with image in header

by Thom01

Posted: 15 years ago 13 replies

PROGRAMMING

I've tried troubleshooting this but have gotten to about the limit of my knowledge and understanding. If someone could take a look at this and tell me where there might be a problem, it will save me pulling out more of my already thinning hair.

I found a template that I'd like to use for a website project, but am having difficulty with the main header image displaying. It displays well in my HTML text editor when I'm building the page, but when I load the files up to my web host and call it up to see how it looks, the blue swash (or wave) in the header doesn't display. It won't even display correctly in the original files I downloaded from oswd.org and uploaded to my web host. The template is called "Blew Wave" and can be found here in the second row of templates.

In building the site, I haven't changed anything in the .css file or in the page coding, so there's nothing that I could have changed that is causing this not to display. I tried contacting the developer of this template, but he won't answer any questions unless it's being used in an account in his web server business: "We do provide support for all of our templates provided that we host them on our servers." What a bummer!

After looking at the coding in both the .css file and the page index file, I don't discern anywhere where there might be a mistake in the coding. Could someone take a look at this and see if they can figure out what the problem is? An example of how this is displaying in the original files through my web host can be seen here. As you can see, the blue swash in the header is not displaying.

Below is the coding in the .css file:

/*
Designed by Joe Rozzi from Cirkuit Networks, Inc. - cirkuit.net
Free to use, please give credit for original design.
*/
body {
margin-top:0px;
margin-bottom:25px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#main {
width:750px;
color:#666666;
text-align:center;
margin:0 auto;
font-size:80%;
line-height:130%;
background-color:#FFFFFF;
}

#header_wrapper, #nav_wrapper, #content_wrapper {
width:765px;
}

/* top right breadcrumbs */
#breadcrumbs {
float:right;
margin:0 10px -12px 0;
font-size:85%;
}

/* blue wave header image */
#header {
clear:right;
background-image:url("images/header-1.gif");
background-repeat:no-repeat;
text-align:left;
}
#header h1 { color:#2a56d6; height:115px; margin:0 15px; padding:0; line-height:2em; font-size:180%; font-weight:normal; }

/* left navigation area */
#content_left {
float:left;
width:145px;
line-height:135%;
padding:5px;
margin:0 0 10px 0;
text-align:left;
font-size:100%;
}
#content_left p {
padding:0;
margin:8px 0 0 8px;
}
#content_left ul { /* starts left navigation */
margin:8px 0 0 8px;
padding:0;
text-align:left;
}
#content_left li { /* main navigation list item */
display:block;
list-style:none;
width:100%;
margin:0;
padding:0;
font-weight:bold;
}

#content_left li.sub { /* sub navigation list item */
display:block;
list-style:none;
width:100%;
padding:0;
margin:0 0 0 10px;
font-weight:normal;
}

#content_left a, #content_left a:visited { /* mouse out navigation anchor link styles */
display:block;
width:100%;
margin:0px;
padding:0px;
text-decoration:none;
color:#666666;
border-bottom:1px solid #FFFFFF;
}
#content_left a:hover, #content_left a:visited:hover { /* mouse over navigation anchor link styles */
display:block;
width:100%;
margin:0px;
padding:0px;
color:#2a56d6;
text-decoration:underline;
border-bottom:1px solid #FFFFFF;
}

/* main textual content area */
#content {
padding:5px;
margin:0 0 10px 0;
line-height:140%;
background-color:#FFFFFF;
text-align:left;
float:right;
width:590px;
}
#content p {
padding:0;
margin:8px 0 0 2px;
}
#content_l { /* main textual content area (left box) */
margin:0 auto;
padding:5px;
display:inline;
float:left;
width:48%;
}
#content_r { /* main textual content area (right box) */
margin:0 auto;
padding:5px;
display:inline;
float:right;
width:48%;
}

/* header tags */
h1 {
color:#2a56d6;
font-size:130%;
display:block;
width:100%;
}
h2 {
font-size:120%;
display:block;
width:100%;
border-bottom:2px solid #F0F0F0;
margin:0;
padding:0;
color:#557ef5;
}

/* anchor links */
a, a:visited {
text-decoration:none;
color:#2a56d6;
}
a:hover, a:visited:hover {
color:#2a56d6;
text-decoration:underline;
}

/* footer */
#footer_wrapper {
margin:0 auto;
padding:0;
width:765px;
border-top:6px double #CCCCCC;
font-size:80%;
text-align:center;
clear:both;
}
#footer {
padding-right:5px;
margin:0;
line-height:190%;
text-align:right;
clear:both;
vertical-align:middle;
}

Thank you to anyone who can solve this mystery.

#display #header #image #problem

Havenhood 15 years ago

When I try accessing that image, I get a 403 error. What's the permission level on your images directory?

Edit: Do you have a .htaccess file in your root directory that may be blocking access?
- Thanks
- 1 reply
Signature

--= -Spazzle- =--
{{ DiscussionBoard.errors[3232952].message }}
- Thom01 15 years ago
  
  Originally Posted by Havenhood
  
  When I try accessing that image, I get a 403 error. What's the permission level on your images directory?
  
  Yes, that's what the developer mentioned also when I emailed him. I tried accessing an image from one of my other websites and got the same 404 error, so I just figured that was normal since that image WAS displaying.
  
  I'm not a techy. Where do I find the permission level to change it if necessary? (Edit: I checked the CPanel and I've made no effort to password protect any of the directories in my account.)
  
  If this were the problem, wouldn't it be occurring on my other websites on this same web host? All my other site images are displaying properly.
  
  Originally Posted by Havenhood
  
  Edit: Do you have a .htaccess file in your root directory that may be blocking access?
  
  Not that I'm aware of. I just checked on that and there is no .htaccess file in either the public_html folder or the root directory that I can see. I don't have this problem with the 4 other sites where images are displayed on this same web hosting account.
  
  Thanks
  
  {{ DiscussionBoard.errors[3233044].message }}

Havenhood

15 years ago

How did you upload the image? Where did you upload the image to?

When I access your Index of /images directory, it's coming up empty.

Thanks
1 reply

Signature

--= -Spazzle- =--

{{ DiscussionBoard.errors[3233132].message }}

Thom01

15 years ago

Originally Posted by Havenhood

How did you upload the image? Where did you upload the image to?

I FTPed it into the "images" folder in the appropriate website folder in the public_html directory.

I just checked, and the image is there in the "images" folder, along with several other images that I uploaded to that folder. I tried refreshing the index page with the same result: it's still not displaying the blue swash.

Thanks
1 reply

{{ DiscussionBoard.errors[3233193].message }}

Havenhood

15 years ago

I believe you, but I'm still getting the same results. There's still some type of permissions issue or the file isn't actually there. Try to upload/move to the main public_html directory and change the line background-image:url(images/header-1.gif); to background-image:url(header-1.gif); I just want to see if shows.

Don't take me wrong. You did upload in binary mode, right? Just trying to cover all bases.

Thanks
1 reply

Signature

--= -Spazzle- =--

{{ DiscussionBoard.errors[3233225].message }}

Thom01

15 years ago

Originally Posted by Havenhood

Hi Havenhood,

If the permission issue were a problem, wouldn't I be experiencing this same problem with my other domains not displaying images?

I haven't done anything different with this newest domain than what I did when I installed the other domains in the account. All were installed in the very same way. This is why I can't understand why this domain, in particular, is not displaying the image. The other domains have .css files in them also. This is why I think it may be a coding problem of some sort. But, hey, what do I know!?! I'm not an expert at this. I'm ready to be proved wrong, if such can be done.

I tried your suggestion, and sure enough, the image was still not displaying. (And, yes, I changed the .css file as suggested, just to eliminate that possible error from your troubleshooting advice.)

Thanks
2 replies

{{ DiscussionBoard.errors[3234645].message }}

Havenhood

15 years ago

I've installed the theme on a Hostgator domain and everything displays as it should. It must be a permissions issue. Log-in to your account and reset the image permissions to 644 by right clicking the image and selecting the appropriate options.

EDIT: I get the same error/problem when the image exists and the permissions are set wrong.

Another option would be to remove all the files and re-upload to your server.

Thanks
1 reply

Signature

--= -Spazzle- =--

{{ DiscussionBoard.errors[3235415].message }}

Thom01

15 years ago

Originally Posted by Havenhood

EDIT: I get the same error/problem when the image exists and the permissions are set wrong.

Thanks for the directions, Havenhood. I'm on HostGator also. I'll give this a try and see what gives. Will get back when I've had a chance to try this.

Edit: Wait. When I'm in the Cpanel, where do I go to find the image to right click on? I'm not that knowledgeable about using Cpanel. Do I have to go in through the File Manager and find the image there?

Thanks
1 reply

{{ DiscussionBoard.errors[3235571].message }}

Havenhood 15 years ago
I don't recommend Cpanel's File Manager. This may be the problem.

Steps:
- Browse to the file and click on it,
- Select the option to change permissions (should be on the right),
- Select the appropriate permission options to set to 0644 (type in 0644).
- Click the Save button.
You should download FileZilla - Client Download (Free FTP Client), and do all of your uploading and maintenance with it.

EDIT: The file should be set to 644 by default but I don't use File Manger, so I have no idea how it sets default permissions... Install and use FileZilla.
- Thanks
- 1 reply
Signature

--= -Spazzle- =--
{{ DiscussionBoard.errors[3235685].message }}
- Thom01 15 years ago
  
  Thanks for the directions. I managed to find it through the File Manager in CPanel and made the change. The default setting on all of my image files in each of the domains I have was set to 755.
  
  Anyway, changing the permission to 644 did not work for me.
  
  I have called HG customer service before, and the rep I got wasn't able to figure out what the problem was. I may have to make another call and see if I can get a pair of fresh eyes to look at it again, explaining the fixes to them that you have mentioned and see if someone else can figure it out.
  
  An interesting thing: All my other domains have their "image" folders set to 755 permission, and yet they are all displaying the images when I go there on my computer. This really doesn't make any sense to me!?!
  
  Thanks for all your help, anyway.
  
  P.S. I use CoffeeCup FTP and found how to do this from the FTP client, so thanks for that little bit of information. I wasn't aware that permisssions could be changed using the FTP client. It works just the same as with the CP File Manager.
  
  Thanks
  
  {{ DiscussionBoard.errors[3235933].message }}

Havenhood 15 years ago

Not sure how this double post happened.
- Thanks
Signature

--= -Spazzle- =--
{{ DiscussionBoard.errors[3235426].message }}

SteveJohnson

15 years ago

I FTPed it into the "images" folder in the appropriate website folder in the public_html directory.

This suggests that the 'images' folder isn't in the correct spot. It should NOT be inside the 'appropriate website folder', it should be directly in the public_html directory.

Code:

/
  cgi-bin
  public_html
    index.html
    images(folder)
      image1.jpg
      image2.jpg

Thanks
1 reply

Signature

The 2nd Amendment, 1789 - The Original Homeland Security.

Gun control means never having to say, "I missed you."

{{ DiscussionBoard.errors[3233239].message }}

Thom01

15 years ago

Originally Posted by SteveJohnson

This suggests that the 'images' folder isn't in the correct spot. It should NOT be inside the 'appropriate website folder', it should be directly in the public_html directory.

Code:

/
  cgi-bin
  public_html
    index.html
    images(folder)
      image1.jpg
      image2.jpg

Hi Steve,

I understand what you are saying and the point you are making (I think). The fact is that I have more than just one domain in this hosting account. But none of the other images I have set up in this way are having a problem displaying. I have the main domain established in the public_html folder along with its index and image files. I also have ABC.com, DEF.com, GHI.com, JKL.com and XYZ.com folders in the public html folder, each with their own image files in their respective folders.

For whatever the reason, I'm not having any problem with the images in any of the other domains not displaying. But I am having a problem with the image in the XYZ.com folder displaying.

Code:

 /
  cgi-bin
  public_html
    index.html
    images(folder)
      image1.jpg
    DEF.com
       images(folder)
         image1.jpg
    GHI.com
       images(folder)
         image1.jpg
    JKL.com
       images(folder)
         image1.jpg
    XYZ.com
       images(folder)
         image1.jpg

By "appropriate folder" I'm speaking of the XYZ.com images folder, which is the appropriate image folder for the image that website is endeavoring to display but which is not displaying.

What I'm saying is: All the other images that are in their "appropriate website folders" are displaying properly. Why this particular image in this newest website folder (XYZ.com) is not displaying is a mystery to me.

Thanks

{{ DiscussionBoard.errors[3234552].message }}

Display problem with image in header

Trending Topics

How to add Backlink ? I am under thread of losing the job

Which Social Platform Is Giving You the Best ROI This Year?

Is Off-page SEO become hard as Ai Energizes

Digital Marketing & Instagram Growth -- Beginner Friendly Strategies?

How you guys normally spend your weekend?