WordPress.org

Ready to get started?Download WordPress

Forums

items in header are 2px higher in chrome (3 posts)

  1. eric brockman
    Member
    Posted 2 years ago #

    Not sure why this is happening, or how to fix it, but the items in my header div (logo, company name, navbar, search form) line up in ff and safari, but in chrome the navbar and search form are 2px higher.

    *HTML and CSS both validate with no errors.

    Here the link: http://ericbrockmanwebsites.com/dev/

    Here's my css

    logo:

    header #logo {
        display: inline-block;
        float:left;
        width: 50px;
        position: absolute;
        margin-top: 24px;
        width: 50px;
    }

    Company Name:

    header #name {
        position: absolute;
        display: inline-block;
        margin-top: 30px;
        margin-left: 55px;
        width: 330px;
    }

    navbar:

    header nav {
        margin-left: 395px;
        position: absolute;
        width: 400px;
        display: inline-block;
        margin-top:28.5px;
    }

    Searchform:

    header form#topsearch {
        background: #685a47;
        background: rgba(171, 152, 120, 0.5);
        width: 178px;
        height: 18px;
        position: absolute;
        display: inline-block;
        margin-top: 33.5px;
        right: 0;
        border-radius: 6px;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
    }

    Any help is greatly appreciated!

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    Try using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

  3. eric brockman
    Member
    Posted 2 years ago #

    Thanks esmi, I use firebug, but I can't figure out a way of changing the code for chrome, but not everything else.

    cheers,

Topic Closed

This topic has been closed to new replies.

About this Topic