Solved

Need help with icons not displaying correctly on website

Posted on 2015-02-12
9
58 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 350 total points
Comment Utility
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
Comment Utility
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
Comment Utility
Hi thanks for the response, looking into this, will send code snippet soon!
0
 

Author Comment

by:kasondeneddy
Comment Utility
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 150 total points
Comment Utility
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 350 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

762 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now