[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Need help with icons not displaying correctly on website

Posted on 2015-02-12
9
Medium Priority
?
70 Views
Last Modified: 2015-04-13
Good afternoon,

I need some help with our website, having trouble with some icons and title displaying on our homepage, please take a look at http://www.webtrixzambia.com/cfb, if you check the homepage, under where it says "calendar" -->> should show a calendar icon, and under where it says "aid" should show an aid icon...Also the text not reading fully.. Make appointment and Emergency hot line text not fully displaying.  It is working in my localhost, and the code is exactly the same.

Please take a look at screenshots to get clarity, help much appreciated, prior to my presentation.
screengrab-error-live.jpg
screengrab-error.jpg
0
Comment
Question by:kasondeneddy
  • 4
  • 3
  • 2
9 Comments
 
LVL 4

Assisted Solution

by:deanomac
deanomac earned 1400 total points
ID: 40605510
The source for the Calendar link reads like this in chrome:

<span class="icon shortcode  " style="">”calendar”</span>

Is this correct as per your test environment?  If so, perhaps the Class that calls the Calendar icon is relevant to your local machine, but not when that same path is called from the internet.
Also, this shows that the text shown after the missing icon contains just the word "Calendar" with the quotes, so it is displaying as it should from that point of view.  

The second link for Aid is a similar story.

It would be helpful if you could post a snippet of the source code you have for this page, both from local and the internet versions.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40605952
I suspect that deanomac is correct.  The page on local host generally cannot be resolved on a production shared hosting server.  You need to either have the absolute path or ../ followed by the full path down from the root.

However you have much more serious problems.  That is one of the most bloated, slow loading pages I have ever encountered.  It looks like you searched the internet to find how much junk you could find to choke it.  Plus it has validation errors that make it unstable and unreliable.  With the slow load time, I would expect that most visitors to the site will go elsewhere before it actually renders anything because they are not willing to wait for the entire universe to be loaded into the page.  Normally anything above 3 second load time starts to lose visitors; that page is taking 18 to over 20 seconds.  

So the minor problem of the icons is nothing compared to the really bad design that makes the site unusable and I would suggest if you want traffic and to give a good user experience, that you deal with those much bigger issues.

Cd&
0
 

Author Comment

by:kasondeneddy
ID: 40606037
Hi thanks for the response, looking into this, will send code snippet soon!
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:kasondeneddy
ID: 40606053
Thanks Cobol Dinosaur, just seen your message, a lot of cleaning up to do, be great if you give some direction on how best to get this site to work..I can clearly see the slider and parallax bg affecting things...I guess its best to create an another question for this...but thanks for the honest feedback.

All the best
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 600 total points
ID: 40606307
Okay let's start with the download weight:
Over 3mb of images, 2 RSS feeds, 27 stylesheets and 45 scripts. Any page with over 200k of images is bloated. You have 30 times that.

45 scripts plus inline scripting, plus element generation script means the Document Object has heen turned int a ball of goo. It is a wonder the parser does not crash.

27 stylesheets plus internal styling make it impossible to maintain with any reliability.  Normally one class on an element should be all that is need; sometimes too and on very rare occasions 3.  You have more than 3 on the majority of elements.

I can understand how you got here, you are using a lot of code generation that you don't understand and can't control. It is a common thing for non-professional developers to get into this kind of trouble using tools that claim to make things easy.  Then you start seeing all those toys available and you just start adding stuff, and at some point the whole thing collapses under it own weight.

What you have at this point that I would not attempt to fix it.  You need to start over with a simpler, leaner design, and modularize things.  If you do not understand the code you are working with, you are going to keep running into quicksand, so for those things you are lacking it would be wise to invest some time in tutorials for basic skills.  The other alternative is to hire a professional web developer to re-design and re-write the site.

Sorry if I am being too harsh but you need to understand how bad it is if you are going to recover and put a good site up.

Cd&
0
 
LVL 4

Assisted Solution

by:deanomac
deanomac earned 1400 total points
ID: 40607457
I agree with COBOLdinosaur, a bloated website is no good thing, nor is 200 lines of HTML when 3 will do the same job (I have seen many a website design tools do this).

I would say that aside from the increased load on the viewer's machine to load your webpage and display it properly, you will also come across a major headache when you need to troubleshoot issues.  Not necessarily because the problems are hard to fix in themselves (without addressing the elephant in the room), but because of the sheer weight of coding used to display the page, locating the minor typo that causes the house of cards to fall down would be a nightmare.

I would suggest that if the problem you have requested help on is the only display or functionality issue at present on this site, repair it and then leave the site as it is and immediately begin working offline on a new version of it, ideally starting over and limiting everything down to its core requirements.  You will then replace the chunky website with the new streamlined version.

Definitely listen to people like COBOLdinosaur, as experience is key.  It may seem more like a learning right-angle than a learning curve, but it is worth taking the time to get it right.
0
 

Author Comment

by:kasondeneddy
ID: 40607511
Deanomac,  you are right.  Been swayed away from the issue I was facing on the homepage but grateful.  I can see an issue with the shortcode for that section, maybe incomplete upload when moving it online.  I will troubleshoot and then leave it, and start re-building process.

COBOLdinosaur,  thanks for your interest, though harsh, I totally agree with you, trouble has been with budget at times, its hard for people in my part of the world (Southern Africa) to get paid the proper value of work, and can understand why shortcuts are made.  I totally agree with you though, and as I maintain values and ethics in my work, I will re-do it from the ground up.  Thanks for your comments, truly appreciated, and my intentions are to learn from the best, and hopefully do work the right way, and pass on these skills to my juniors and other designers/developers in Zambia.

Will hopefully close this question shortly.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40608293
As you re-work things; if you are not sure of things just ask here on EE. There are some very experienced Experts in every aspect of of web development and the tools we use.  I can understand the difficulty of working in places like Africa, but with the internet and your EE membership, you have access to all of the support resources, documentation and Experts that are available in more affluent parts of the world.

Cd&
0
 

Author Closing Comment

by:kasondeneddy
ID: 40722020
great advice, so sorry for the late feedback on this, have had to restart from the scratch and have been away from work due to illness
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The title says it all. Writing any type of PHP Application or API code that provides high throughput, while under a heavy load, seems to be an arcane art form (Black Magic). This article aims to provide some general guidelines for producing this typ…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question