Give help. Get help.

  • # 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?

    Here’s my CSS:

    /* Eric Meyer’s 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:

    #header {
    position: relative;

    #menu {


    #menu {
    # 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?

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

    sigh…I feel like a young grasshopper.

    Again, thanks for your help!

    # 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 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.