Grow your CSS skills. Land your dream job.

Redundant icons?

  • # July 6, 2009 at 10:45 am

    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:







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

    # July 6, 2009 at 11:07 am

    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

    # July 6, 2009 at 2:17 pm

    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

    # July 6, 2009 at 2:21 pm

    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.

    # July 7, 2009 at 8:37 am

    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.

    # July 7, 2009 at 9:28 am

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

    # July 7, 2009 at 9:45 am

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

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




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











    # July 7, 2009 at 10:19 am

    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.

    # July 7, 2009 at 11:07 am

    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!

    # July 7, 2009 at 1:33 pm

    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.

    # July 7, 2009 at 2:00 pm
    "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.

    # July 7, 2009 at 2:49 pm

    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.

    # July 7, 2009 at 3:27 pm

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

    Code:

    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 */
    }
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".