Forums

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

Home Forums CSS [Solved] Problem with FF3 on PC ONLY on PC…

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #25621
    GreyFox135
    Participant

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

    #61619
    TheDoc
    Member

    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;
    }
    #61620
    GreyFox135
    Participant

    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!

    #61676
    GreyFox135
    Participant

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.