safari and firefox displaying differently

  • Anne

    (@mellissaa)


    11 years, 4 months ago

    my nav bar is vertical and im trying to get it to match up with an image i have in the background, but its different on safari and firefox.
    help please!
    here is the code for the navbar

    and here is the link to my site:

    http://phoenix.sheridanc.on.ca/~ccit783/

    #access {
    display: block;
    float: left;
    margin-left: -171px;
    margin-top: 75px;
    position: fixed;
    width: 100px;
    font-size: 13px;
    line-height: 13px;
    }
    #access ul {
    font-size: 13px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
    }
    #access li {
    float: center;
    position: relative;
    padding-bottom: 85px;
    }
    #access a {
    color: #fff;
    display: block;
    line-height: 16px;
    padding: 0 10px;
    text-decoration: none;
    }
    #access ul ul {

    display: none;
    float: left;
    margin: 0;
    position: relative;
    top: 20px;
    left: 0;
    width: 188px;
    }
    #access ul ul ul {
    left: 24px;
    top: 0;
    }
    #access ul ul a {
    color: #444;
    font-size: 13px;
    font-weight: normal;
    height: 50px;
    line-height: 10px;
    padding: 10px 10px;
    width: 168px;
    }
    #access li:hover > a,
    #access ul ul :hover > a,
    #access a:focus {
    }
    #access li:hover > a,
    #access a:focus {
    color: #373737;
    }
    #access ul li:hover > ul {
    display: block;
    }
    #access .current-menu-item > a,
    #access .current-menu-ancestor > a,
    #access .current_page_item > a,
    #access .current_page_ancestor > a {
    font-weight: bold;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • WPyogi

    (@wpyogi)

    11 years, 4 months ago

    It looks like you can adjust that spacing in this CSS — add the top padding an adjust the top and bottom:

    #access li {
    padding-bottom: 85px;
    padding-top: 15px;
    position: relative;
}

    Not sure that will fix it in Safari as I can only test in Firefox using Firebug. Generally, browser differences are often caused by HTML coding errors – -but there is something funny about your site which prevents it from being validated — where is it hosted and was/is it on local host??

    BUT, you really have another bigger problem — as you have been modifying the twentyeleven theme files which will eventually create much grief for you down the road. When WP is updated, all your changes will be lost, and you also need to have a clean copy of the default theme for troubleshooting purposes. What you should have been doing is using a Child Theme:

    http://codex.wordpress.org/Child_Themes

    At this point, what you can do is create a child theme and then copy the CSS code from your current stylesheet into the new stylesheet — and then replace the current one with a new, clean copy.

    Hope that’s not too much at once, but you really don’t want to get into a bad situation and loose a ton of work :).

    Thread Starter Anne

    (@mellissaa)

    11 years, 4 months ago

    i figured it out thankyou!

    it cant be verified because its a server at sheridan because its just a school project
    also part of the project is just to edit the original rather than creating a child theme

    thanks for the help.

    another issue though, on the same site I want to edit the spacing between each of the author images on the right hand side in the authors widget i have, but I can’t figure out how.

    any ideas?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 4 months ago

    For CSS-specific issues, consider CSS-specific forums.

    WPyogi

    (@wpyogi)

    11 years, 4 months ago

    Are you using Firebug to work with the CSS? Best tool for that kind of question.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘safari and firefox displaying differently’ is closed to new replies.