Been a while since I've been in here with an issue... either that means I'm STARTING to catch on or I have not been trying anything new. What is happening right now is I am making a stab at "sliding doors" icons because they are slick and it's something that I think should be used more often.
When you view this page everything looks OK but the final icon in the row (in this case youtube) of social networking icons for whatever reason is spammed seven times down at the footer and for the life of me I can't see a reason why!
I supplied only a snippet from the HTML but the whole CSS style sheet for your review. As always any help would be appreciated even if its just a direction. I'm almost ready to cut the social networking icons out and figure out another way to place them.
Link: http://www.michiganpondhockey.com/MPHC2010/
HTML:
<div id=\"sponsors\"> <a href=\"http:www.d2webdesigns.com\"><img src=\"images/sponsors/primary1.jpg\" alt=\"Primary Sponsor\" class=\"sponsor\"/></a> <a href=\"http:www.d2webdesigns.com\"><img src=\"images/sponsors/secondary1.jpg\" alt=\"Secondary Sponsor\" class=\"sponsor\"/></a> <a href=\"http:www.d2webdesigns.com\"><img src=\"images/sponsors/tertiary1.jpg\" alt=\"Tertiary Sponsors\" class=\"sponsor\"/></a> </div><!-- End sponsors div --> <div id=\"content\"> <a class=\"facebook\" href=\"http:www.facebook.com\"/> <a class=\"twitter\" href=\"http:www.twitter.com\"/> <a class=\"delicious\" href=\"http:www.delic.io.us\"/> <a class=\"digg\" href=\"http:www.digg.com\"/> <a class=\"youtube\" href=\"http:www.youtube.com\"/> </div><!-- End content div --> <div id=\"footer\"> <p>All content copyright Michigan Pond Hockey and the MPHC L.L.C. 2008</p> </div><!-- End footer div --> </div><!-- End wrapper div --> </div><!-- End wrapperShadow div --> </body></center><!-- End body div --> </html>
It's pretty weird, firebug is showing all the extra markup but "view page source" doesn't show it. Validating is always a good place to start http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.michiganpondhockey.com%2FMPHC2010%2F
thats all well and good with the code, but do you have any php running to make the page?
cause you have a lot of anchors with youtube, which leads me to believe you have php running, if so, make sure you have not got a loop running that makes more of the youtube links
I'm currently tinkering with the W3 Validator hoping it rings some bells and points out an obvious flaw, I'll post any findings here but no.. no PHP. Those anchor tags your seeing are going nowhere at this moment. It will ultimately just link to existing pages withing those other services.
Even after correcting the errors found with the W3C validator the redundant icons are still there. I need to give it a couple more tries then just accept defeat and move them elsewhere.
Any more suggestions would be greatly appreciated.
The only reason I can think of is because of the HTML declaration in the beginning of the code but man, I would have given up and changed it before finding that one... awesome job Apostrophe, thanks a ton!
There are actually some well known issues with self-closing anchor tags. I would stay away from using them, myself.
That's actually how I solved it in the end. I just looked at the markup and thought "well, how would I write this?" In fact I would have put real links between the tags and then negative indented them off the page. Anyhow, I found just making the tags a proper pair fixed the problem.
What is happening right now is I am making a stab at "sliding doors" icons because they are slick and it's something that I think should be used more often.
When you view this page everything looks OK but the final icon in the row (in this case youtube) of social networking
icons for whatever reason is spammed seven times down at the footer and for the life of me I can't see a reason why!
I supplied only a snippet from the HTML but the whole CSS style sheet for your review. As always any help would be appreciated even if its just a direction. I'm almost ready to cut the social networking icons out and figure out another way to place them.
Link: http://www.michiganpondhockey.com/MPHC2010/
HTML:
CSS:
cause you have a lot of anchors with youtube, which leads me to believe you have php running, if so, make sure you have not got a loop running that makes more of the youtube links
Any more suggestions would be greatly appreciated.
to
the page seems to drop the extra markup.
The only reason I can think of is because of the HTML declaration in the beginning of the code but man, I would have given up and changed it before finding that one... awesome job Apostrophe, thanks a ton!
There are actually some well known issues with self-closing anchor tags. I would stay away from using them, myself.
That's actually how I solved it in the end. I just looked at the markup and thought "well, how would I write this?" In fact I would have put real links between the tags and then negative indented them off the page. Anyhow, I found just making the tags a proper pair fixed the problem.
I took all of your suggestions though and removed my self closing anchor tags and I'll make it a habit to avoid them in the future.
You would simply add this line into your CSS:
a.youtube {display: block;
float: left;
margin-left: 10px;
margin-top: 8px;
border: 1px solid #fff;
width: 40px;
height: 40px;
background: transparent url(../images/youtubeSD.png) no-repeat;
overflow: hidden;
text-indent: -9999px; /* ADD THIS LINE */
}