WordPress.org

Ready to get started?Download WordPress

Forums

Padding in Chrome and Safari (6 posts)

  1. timondeks
    Member
    Posted 1 year ago #

    I'm trying to fix an issue on the below site main menu nav; there's appears to be extra padding being added in Chrome and Safari as the whole nav menu skips a line. I have a reset in place and seem to have located the issue in the below code li padding. If I remove the right padding Chrome and Safair display the nav menu correctly but the menu items are then packed too close together. Would anyone have any experience as to why Chrome and Safari are unhappy with padding right in an li element?

    ul#hor-list li {
    display: inline;
    color: #a5b5e9;
    font: 16px Arial, sans-serif;letter-spacing: 0;
    padding-right: 6px\9;
    padding: 0px 5px 0px 0px;
    margin: 0px;
    }

    http://aruralexperience.com/

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Not quite sure what the problem is -- it's working -- but the second line will always override the above in something like this:

    padding-right: 6px\9;
    padding: 0px 5px 0px 0px;

    Right now, it shows this, however:

    ul#hor-list li {
        color: #A5B5E9;
        display: inline;
        font: 16px Arial,sans-serif;
        letter-spacing: 0;
        margin: 0;
        padding: 0 8px 0 0;
    }
  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    BTW, you do have a bunch of mark-up errors, some of which many be causing problems on your pages:

    http://validator.w3.org/check?uri=http%3A%2F%2Faruralexperience.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

  4. timondeks
    Member
    Posted 1 year ago #

    Thanks for the reply WPyogi, I moved the \9 hack down below the default padding. The drop line also appears in IE 7 unfor, is there a way to CSS hack /target padding in just Chrome and Safari browser engines?

  5. timondeks
    Member
    Posted 1 year ago #

    Its pretty confusing: even if I set the font size way down, so there's no way the li items could be longer than the container width it still line breaks in Chrome and Safari.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Resolve your mark-up errors.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.