Results 1 to 2 of 2

Thread: CSS cross browser compatibility

  1. #1
    Join Date
    May 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS cross browser compatibility

    Hello All!

    How does one make a header like this cross browser compatible? It works in most browsers but I noticed in IE8 it renders the header weird. Here is the CSS:

    .header { position: relative; padding-bottom: 0; z-index: 20; }
    #banner-top { float: right; line-height: 0; margin: 20px 20px 20px 0px; }
    .logo { float: left; margin: 0 50px 0 20px; }
    .logo.image { line-height: 0px; }
    .logo .plain-text { font-size: 20px; line-height: 30px; font-weight: bold; }
    .logo #tagline { font-size: 11px; font-style: italic; }

    #search-bar { float:left;
    margin-top:25px;
    z-index:500;}

    #search-bar #home_search {
    display: block;
    height: 40px;
    margin: 0;
    padding: 4px;
    position: relative;
    width: 595px;}

    #search-bar #home_search_input { background: none repeat scroll 0 0 transparent;
    border: 1px solid #C6C6C6;
    color: #666666;
    display: inline-block;
    font-size: 12px;
    height: 40px;
    line-height: 14px;
    padding: 0 10px;
    width: 480px; }




    #search-bar #home_search_submit {
    border: 1px solid #dc5653;
    background: #fe5d62; /*fallback for non-CSS3 browsers*/
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fe8781) to(#fe5d62)); /*old webkit*/
    background: -webkit-linear-gradient(#fe8781, #fe5d62); /*new webkit*/
    background: -moz-linear-gradient(#fe8781, #fe5d62); /*gecko*/
    background: -ms-linear-gradient(#fe8781, #fe5d62); /*IE10*/
    background: -o-linear-gradient(#fe8781, #fe5d62); /*opera 11.10+*/
    background: linear-gradient(#fe8781, #fe5d62); /*future CSS3 browsers*/
    -pie-background: linear-gradient(#fe8781, #fe5d62); /*PIE*/

    repeat scroll 0 0 transparent;
    border: 0 none !important;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    height: 43px;
    padding: 0 10px;
    margin-left: 6px;
    width: 80px;}


    Does anybody know how to tweek this code to render the same in all browsers?

  2. #2
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,531
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Not answering the question, just a quick note. -

    Please use the forum's bbcode tags to make it more readable:

    for php code............[php] <?php /* code goes here */ ?> [/php]
    for html...............[html] <!-- markup goes here -->.....[/html]
    for js/css/other.......[code] code goes here................[/code]

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •