Skip to main content

Browser tips and tricks, my tests

Note that, by default, Firefox and IE align the page elements differently.
For ex, Firefox aligns elements to the left, and IE to center.
Hence you may need to write in your page, like: align="left" to get the left display properly in IE.

If you want to control the display of elements in IE6 and other browsers, you can use !important property. (People still using IE6 are not better than early men).

A way to control the display of elements in IE6 and other browsers:
.main-nav { margin-top: 10px; *margin-top: 20px; }
// IE6 takes margin-top: 20px, other browsers take margin-top: 10px;


Check that there are no unclosed comments in the file, in either css or javascript code, like for example, the html comments are opened, but not closed later.

Better to write the style tags before the script tags in a file, as browsers like chrome may not work properly.

Its better to include the css (and probably js ?) files in the header file. Because the css is global for the entire site (all files need it). But all js files may not be needed by every php file in our site. Also, while the page is loading, for the initial few seconds, the page may appear as if the css file is not present. (Takes time to load css). So its always good to include your css files in header file.

Generally, web designers say that it is not right to specify height for divs...
But i think its better to provide height for certain divs which contain an image... especially if the divs are laid continuously, with each div containing an image.

In IE6, the last sub menu item is disappearing when we mouseover on it. It is solved by adding: height: 30px; to the class: .jqueryslidemenu ul li ul li{}

 It is important to include the scripts in the hierarchical fashion, in the order of their dependency. For example, it is important to include the jquery javascript file, before including the lightbox javascript file in our code, as lightbox functionality needs jquery to be initialised first.

Comments

Popular posts from this blog

Retaining checkbox status of a form after submitting it

we will learn here how to post back or retain the value ( status ) of the checkbox. We will use php header redirection to post back the values to our main page where checkbox is present. We will call form page as first page and action or submitted page as second page. The form data will be received by second page and it is supposed to post back the form data back to form page by using query string through address bar. To keep the second page simple we will keep only the redirection part. Here we have excluded the part which takes care if the form passes its validation and execute the actual script (redirection part). Here is the code of our form with two checkboxes, pb-check.php <?php $t1=$_GET['t1']; $t2=$_GET['t2']; if($t1=="yes"){$t1v="checked";} else{$t1v=="";} if($t2=="yes"){$t2v="checked";} else{$t2v=="";} ?> HTML Form code: <form method="post" action="pb-chk.php"> <inp...

Identify the user's browser

Sometimes there arises a need to identify the user's browser. It is pretty easy to find browser with jquery. So if you have included jquery in your page, it takes a simple line to identify the browser:  if ($. browser . msie ) {} // IE if (($.browser.msie) && ($.browser.version == '6.0')) {} // IE6 if ($. browser . opera ) {} // opera if ($. browser . mozilla) {} // Firefox With the help of php, you can get the browser  details with the help of:  $_SERVER['HTTP_USER_AGENT']; Or you can even use the combined version of php and javascript. php + javascript code: <script type="text/javascript"> var string1 = "<?php echo $_SERVER['HTTP_USER_AGENT']; ?>"; // Browser string var myRegExp1 = /Firefox/; var matchPos1 = string1.search(myRegExp1); var myRegExp2 = /Chrome/; var matchPos2 = string1.search(myRegExp2); var myRegExp3 = /MSIE/; var matchPos3 = string1.search(myRegExp3); if(matchPos1 != -1) ...

Facebook connect using graph api

An example of using facebook graph api to authenticate users: Setup a new application in facebook apps and get the app id and secret. Now follow the steps: Remember to give the same url in the below code, as that of the app settings. <?php if( !isset($_GET['code'])) { ?> <a href="https://graph.facebook.com/oauth/authorize?client_id=xxxxxxxx&redirect_uri=http://xxxxxxxxxxxxxxxx/">Connect using Facebook</a> <?php } $code = trim($_GET['code']); if(isset($_GET['code'])) $token = file_get_contents("https://graph.facebook.com/oauth/access_token?client_id=xxxxxxxx&redirect_uri=http://xxxxxxxxxxxxxxx&client_secret=xxxxxxxxxxxx&code=$code"); $token = explode("=", $token); if(isset($_GET['code'])) $user = json_decode(file_get_contents('https://graph.facebook.com/me?access_token='.$token[1]));  print_r($user); ?>