Redundant icons?

[Malice]

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:

Code:

All content copyright Michigan Pond Hockey and the MPHC L.L.C. 2008

CSS:

Code:

/*
Theme Name: MichiganPondHockey.com
Theme URI: http://www.michiganpondhockey.com
Description: Custom Michigan Pond Hockey Theme
Version: 2.0a
Author: Dennis Stevenson
Author URI: http://www.d2webdesigns.com/

Primary Colors:
bgcolor: #d2d2d2
textcolor: #000000
texthover color: #2388c0
heading1 color: #ffffff

*/
* { padding:0; margin:0; }

ul, li, img, body, html {

}

a {
text-decoration: none;
color: #7e7e7e;
}

a:hover {
text-decoration: none;
color: #2388c0;
}

a img {
border: 1px solid;
color: #000;
}

p {
font-family: Calibri, helvetica, georgia, sans-serif;
color: #000;
}

body {
background: #d2d2d2 url(../images/background.gif) repeat-x;
text-align: center;
color: #000;
}

h1 {
font-size: xx-large;
color: #fff;
}

#wrapper {
height: 100%;
width: 964px;
background: #fff;
border-left: 1px solid #a2a2a2;
border-right: 1px solid #a2a2a2;
}

#wrapperShadow {
height: 100%;
width: 1024px;
background: url(../images/shadow.png) repeat-y;
}

#header {
background: url(../images/header.png);
color: #000;
height: 184px;
width: 964px;
overflow: hidden;
}

#navigation {
height: 67px;
}

#navigation ul, #navigation li {
display: inline;
margin: 0px;
padding-left: 20px;
padding-right: 20px;
}

/* Newsletter Section */

#newsletter {
float: left;
margin-left: 34px;
background: url(../images/newsletterBox.png);
height: 224px;
width: 281px;
overflow: hidden;
}

.newsletterIcon {
position: absolute;
margin-left: -30px;
margin-top: 60px;
}

.inputtext {
position: relative;
margin-left: 10px;
margin-top: 112px;
}

/* Sponsors Section */

#sponsors {
float: right;
margin-right: 38px;
background: url(../images/sponsorBox.png);
height: 224px;
width: 611px;
}

.sponsor {
text-align: center;
margin-right: 10px;
margin-top: 70px;
border: 1px solid;
}

/* Content Section */

#content {
float: left;
margin-left: 34px;
margin-top: 5px;
background: url(../images/contentBox.png);
height: 656px;
width: 893px;
}

a.facebook {
display: block;
float: left;
margin-left: 20px;
margin-top: 8px;
border: 1px solid #fff;
width: 40px;
height: 40px;
background: transparent url(../images/facebookSD.png) no-repeat;
overflow: hidden;
}

a.facebook:hover {
background-position: -40px 0;
}

a.twitter {
display: block;
float: left;
margin-left: 10px;
margin-top: 8px;
border: 1px solid #fff;
width: 40px;
height: 40px;
background: transparent url(../images/twitterSD.png) no-repeat;
overflow: hidden;
}

a.twitter:hover {
background-position: -40px 0;
}

a.delicious {
display: block;
float: left;
margin-left: 10px;
margin-top: 8px;
border: 1px solid #fff;
width: 40px;
height: 40px;
background: transparent url(../images/deliciousSD.png) no-repeat;
overflow: hidden;
}

a.delicious:hover {
background-position: -40px 0;
}

a.digg {
display: block;
float: left;
margin-left: 10px;
margin-top: 8px;
border: 1px solid #fff;
width: 40px;
height: 40px;
background: transparent url(../images/diggSD.png) no-repeat;
overflow: hidden;
}

a.digg:hover {
background-position: -40px 0;
}

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;
}

a.youtube:hover {
background-position: -40px 0;
}

/* Footer Section */

#footer {
background: url(../images/footer.png);
color: #fff;
height: 71px;
width: 964px;
overflow: hidden;
position: relative;
padding-top: 10px;
}

.footer a:hover {
text-decoration: underline;
color: #2388c0;
}

[apostrophe]

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

[Malice]

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.

[Malice]

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.

[apostrophe]

Can you copy and paste your entire index.html here?

[Malice]

Sure, thankfully the HTML is still relatively small since there isn’t any content or details yet.

Code:

Michigan Pond Hockey Classic

• Forums
• Tournament
• Sign-Up
• History
• Media

Sign up for the newsletter. Enter your email address in the field below

All content copyright Michigan Pond Hockey and the MPHC L.L.C. 2008

[apostrophe]

Now I have to be honest and say I have absolutely no idea why this works, but if you change

Code:

to

Code:

the page seems to drop the extra markup.

[Malice]

Oh man that is awesome!

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!

[TheDoc]

Sorry I didn’t pop into this thread before.

There are actually some well known issues with self-closing anchor tags. I would stay away from using them, myself.

[apostrophe]

"TheDoc" wrote:

Sorry I didn’t pop into this thread before.

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.

[Malice]

Again, thanks for all the help.

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.

[TheDoc]

To make the code even better, you should take on Apostrophe’s suggestion about the text indenting. Your HTML would look perfect with:

Code:

YouTube

You would simply add this line into your CSS:

Code:

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 */
}

[Author]

Posts