Grow your CSS skills. Land your dream job.

Works in Safari and Firefox but not ie

  • # May 18, 2009 at 2:27 am

    Hi! I am new to designing websites and watched your converting photoshop into css (great by the way!!). I tweaked the code a little to make a different layout. However, it looks great in firefox and safari but breaks in ie. I am at a lost to what code I am missing. Any help would be much appreciated!! Thanks!

    The link is:

    http://www.sirenhouse.com

    and the external code I am using is:
    (its from the tutorial but tweaked)

    Code:
    /* RESETS & BASIC PAGE SETUP */
    * { margin: 0; padding: 0; }
    html { overflow-y: scroll; }
    body {
    background: url(‘images/body-bg.jpg’) top left;; font-style:normal; font-variant:normal; font-weight:normal; font-size:62.5%; font-family:Lucida Grande, sans-serif
    }

    ul { list-style: none inside; }
    p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
    p.metadata { background: #fff9a7; padding: 3px;}
    a { outline: none; }
    a img { border: none; }

    h1 {
    font-family: Georgia, serif;
    font-size: 2.4em;
    font-weight: normal;
    color: #80728a;
    }
    h1#logo {
    width: 654px;
    height: 112px;
    background: url(‘images/header.jpg’) no-repeat center;
    text-indent: -9999px
    }

    /* END RESET */

    /* TOOLBOX */
    .floatleft { float: left; }
    .floatright { float: right; }
    .clear { clear: both; }
    /* END TOOLBOX */

    /* STRUCTURE AND STUFF */

    #wrapper {
    margin: 0 auto;
    width: 750px;
    background: url(‘images/content-bg.jpg’) repeat-y;

    }

    #main-content {
    padding: 80px 110px 80px 100px;
    }
    #article-area {
    width: 400px;
    float: left;
    display: inline;
    }
    #sidebar {
    width: 92px;
    float: right;
    display: inline;
    }

    ul#nav {

    }
    ul#nav li {
    display: inline;
    }
    ul#nav li a {
    display: block;
    height: 125px;
    text-indent: -9999px;
    float: left;

    }
    ul#nav li.donate a {
    width: 125px;
    background: url(‘images/donate-nav.jpg’) no-repeat bottom center;

    }
    ul#nav li.about a {
    width: 90px;
    background: url(‘images/about-nav.jpg’) no-repeat bottom center;
    }
    ul#nav li.services a {
    width: 129px;
    background: url(‘images/services-nav.jpg’) no-repeat bottom center;
    }

    ul#nav li.involved a {
    width: 123px;
    background: url(‘images/involved-nav.jpg’) no-repeat bottom center;
    }

    ul#nav li.events a {
    width: 123px;
    background: url(‘images/events-nav.jpg’) no-repeat bottom center;
    }

    ul#nav li.recources a {
    width: 123px;
    background: url(‘images/resources-nav.jpg’) no-repeat bottom center;
    }
    ul#nav li a:hover {
    background-position: center;
    }

    ul#nav2 {

    }
    ul#nav2 li {
    display: inline;
    }
    ul#nav2 li a {
    display: block;
    height: 80px;
    text-indent: -9999px;
    float: left;

    }
    ul#nav2 li.corner a {
    width: 175px;
    background: url(‘images/clients-nav.jpg’) no-repeat bottom center;
    margin-right: 91px
    }
    ul#nav2 li.hope a {
    width: 175px;
    background: url(‘images/hope-nav.jpg’) no-repeat bottom center;
    }

    ul#nav2 li.enews a {
    width: 175px;
    background: url(‘images/enews-nav.jpg’) no-repeat bottom center;
    }

    ul#nav2 li.supporters a {
    width: 175px;
    background: url(‘images/supporters-nav.jpg’) no-repeat bottom center;
    }

    ul#nav2 li.boutique a {
    width: 175px;
    background: url(‘images/boutique-nav.jpg’) no-repeat bottom center;
    }

    ul#nav2 li a:hover {
    background-position: center;
    }

    #footer {
    min-height: 127px;
    background: url(‘images/footer-bg.jpg’) no-repeat;
    }

    /* END STRUCTURE */

    # May 18, 2009 at 3:55 am
    "damostkid" wrote:
    …it looks great in firefox and safari but breaks in ie.

    Welcome to the Internet.

    Well, you didn’t say what was wrong with it, so I’ll guess:

    White space below the logo:
    Get rid of the space between the IMG and UL, so it looks like this:

    Code:
    header mockup

    Let me know if that helps

    # May 18, 2009 at 9:21 pm

    Hi! Yep, it was that white line on the banner that was messing up. I couldn’t get the images to connect. I tried your suggestion and it didnt work. After doing some research, I found something on image containers and tried that and that seemed to do the trick to connect the images together. Thanks again for your response!

    # May 19, 2009 at 1:37 am

    Sweet. Glad you got it working. Looks good.

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

You must be logged in to reply to this topic.

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