1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How do I solve these rendering differences

Discussion in 'CSS' started by ketting00, Aug 12, 2015.

  1. #1
    Hi guys,

    I have a search button attached to a search field which rendered as bellow:
    search.png
    How do I fix those differences.
    HTML:
    
    <form method=post action="search.php">
        <input type=text name=search />
        <input type=submit class=search_button value='search' />
    </form>
    
    Code (markup):
    CSS:
    
    input[type="text"][name="search"]{
        border:none;
        border-radius: 0.8em 0 0 0.8em;
        height: 1.5em;
        margin-right: -0.27em;
    }
    .search_button {
        padding: 0.28em 0.7em 0.28em 0.7em;
        background-color: #FFF;
        border-radius: 0 0.8em 0.8em 0;
        border: none;
        cursor: pointer;
        -moz-box-shadow: 0 0 0.2em #888;
        -webkit-box-shadow: 0 0 0.2em #888;
        box-shadow: 0 0 0.2em #888;
    }
    
    Code (markup):
    I want it to look like rendered in Chrome.
    Thanks,
    SEMrush
    Note that I've borrowed CSS reset from the tutorial of this thread: https://forums.digitalpoint.com/threads/progressive-enhancement-design-from-the-inside-out.2759516/
     
    Solved! View solution.
    ketting00, Aug 12, 2015 IP
    SEMrush
  2. #2
    https://jsfiddle.net/hkchs08h/1/
    Tested in Chrome, Firefox and Edge. It's a very close approximation, at least. You should realise that not all browsers are created equal, and give up on the "everything should look the same on every browser" - as long as things work, and look more or less the same (not considering older browsers with lacking CSS-support), it should do.
     
    PoPSiCLe, Aug 12, 2015 IP
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    748
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #3
    ketting00, Aug 12, 2015 IP