Grow your CSS skills. Land your dream job.

IE help with menu and png badge

  • # June 26, 2009 at 11:59 am

    Hi all,
    Newbie here frustrated w/ IE. My navigation images aren’t showing up in ie and are consequently pushing the logo in the top left out of the screen. Here’s the page: http://www.oregonsurfers.com/index-test.html. This is what it should look like:

    [img]http://www.oregonsurfers.com/troubleshoot/menu.png[/img]

    Also, my png badge isn’t appearing. This is what it should look like:

    [img]http://www.oregonsurfers.com/troubleshoot/badge.png[/img]

    Here’s the relative html code:

    Code:

    7th Annual CS Open – June 27th & 28th, 2009

    Update

    Want to hear about the latest contest updates? Sign up here…


    And here’s the css:

    Code:
    /* RESETS & BASIC PAGE SETUP */
    * { margin: 0; padding: 0; }
    ul { list-style: none inside;}
    }

    body {
    text-align: center;
    }

    .clear {
    clear: both;
    }

    img, div, #badge { behavior: url(iepngfix.htc) }

    #page-wrap {
    margin: 0 auto;
    width: 960px;
    text-align: left;
    position: relative;
    }

    #main-content {
    margin-top: 50px;
    }

    h1#logo {
    width: 400px;
    height: 155px;
    background: url(images/csf-logo.png) no-repeat;
    text-indent: -9999px;
    float: left;
    position: absolute; top: -45px; left: -55px;
    }

    ul#nav {
    position: relative;
    }

    ul#nav li {
    display: inline;
    }
    ul#nav li a {
    display: block;
    height: 50px;
    text-indent: -9999px;
    float: right;
    }
    ul#nav li.entry-form a {
    width: 165px;
    background: url(images/entryform-btn.jpg) bottom center no-repeat;
    }
    ul#nav li.contact a {
    width: 173px;
    background: url(images/contact-btn.jpg) bottom center no-repeat;
    }
    ul#nav li a:hover {
    background-position: top center;
    }
    ul#nav li a:active {
    background-position: top center;
    }

    #main-content h4 {
    font-family: Helvetica, Arial;
    font-size: 24px;
    color: #663300;
    font-weight: normal;
    }
    #main-content h4 a {
    color: #663300;
    }

    .spacer {
    margin: 20px 0;
    }

    #badge {
    position: absolute;
    top: 62%;
    left: -5%;
    }

    .img1 {
    padding-right: 20px;
    float: left;
    padding-bottom: 35px;

    }

    .img2 {
    float: right;
    padding-bottom: 35px;
    }

    .form {
    float: right;
    }

    .form-bg {
    background-image: url(images/subscribe-bg.gif);
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: 0;
    width: 330px;
    height: 114px;
    float: right;
    }

    .form-bg p {
    font-family: Helvetica;
    font-size: 14px;
    color: #fff;
    padding: 20px 13px 14px 13px;
    }

    .label {
    z-index: 1;
    float: left;
    width: 200px;
    height: 32px;
    padding-top: 15px;
    padding-bottom: 14px;
    padding-right: 22px;
    }

    .button {
    float: right;
    z-index: 9000;
    padding-right: 14px;
    }

    I really appreciate any help. Thanks,

    Jason

    # June 30, 2009 at 12:02 am

    Hi Jason,

    Hope I’m not too late. The following are the changes I’ve made:

    - removed main-content’s top margin
    - adjusted h1 logo position
    - removed img, div, #badge { behavior: url(iepngfix.htc) }
    - removed a lost closing curly brace
    - removed image tag in badge and applied it as background image
    - changed badge’s percentage position to pixels

    Here’s a live demo:
    http://raymondselda.com/oregonsurfers/index-test.html

    This looks good in Firefox 3 and IE7. Good luck.

    Hope Keith Lewis gets well soon.

    # June 30, 2009 at 5:12 pm

    Thanks for all the help Raymond! So, I’ve implemented your changes, but my navigation menu is still not showing up in IE 8. I must be missing something. Any ideas? It’s still up at http://www.oregonsurfers.com/index-test.html.

    Keith is out of the hospital and recovering faster than anyone believed possible. Again, I really appreciate your help. Thanks,

    Jason

    # July 1, 2009 at 12:18 am

    I think you’re missing something. The menu is also looking good in IE8. I’ve posted the complete revised code from my demo. Try also checking if the image paths of your menu in your CSS rules. They might be pointing to somewhere else. I am working on a different directory structure. Try to make some adjustments and make sure everything is pointing at the right path. Good luck.

    Code:
    /* RESETS & BASIC PAGE SETUP */
    * { margin: 0; padding: 0; }

    ul { list-style: none inside;}

    body {
    text-align: center;
    }

    .clear {
    clear: both;
    }

    #page-wrap {
    margin: 0 auto;
    width: 960px;
    text-align: left;
    position: relative;
    }

    h1#logo {
    width:213px;
    height: 83px;
    background: url(images/csf-logo.png) no-repeat;
    text-indent: -9999px;

    }

    ul#nav {
    position: relative;
    }

    ul#nav li {
    display: inline;
    }
    ul#nav li a {
    display: block;
    height: 50px;
    text-indent: -9999px;
    float: right;
    }
    ul#nav li.entry-form a {
    width: 165px;
    background: url(images/entryform-btn.jpg) bottom center no-repeat;
    }
    ul#nav li.contact a {
    width: 173px;
    background: url(images/contact-btn.jpg) bottom center no-repeat;
    }
    ul#nav li a:hover {
    background-position: top center;
    }
    ul#nav li a:active {
    background-position: top center;
    }

    #main-content h4 {
    font-family: Helvetica, Arial;
    font-size: 24px;
    color: #663300;
    font-weight: normal;
    }
    #main-content h4 a {
    color: #663300;
    }

    .spacer {
    margin: 20px 0;
    }

    #badge {
    position: absolute;
    top:725px;
    left:-30px;
    width:76px;
    height:79px;
    background:transparent url(badge.png) no-repeat;
    }

    .img1 {
    padding-right: 20px;
    float: left;
    padding-bottom: 35px;

    }

    .img2 {
    float: right;
    padding-bottom: 35px;
    }

    .form {
    float: right;
    }

    .form-bg {
    background-image: url(images/subscribe-bg.gif);
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: 0;
    width: 330px;
    height: 114px;
    float: right;
    }

    .form-bg p {
    font-family: Helvetica;
    font-size: 14px;
    color: #fff;
    padding: 20px 13px 14px 13px;
    }

    .label {
    z-index: 1;
    float: left;
    width: 200px;
    height: 32px;
    padding-top: 15px;
    padding-bottom: 14px;
    padding-right: 22px;
    }

    .button {
    float: right;
    z-index: 9000;
    padding-right: 14px;
    }

    I’m glad that Keith is doing great.

    # July 2, 2009 at 4:30 pm

    Thanks Raymond…all set now. I was missing a ">" on one of my div’s in the markup.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

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