Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Redundant icons?

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #25371
    Malice
    Member

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

    #60286
    apostrophe
    Participant

    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

    #60280
    Malice
    Member

    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.

    #60308
    Malice
    Member

    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.

    #60309
    apostrophe
    Participant

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

    #60310
    Malice
    Member

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

    Code:



    Michigan Pond Hockey Classic



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











    #60316
    apostrophe
    Participant

    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.

    #60319
    Malice
    Member

    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!

    #60323
    TheDoc
    Member

    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.

    #60324
    apostrophe
    Participant
    "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.

    #60327
    Malice
    Member

    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.

    #60330
    TheDoc
    Member

    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 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.