PHP/HTML/CSS - If Firefox, If Chrome, If Safari

PHP/HTML/CSS - If FireFox, If Chrome, If Safari

With CSS there is no way you can achieve browser detection.
However with PHP, ASP and other programming languages you can get browser detection within the page. I am not here to tell you the pro or cons about it - I take it you know about the bad and good about browser detection and web standards but here is the list.

PHP solution.

if(isset($_SERVER['HTTP_USER_AGENT'])){
    $agent = $_SERVER['HTTP_USER_AGENT'];
}

Then, compare it to what you want

For compare with, for example "firefox" you should do:

if(strlen(strstr($agent,"Firefox")) > 0 ){      
    $browser = 'firefox';
}
if($browser=='firefox'){
    echo '<style type="text/css">.element{top:2px}';
}

jQuery solution.

// Safari CSS and Webkit Google Chrome
if ($.browser.webkit) {
   $("#element").css('top', '2px');
} else if ( $.browser.safari ) //not fully supported on 1.7 jQuery {
   $("#element").css('top', '2px');
// Opera CSS
} else if ( $.browser.opera ) {
   $("#element").css('top', '2px');
// Internet Explorer CSS
} else if ( $.browser.msie ) {
   $("#element").css('top', '2px');
// Mozilla FireFox CSS
} else if ( $.browser.mozilla ) {
   $("#element").css('top', '2px');
// Normal Revert, careful and note your the use of !important
} else {
   $("#element").css('top', '2px');
   // You can have normal JavaScript between these too
   document.getElementById("element").style.top="2px";
}

Mootools solution.

if (Browser.ie){
    // This code will only run in IE
}

if (Browser.firefox2){
    // This code will only run in Firefox 2
}
if (Browser.firefox){
    // This code will only run in Firefox 
} 
if (Browser.chrome){
    // This code will only run in Chrome
} 
if (Browser.opera){
    // This code will only run in Chrome
}   
if (Browser.ie6 || Browser.ie7){
    // Please upgrade your browser
}
// Also notice you can use Engine.trident
if(Browser.Engine.trident) {

}

Prototype solution.

if(Prototype.Browser.IE){
  // do something IE specific
}
if(Prototype.Browser.Opera){
  // do something Opera specific
}
if(Prototype.Browser.WebKit){
  // do something WebKit specific
}
if(Prototype.Browser.MobileSafari){
  // do something MobileSafari specific - iPhone etc
}
if(Prototype.Browser.Gecko){
  // do something Gecko specific
}

Cross Browser Debugging between Firefox and Safari (or Chrome)

Typically, and anecdotally, the majority of large differences between cross-browser rendering of the same page are due to:

• invalid (x)html, use the on-line html validator from the W3 to ensure the validity of the mark-up.
• lack of establishing a base-line for CSS (as @Jeroen suggests: use a css reset).
• use of CSS which varies in support from browser-to-browser, particularly the newer CSS 3 (transitions, column-count and box-reflect¹ particularly, though there are many, many others).

---

1. This may, or may not be, a proposal for inclusion in CSS3 by the World Wide Web Consortium, the only references I've found for it are exclusively with the -webkit vendor prefix, which suggests that it's probably a proprietary extension. I can, however, hope that others will follow suit. It's so much easier to apply reflections with css than with js/php...

Site loading on chrome and opera but partially loading on firefox and safari

With the help of one my friend got this fixed.
The issue is kind of wierd, when I remove the code for Gzip it working fine. I guess this is the issue with encoding. Google supports it but Firefox and safari don't.

I Comapared my code with my previous backup and checked what is wrong. Below is my code difference.

https://www.diffchecker.com/xbr6lyvr

How to write specific CSS for mozilla, chrome and IE

For that

• You can scan user Agent and find out which browser, its version. Including the OS for OS specific styles
• You can use various CSS Hacks for specific browser
• Or Scripts or Plugins to indentify the browser and apply various classes to the elements

Using PHP

See

• http://php.net/manual/en/function.get-browser.php
• http://techpatterns.com/downloads/php-browser-detection-basic.php
• http://techpatterns.com/downloads/php_browser_detection.php (contains JS also)

Then then create the dynamic CSS file as per the detected browser

Here is a CSS Hacks list

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

Source: http://paulirish.com/2009/browser-specific-css-hacks/

If you want to use Plugin then here is one

http://rafael.adm.br/css_browser_selector/

HTML/PHP code working in all browsers but Google Chrome and Safari

Here's your problem:

<a onclick="document.getElementById('Consultar').submit()">

Every row has its own form, but they all have the id Consultar. So, the getElementById() gets the first row. I'm surprised that the other rows would work in any browser.

If the a is always a direct child of the form, you could dispense with the id entirely and just do:

<a onclick="this.parentNode.submit()">

problem with my css which is working on mozilla firefox but not on Chrome and safari?

Maybe, for that positioning work,(although inside tables, might bring issues in several browsers) you need to asign display:block property to .header and .back, as span is inline.

The html there is missing the opening tr, but I guess is just a copy/paste issue.
In general, is better to avoid so much deprecated html atributes and move them to a css sheet file. Those margins also might act differently in the several IE browsers.

PHP variable in HTML table displays well in Chrome, Firefox, and Safari, but poorly in IE 8

Well, you did ask for links to be only that high:

table.commentecho td a {
    height: 20px;
}

The trick is, this shouldn't work, and doesn't in most browsers: according to the CSS standard, height explicitly does not apply to inline elements like <a>. However in IE's Quirks Mode it does anyway. So:

• remove the ineffective height: property
• ensure you serve your page with a Standards Mode DOCTYPE declaration. You don't want Quirks Mode which is full of nasty legacy compatibility bugs like this.

Also remember to use htmlspecialchars() when templating data strings into HTML, or you'll have cross-site-scripting vulnerabilities. stripslashes() does not do this job and is almost certainly a mistake.

---

Related Topics