?
Solved

Mysterious icon class change does not change icon

Posted on 2012-09-14
8
Medium Priority
?
598 Views
Last Modified: 2012-09-15
I have a page from a design company. They have higher priority corporates so cant get quick answers from them.

I changed a icon class when outputting a formatted report from a query.  But the old icon still shows. I have done all sorts of refreshes so dont think that is it. Also I have done a site wide search through all code in Dream Weaver but cant see where the icon is being set up?  Some sort of hidden jquery?

Here is the page in question manifesting the mystery:

http://www.housecarers.com/test2/advanced-search-results-housesitters.cfm?co=Australia&sta=3&HouseSitTerm=a&PetType=a

So here is the code I changed.  But still get the "Save" icon instead of the "Phone" icon . The Phone icon correctly displays on other pages that use icon class phone.

Here is the section of page code changed for icon class, as you can see I have removed and
conditionaly output an icon for phone
Removed:      class="action-link icon save:"
changed to :  class="action-link icon phone

<div class="actions"> 
                                             <!---
												<a href="/housesitter-profile.cfm?mem=#searchresult.memberId#" class="action-link icon save"><span>Save</span></a>class="action-link icon save
											 --->	
                                               	<cfif     ContactNumberYesNo is "yes">
						    					<a href="./housesitter-profile.cfm?mem=#searchresult.memberId#" "><span>Phone</span></a>
                                                </cfif>
												<a href="./housesitter-profile.cfm?mem=#searchresult.memberId#" class="action-link icon photo"><span>Photos (1)</span></a>
												<a href="./housesitter-profile.cfm?mem=#searchresult.memberId#" class="action-link icon police_check"><span>Police check</span></a>
												<a href="./housesitter-profile.cfm?mem=#searchresult.memberId#" class="action-link icon reference"><span>Reference (2)</span></a>

                                             </cfif>   
											</div>

Open in new window


And here is the CSS change:

body.ad-search div.right-col #results #results-list article > section div.actions a {
  float: right;
  /*
  margin-left: 37px;
  */
  margin-left: 10px;
  display: block;
  height: 20px;
  line-height: 20px;
}
body.ad-search div.right-col #results #results-list article > section div.actions a:last-child {
  margin-left: 0px;
}
body.ad-search div.right-col #results #results-list article > section div.actions a.reference {
  margin-top: 5px;
  padding-left: 30px;
  background-position: left -728px;
}
body.ad-search div.right-col #results #results-list article > section div.actions a.police_check {
  margin-top: 5px;
  padding-left: 17px;
  background-position: left -748px;
}
body.ad-search div.right-col #results #results-list article > section div.actions a.photo {
  margin-top: 5px;
  padding-left: 31px;
  background-position: left -768px;
}
/*
body.ad-search div.right-col #results #results-list article > section div.actions a.save {
  margin-top: 5px;
  padding-left: 21px;
  background-position: left -788px;
}
*/
body.ad-search div.right-col #results #results-list article > section div.actions a.phone {
  margin-top: 5px;
  padding-left: 21px;
  background-position: left -788px;
}
/*
body.ad-search div.right-col #results #results-list article > section div.actions a.pet {
  float: left;
  margin-left: 0px;
  padding: 5px 0 0 30px;
  background-position: left -828px;
}
*/

Open in new window


Here is the page again where you can see this happening

http://www.housecarers.com/test2/advanced-search-results-housesitters.cfm?co=Australia&sta=3&HouseSitTerm=a&PetType=a
0
Comment
Question by:Ian White
  • 4
  • 4
8 Comments
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38400855
Can't see the problem on your site, as I don't see anything to do with phone.

The code you've posted above looks a little weird - it seems like it's got a little messed up somewhere. Inside your IF statement you have this:

<a href="./housesitter-profile.cfm?mem=#searchresult.memberId#" "><span>Phone</span></a>

It has an extra " in it and absolutely no classes. None of your code has anything with a 'phone' class.

You also seem to have an extra closing IF!
0
 

Author Comment

by:Ian White
ID: 38401171
That is the problem - I am using the phone icon - but it displays the save icon. The code did not copy well .

The code is within cfoutput in coldfusion - the code is fine. I dont have problems with cf code it is the css.  Here is the cfoutput for the code - you will see that it has class="action-link icon phone

<cfif     ContactNumberYesNo is "yes">
                                                                      <a href="./housesitter-profile.cfm?mem=#searchresult.memberId#"
                                                class="action-link icon phone"><span>Phone</span></a>
    </cfif>
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38401470
There is absolutely no mention of 'phone' anywhere in your document - nothing has a class of 'phone'. If I change the class on this:

<a class="action-link icon save" href="/housesitter-profile.cfm?mem=15868"><span>Save</span></a>

to this:

<a class="action-link icon phone" href="/housesitter-profile.cfm?mem=15868"><span>Save</span></a>

Then the icon changes to a little blue square with a hole (maybe a floppy disk?)

You may want to change the background-position of your save class to show the correct icon. It should be:

background-position: left -808px; //line 2176 of main.css

but for this to work, you need to make sure the correct element has the phone class added.
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:Ian White
ID: 38402400
Sorry I had the wrong version of the page.

http://www.housecarers.com/test2/advanced-search-results-housesittersX.cfm?co=Australia&sta=3&HouseSitTerm=a&PetType=a

You will see this has occurances phone of in the source.  I say: class="action-link icon phone" but still get the save icon instead off phone output

<a class="action-link icon phone" href="/housesitter-profile.cfm?mem=15868"><span>Save</span></a>

What I cant understand as a novice - is why was the save incon instead of the phone icon appearing How does the positioning change the icon?  How does the browser determine what icon to use? I thought it was the class?  If you can shed some light on this - i am trying to understand it. How does the positioning change it from save icon to phone icon?  Where do the icons come from? I have searched though all my libraries and cant find the icons? Is it some sort of sprite?

Update:
I made the change you suggested and it works now thanks?  But why. I am baffled. I really want to understand this.
0
 
LVL 45

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 38402451
Your site is using what's called a CSS sprite. Basically it's one large image containing all your smaller images (icons, buttons etc). You can view yours here -> http://www.housecarers.com/test2/img/sprite.png

You can then set the background-image of all your icon elements etc, to this one image, and change which part of the image is shown by moving the background-image around (background-position). Think of your elements as a 'window' to the background image.

When you added the class of phone to your element, it moved the background-image the wrong amount, so you were showing the wrong part of the sprite.

The benefit of using a sprite like this is that for all those images you site only makes one request to the server, making page loads quicker :) Another possible benefit is that if you decide to change your styling or colour theme, you may just have to change 1 image file.

Hope that all makes sense, and pleased you got it working.
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38402459
Just an addition, maybe a little explanation of the background-position. When you set a background-image to an element, it's position will default to 0px by 0px, which means the top left of the image, will start in the top left of the element.

When you set the background position you tell the image how far to shift left or right, and how far to shift up and down. To move the background image up (to show a lower part of the image) you use a negative number. The same applies for moving it left (to show part of the image from the right). You can also use the words: left, right, top, bottom and center.

In your code you had background-position: left -788px which means position the left side of the image to the left side of the element, and then move it up by 788px - it needed to be moved up by 808px

It does sound a little backwards but you'll soon get it.

Have a search for CSS Sprites if you need more info
0
 

Author Comment

by:Ian White
ID: 38402631
Excellent thanks for bringing me out of darkness and shedding light on this much appeciated
0
 

Author Closing Comment

by:Ian White
ID: 38402634
Thankyou for your patient and thorough explaination to a novice
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

839 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