What We Do
We provide top quality services and best solutions based on your requirements and needs.
Share

Cross Browser Compatibility

Nowadays everyone’s using a different browser. Between popular options like Firefox, Safari, Chrome and Internet Explorer, which make up close to 98% of the internet market share of browsers. There are a multitude of browsers being used to view websites, portals or even web system.

Not everyone uses the same browser. Similar to how everyone is running on a different operating system, we can’t expect all people to be using the same web browsing tool. When there are so many different options out there, each running their own rendering engine. It makes web developers, web programmer, system analyst, software engineer and etc out there become headache in order to ensure that their web design or application will hold up in each of them.

There are some online tools and software that we can use to test the view of website or portal on various browsers.

  1. Adobe Browser Lab- Adobe Browser lab offers an awesome solution for viewing on demand screenshots of your site.( https://browserlab.adobe.com/index.html )
  2. Browsershots- Makes screenshots of your web design in a lot of different browsers. After you submit your URL, it gives you a url where your screenshots will be loaded up.(http://browsershots.org/ )
  3. Browser Sandbox- Runs an application to view your site in a variety of browsers.(http://spoon.net/browsers/ )
  4. Browsrcamp- Allows you to test the compatibility of your design with Mac OS X browsers.(http://www.browsrcamp.com/ )
  5. IE Tester- A free WebBrowser that allows you to check how your site looks like on IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP.(http://www.my-debugbar.com/wiki/IETester/HomePage )
How to fix it?
  1. Validate- First off, validate your site. Ironing out those XHTML and CSS errors can often solve those pesky browser bugs. I suggest running your site through W3′s XHTML Validator (http://validator.w3.org/) and CSS Validator (http://jigsaw.w3.org/css-validator/).
  2. Reset CSS- Another great way to ensure your site is cross browser compatible is to always reset your CSS before working on a project. There are many different global CSS resets, but Eric Meyer’s one and Yahoo’s one are considered to be the most correct ones. Include the CSS reset styling at the top of your stylesheet.
    Example Eric Meyer’s css reset:
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-size: 100%;
      vertical-align: baseline;
      background: transparent;
    }
    body {
      line-height: 1;
    }
    ol, ul {
      list-style: none;
    }
    blockquote, q {
      quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
      content: '';
      content: none;
    }
     
    /* remember to define focus styles! */
    :focus {
      outline: 0;
    }
     
    /* remember to highlight inserts somehow! */
    ins {
      text-decoration: none;
    }
    del {
      text-decoration: line-through;
    }
     
    /* tables still need 'cellspacing="0"' in the markup */
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    OR just simply link to it in your HTML-documents, right before your own stylesheet (Yahoo’s css reset):
     
  3. Conditional Statement- Another popular method of ensuring your site is cross-browser-compatible is targeting specific browsers using conditional statements. Basically, the idea is to detect the user’s browser, and if it is one of those specified, it should perform a certain action.
    Include a stylesheet if the browser is IE:
    Target Specific Versions of IE:
  4. Php Browser Detect- If you are looking for a more specific way of targeting browsers and even operating systems, then you should consider checking out Techpattern’s PHP Browser Detection Script (http://techpatterns.com/downloads/php_browser_detection.php). It’s a very powerful script that will detect everything from your visitor’s operating system, browser, JavaScript support, screen resolution, and more.
  5. JQuery Browser Detection- For a jQuery-based solution of detecting browsers and adding a corresponding class to the body of your site, check out TVI Design’s Browser Detection (http://www.tvidesign.co.uk/blog/CSS-Browser-detection-using-jQuery-instead-of-hacks.aspx) using jQuery. The script adds a class to the body, which you can then style in CSS.

MXAE Release News

MXAE 2.7.5 Released
We would like to announce the immediate availability of MXAE 2.7.5. This release focuses on...




Tips & Tricks

Custom Attributes
You can actually define your own custom attributes and access it via the MXAE API. This is good...




MXAE Free Hosting

We are offering FREE hosting on MXAE platform with no string attached. You can use it as a development or demo hosting for your company. You can also use it to build your own website or host your client website.