WordPress.org

Forums

[resolved] Firefox messing up CSS (10 posts)

  1. The Night Fox
    Member
    Posted 4 years ago #

    I have a serach box in the header of my wordpress theme and it looks perfect in all browsers except firefox where the "search..." text is just a little below the box.

    How can a I make a browser specific rule to fix this?

    div#search { height: 37px; margin: 0 20px 20px 0; width:296px; float:right; }
    div#search form { padding: 0; margin:0; }
    div#search input { border: 0; padding: 10px 10px 0 45px; width: 245px; height: 35px; margin:0; }
  2. esmi
    Forum Moderator
    Posted 4 years ago #

    Unless you provide a link to a page demonstrating the problem, no one will be able to offer much in the way of assistance.

  3. The Night Fox
    Member
    Posted 4 years ago #

  4. esmi
    Forum Moderator
    Posted 4 years ago #

    Start by sorting out the markup errors. Then move onto the CSS errors.
    http://codex.wordpress.org/Validating_a_Website

  5. The Night Fox
    Member
    Posted 4 years ago #

    Thanks for the input, but will that really solve my problem? Also, will my page load faster if the markup errors are fixed?

  6. The Night Fox
    Member
    Posted 4 years ago #

    I fixed some of the markup errors, but I'm still no closer to fixing my initial problem. Any suggestions?

  7. The Night Fox
    Member
    Posted 4 years ago #

    Hmm I'm still stumped on how to make a browser specific rule, can anyone help?

  8. Chelsea Otakan
    Member
    Posted 4 years ago #

    input styles are some of the hardest things to get proper cross browser. Try using setting your margins and paddings for the search form to 0 and adjusting the line-height. I've found this to be a little more accurate across browsers.

  9. Chelsea Otakan
    Member
    Posted 4 years ago #

    This is the closest I could get it between Chrome and Firefox:

    div#search input {
    border: 0;
    padding: 0 10px 0 45px;
    width: 245px;
    height: 35px;
    line-height: 38px;
    }
  10. The Night Fox
    Member
    Posted 4 years ago #

    Thanks, that looks great!

Topic Closed

This topic has been closed to new replies.

About this Topic