WordPress.org

Ready to get started?Download WordPress

Forums

Different browsers render differently (8 posts)

  1. junhee.ann
    Member
    Posted 4 years ago #

    First of all, this theme is great in overall.

    However I have noticed that some items are rendered differently on different browsers.

    For the site http://creativix.iwebix.de/
    - Firefox renders correctly :-)
    - Google Chrome has incorrectly positioned search button
    - IE 8 has incorrectly positioned search button too

    I am not an expert on CSS and not sure how to make this work on all major ones.

  2. junhee.ann
    Member
    Posted 4 years ago #

    One more thing on Safari, the site was rendered very similar to Google Chrome.

  3. Rev. Voodoo
    Volunteer Moderator
    Posted 4 years ago #

  4. junhee.ann
    Member
    Posted 4 years ago #

    Thanks now I know how to validate before digging in too deep.

  5. IWEBIX
    Member
    Posted 4 years ago #

    Gonna make some fixed there in the next releases. But if you have a look at the validator results, you will notice that these are some small bugs that don't have nothing to do with cross-browser-comparbility!

    Cheers,

  6. Ramzii
    Member
    Posted 4 years ago #

    Hey Iwebix, great job! Im a fan of this theme and am exploring it to the bone! Looking forward to see the version that works 100% with IE.

    Chrome and FF are doing their job well, stupid IE always bitchin'.

    Thanks again, its really cool. If you dont mind me asking, how long does it take to write the initial code for such a site?

    cheers

  7. Ramzii
    Member
    Posted 4 years ago #

    Ok, Ive found some solutions on the web, to fix it for FF and Chrome edit the "style.php" file.

    Edit the search area to this:

    #searchbox {
    background: url(images/search.gif) no-repeat top;
    float:left;
    width: 144px;
    height: 28px;
    border: none;
    color: #6e6e6e;
    margin-top:10px;
    }
    
    #searchbutton {
    background: url(images/search_btn.gif) no-repeat;
    width: 27px;
    height: 28px;
    border: none;
    float:left;
    margin-top:10px;
    cursor: pointer;
    position:relative;
    }

    As for Internet Explorer.. find the file "ie.css" and replace the following area with:

    #searchbutton {
    background: url(images/search_btn.gif) no-repeat;
    width: 27px;
    height: 28px;
    border: none;
    position: relative;
    top: -0px;
    left: -6px;
    }

    Good luck!

  8. elleirdad
    Member
    Posted 4 years ago #

    Thank you, Ramzii!!

    It works like a charm. As a result, you gave me my weekend back. My wife and family will appreciate it, too.

Topic Closed

This topic has been closed to new replies.

About this Topic