Different browsers render differently

  • 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 https://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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter junhee.ann

    (@junheeann)

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

    this will definitely cause cross browser compatibility issuies

    https://validator.w3.org/check?uri=http%3A%2F%2Fcreativix.iwebix.de%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&group=0&user-agent=W3C_Validator%2F1.767

    Thread Starter junhee.ann

    (@junheeann)

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

    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,

    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

    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!

    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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Different browsers render differently’ is closed to new replies.