Grow your CSS skills. Land your dream job.

height of image looks good in IE but not in firefox

  • # August 13, 2008 at 2:02 pm

    I am working on a mac using firefox. The brown rectangle under the menu should be taller. The top in being cut off in FF bu tlooks right in IE. Can’t figure out how to change it. I would be grateful for any help or direction. The page is <http://www.bopedesign.com/freemp3.php&gt;

    Code:
    /* Reset & Page Setup */
    * { margin: 0; padding: 0; }
    html { overflow-y: scroll; }
    body { font: 62.5% Helvetica, sans-serif;
    background: url(images/body-bg.jpg) top center no-repeat;
    background-attachment: fixed;
    background-position: 50% 15%;
    }

    ul { list-style: none inside; }
    p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
    a { outline: none; }
    a img { border: none; }
    /* End Reset */

    /* Floats and Clear */
    .floatleft { float: left; }
    .floatright { float: right; }
    .clear { clear: both; }
    /* End Floats and Clears */

    /* Sructure */
    #page-wrap {
    width: 840px;
    margin: 0 auto;
    background: url(images/brown-content-bg.jpg) repeat-y;
    }

    #header {
    width: 840px;
    height: 216px;
    margin: 0 auto;
    background: url(images/header.jpg) center no-repeat;
    }

    #logo_link {
    height: 75px;
    width: 254px;
    padding: 30px 0px 0px 65px;
    }

    #listen {
    height: 24px;
    width: 125px;
    padding: 60px 0px 0px 82px;
    }

    ul#nav {

    }
    ul#nav li {
    display: inline;
    }
    ul#nav li a {
    display: block;
    height: 44px;
    text-indent: -9999px;
    float: left;
    }
    ul#nav li.schedule a {
    width: 132px;
    background: url(images/schedule2bt.jpg) top center no-repeat;
    }
    ul#nav li.contact a {
    width: 79px;
    background: url(images/contactb.jpg) top center no-repeat;
    }
    ul#nav li.store a {
    width: 57px;
    background: url(images/storeb.jpg) top center no-repeat;
    }
    ul#nav li.music a {
    width: 98px;
    background: url(images/musicb.jpg) top center no-repeat;
    }
    ul#nav li.news a {
    width: 55px;
    background: url(images/newsb.jpg) top center no-repeat;
    }
    ul#nav li.booking a {
    width: 127px;
    background: url(images/bookingb.jpg) top center no-repeat;
    }
    ul#nav li.about a {
    width: 79px;
    background: url(images/aboutb.jpg) top center no-repeat;
    }
    ul#nav li.support a {
    width: 71px;
    background: url(images/supportb.jpg) top center no-repeat;
    }
    ul#nav li.newsletter a {
    width: 142px;
    background: url(images/newsletterb.jpg) top center no-repeat;
    }
    ul#nav li a:hover {
    background-position: bottom center;
    }

    #brownbox {
    width: 840px;
    height: 275px;
    margin: 0 auto;
    background: url(images/brown-body-bg.jpg) center no-repeat;
    }

    ul#brownnav {
    padding: 160px 0px 0px 408px;
    }

    ul#brownnav li {
    display: inline;
    }
    ul#brownnav li a {
    display: block;
    height: 28px;
    text-indent: -9999px;
    float: left;
    }
    ul#brownnav li.listen a {
    width: 62px;
    background: url(images/listen.jpg) bottom center no-repeat;
    }
    ul#brownnav li.download a {
    width: 115px;
    background: url(images/download.jpg) bottom center no-repeat;
    }
    ul#brownnav li.send a {
    width: 120px;
    background: url(images/send.jpg) bottom center no-repeat;
    }
    ul#brownnav li a:hover {
    background-position: top center;
    }

    #left {
    width: 400px;
    height: 365px;
    padding: 0px 0px 0px 0px;
    background: url(images/moresongs.jpg) top center no-repeat;
    }

    #songs {
    font-size: 1.6em;
    color: #666666;
    line-height: 1.6em;
    padding: 80px 0px 0px 60px;
    }

    ul#listennav {
    padding: 3px 0px 0px 57px;
    }

    ul#listennav li {
    display: inline;
    }
    ul#listennav li a {
    display: block;
    height: 28px;
    text-indent: -9999px;
    float: left;
    }
    ul#listennav li.listen2 a {
    width: 62px;
    background: url(images/listen3.jpg) bottom center no-repeat;
    }
    ul#listennav li a:hover {
    background-position: top center;
    }

    #right {
    width: 400px;
    height: 365px;
    padding: 0px 0px 0px 0px;
    float: right;
    background: url(images/moresongs.jpg) top center no-repeat;
    }

    ul#bottomrightlinks {
    padding: 3px 0px 0px 57px;
    }

    ul#bottomrightlinks li {
    display: inline;
    }
    ul#bottomrightlinks li a {
    display: block;
    height: 28px;
    text-indent: -9999px;
    float: left;
    }
    ul#bottomrightlinks li.store a {
    width: 62px;
    background: url(images/listen3.jpg) bottom center no-repeat;
    }
    ul#bottomrightlinks li.newsletter a {
    width: 62px;
    background: url(images/listen3.jpg) bottom center no-repeat;
    }
    ul#bottomrightlinks li.myspace a {
    width: 62px;
    background: url(images/listen3.jpg) bottom center no-repeat;
    }
    ul#bottomrightlinks li a:hover {
    background-position: top center;
    }

    /* End Structure */

    p.footertext {
    padding: 25px 0px 0px 80px;
    color: #999999;
    }

    p.footertext span {
    padding: 0px 0px 0px 200px;
    }

    p.footertext span a {
    color: #996633;
    text-decoration: none;
    }

    p.footertext span a:hover {
    color: #999999;
    text-decoration: none;
    }

    #footer {
    width: 840px;
    height: 71px;
    margin: 0 auto;
    background: url(images/footer-bg.jpg);
    }

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


    < ? Include("http://www.bopedesign.com/thmenu.php") ?>

    • Stand In Your Presence
    • You Are
    • How Deep The Father’s Love For Us
    • Run Farther
    • There Is A Heaven
    • Give Like He Did
    • Enough For Me
    • Go With You
    • Let Everything That Has Breath

    # August 14, 2008 at 12:59 am

    well it’s hard to help here because we don’t know what the image is suppose to look like. it looks the same in I.E 7 and opera and in firefox. So I don’t know what it is your asking. maybe you can post a pic of what it’s suppose to look like or try adding a margin top to the image to push it down from whatever is above it.

    # August 14, 2008 at 2:01 pm

    Thanks the margin top did it. I thought I had tried that in the long list of things I tried. I must not have.

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

You must be logged in to reply to this topic.

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