Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
rydavim
18,814 PointsUploaded site looks different than local version?
[RESOLVED]
My local files and pages seem to work perfectly. However, when I upload them to my host and view them live on my website using Firefox 32.0.3, several issues appear.
14:39 UTC-4 on 2014-10-13
Current Version @
The icons for Twitter and Facebook that appear in the footer in the local version are now absent on live.
There are also icon issues on the contact page for the third item, Twitter.
What puzzles me is that Firefox displays the local files without trouble, and the issues seem to only apply to certain images.
Safari 7.1 displays the footer elements on the contact and about pages, but shows broken links on the portfolio (index) page. It also seems to display the contact icons correctly, unlike Firefox.
What do I do about these inconsistencies? Or should I just wait until I have a sounder foundation?
3 Answers
Wayne Priestley
19,579 PointsHi Eleanor,
At first it sounds like a img path problem, but as you sometimes get to see the images depending on which browser your using rules that out.
If you switch from one browser to the next, do you eventually see every image on your site?
Or are there some images that you never see even when changing browsers?
Also, Did you upload the whole folder your website was built in?
Or did you upload individual folders and files?
Do your image paths in your html or css all start with a relative or absolute path? e.g
Completely relative: <img src="kitten.png"/>
Absolute in all respects: <img src="http://www.foo.com/images/kitten.png">
Are your image links in your html or css or a mix of both?
Wayne Priestley
19,579 PointsHi Eleanor,
Your images in your footer on your home page are not displaying because of the file path.
You have:
<img src="/img/twitter etc etc"
It should be:
<img src="img/twitter etc etc"
I'm going to go through some more code for you now.
Wayne Priestley
19,579 PointsI don't see any more image problems, I'm using Safari.
Can you point out anymore issues your having with images to me please Eleanor, and i'll take a look at them.
Wayne Priestley
19,579 PointsIn your css can i suggest trying double quotes instead of single for your image links, it may fix the issue with firefox.
background-image: url("../img/phone.png");
rydavim
18,814 PointsThank you. I fixed the starting slash and switched to double quotes~~, but no joy.~~ Oh! Some joy - everything looks great now in Safari. Firefox is still misbehaving.
Wayne Priestley
19,579 PointsAre your image extensions PNG? If so change the extension on your image files then in your html.
Did you try fixing the slash and quotes one at a time or both together?
rydavim
18,814 PointsThe site now seems to be displaying and working 100% correctly in Safari 7, IE 10, and Mercury. At this point, I'm willing to give up on Firefox for the time being and focus on continuing the project. I expect with some more experience under my belt, it will be easier to attempt to tackle these compatibility problems.
Thanks so much for the help!
Wayne Priestley
19,579 PointsGlad it's sorted (almost ) :)
Don't be shy about asking for help or a second opinion on anything though Eleanor, thats what the forum is here for, we all started where you are now, with the same questions.
on3iro
12,644 PointsYour contact page looks fine to me. The sn-icons in your footer bar seem to be missing, though. Maybe you should try re-uploading them.
rydavim
18,814 Pointsrydavim
18,814 PointsIf you switch from one browser to the next, do you eventually see every image on your site?
So far the only images missing consistently are the footer images on the index page. Other image issues seem to be inconsistent between browsers.
Did you upload the whole folder your website was built in?
No, I uploaded individual files and folders. They seem to all be in place on the server, no errors or missing files.
Do your image paths in your html or css all start with a relative or absolute path
They use relative paths. I tried a solution found on the forums of using /img/filename.extension, but the extra slash didn't help.
Are your image links in your html or css or a mix of both?
The footer images are in the html documents, the contact icons are background images in CSS.