Grow your CSS skills. Land your dream job.

[Solved] Problem with FF3 on PC ONLY on PC…

  • # July 31, 2009 at 7:19 pm

    Hey everyone,
    Okay, so I’m working on my site and I’m in the really early stages of development. I’ve noticed right off the bat that the navigation background is disconnected in FireFox 3 on PC. Only on PC. FF on my mac displays it correctly as does Safari, Chrome, and IE 8.

    Does anyone know what would cause something like this?

    http://redeyedesigner.com/dev/newred/red_site/

    Here’s my CSS:

    Code:
    /* Eric Meyer’s Reset Reloaded */
    /* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }
    /* remember to highlight inserts somehow! */
    ins {
    text-decoration: none;
    }
    del {
    text-decoration: line-through;
    }
    /* tables still need ‘cellspacing=”0″‘ in the markup */
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    .wrap {
    margin: 0 auto;
    width: 960px;
    }

    .clear {
    clear: both;
    }

    body {
    background: url(‘../img/headerbg.jpg’) repeat-x 0 0;
    font-family: Helvetica, Arial, Sans-serif;
    font-size: 15px;
    }

    h1#logo {
    background: url(‘../img/logo.png’) no-repeat 0 0;
    margin: 20px 0 5px 0;
    width: 371px; height: 41px;
    text-indent: -9999px;
    }

    small {
    color: #ececec;
    font-size: .9em;
    margin-left: 1.2em;
    }

    ul#menu {
    background: url(‘../img/menubg.png’) no-repeat 0 0;
    float: right;
    margin-top: -56px;
    width: 404px; height: 47px;
    }

    ul#menu li {
    display: block;
    float: left;
    margin-left: 23px;
    margin-top: 20px;
    }

    ul#menu li.last {
    padding-right: 0;
    }

    ul#menu li a {
    color: #ececec;
    font-weight: bold;
    text-decoration: none;
    }

    ul#menu li a:hover {
    color: #83d8f3;
    }

    # July 31, 2009 at 7:30 pm

    Looks fine in FF 3.5.

    Broken in IE7, and far worse things in IE6.

    Let’s do some absolute positioning! Wooo!

    Add this to your CSS:

    Code:
    #header {
    position: relative;
    }

    #menu {
    position:absolute;
    top:0;
    right:0;
    }

    REMOVE:

    Code:
    #menu {
    float:right;
    margin-top:-56px;
    }
    # July 31, 2009 at 8:12 pm

    Wow…can’t believe I didn’t think of that. I failed…

    Thanks for the help.

    I did the top: 0; right: 0; but found that I had to give the top a negative value to bump it up with the red rule across the top. This makes it look the way I want on all browsers except IE 7 It’s off by like 5px. It’s got to meet up perfectly or else it looks funky.

    Do you think this part is messing it up?

    Code:
    h1#logo {
    margin: 20px 0 5px 0;
    }

    sigh…I feel like a young grasshopper.

    Again, thanks for your help!

    # July 31, 2009 at 10:51 pm

    Yes, that’s exactly where the problem is.
    Tip: use firebug to see where margins (and padding) are being applied and what exactly they are doing.

    So:

    Code:
    h1#logo {
    margin: 0 0 25px 0;
    position: relative;
    top: 20px;
    }
    #menu {
    position:absolute;
    top:10px;
    right:0;
    }
    # August 2, 2009 at 3:47 pm

    Awesome! Thanks for the help. I really appreciate it. I finally got it look right across the board. Thanks again!

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".