Php Problems Errors and Warnings - Code Snippets

Showing posts with label css. Show all posts

Sunday, November 10, 2013

ie html contditional tage is not responding when using ie conditions

If you have a problem that ie tag is not working and the css file that you assign for this tag is not loading then the problem may be as I found it in the tag spaces. there must be no space in the tag before "If" and after ie9 .like what you see here :

<!--[if lt IE9]>
    <link rel="stylesheet" type="text/css" href="/assets/css/ie.css" />
<![endif]-->

that mistake can happened if it like the following:

<!--  [if lt IE9]> or <!--[if lt IE 9]> or  <!--[if lt IE 9]  > 

also

<!  [endif]-->  or <![endif]  -->

Note: Microsoft Stopped supporting IE condition tag in IE-10 and later Versions

Friday, August 9, 2013

NetworkError: 403 Forbidden Wamp Apache css js files

"NetworkError: 403 Forbidden Wamp Apache css js files
SyntaxError: syntax error <!DOCTYPE html>

Sometimes the Apache server cannot load static files other than html pages like images files, script and style files . when you have this error, that means some of the server configuration rules block the loading of these file and almost it will be in the Directory directive in http.conf file. So check the apache configuration file for Directory directive - Options Method - it may be duplicated in the main configuration file and the virtual host configuration file if you have virtual hosts, or it is not set .

if you get an error "forbidden" on directory with no index file then turn on the autoindex apache module or provide an index file if you don't want to list the files in that directory.
Other cause of this problem is that ,the server cannot reach the javascript files or there is a typing error in the syntax of the javascript tag check the script tag and the src attribute .

Thursday, July 4, 2013

Less Compiler repeat (Duplicate) CSS rules (Definitions)

Sometimes After writing a new mixins (functions) for less and try to compiling the less files I find the produced css file include repeated definitions of the mixin children mixins , I mean that when writing a function like this :

In the LESS file I wrote the following:

.className{

h1{font-size:90%;}

p{font-size:80%;}

}



div.className;

In the output CSS file, It will be like this :

div.className h1{font-size:90%;}

div.className p{font-size:80%;}

div h1{font-size:90%;}

div p{font-size:80%;}

So, What is the Solution here ?
The problem showed a lack of knowledge in less mixins essentials . because when you create a mixin for a class, then in order to use it as a css class, you should declare it as a reference for the class of the element .So we will write or less file again as follows:

.className(){

h1{font-size:90%;}

p{font-size:80%;}

}



div.classname{

.className() ;

}

Now the output css file will be like the following:

div.className h1{font-size:90%;}

div.className p{font-size:80%;}

Tuesday, June 4, 2013

Convert Twitter Bootstrap css file from LTR to RTL using Node.js R2 Module on Windows 7

I am using this library (twitter bootstrap) a lot on many RTL (Right To Left) sites , But it is not supporting RTL css rules, for that a lot of developers created RTL version of twitter bootstrap css library and that is great if they keep there products up to date .but unfortunately they don't. So we have to find a proper way to help our self solving this issue. How to do that :

First : Download and install Node.js on Windows 7.

Go to Node.js Site Download page and Download Node.js Installer . be sure to check the npm option to be installed on your computer from the installation wizard :

What is Npm ?
Npm is Node Packaged Modules where you can find a lot of modules that work with node.js to ease a lot of functions that you don not need to create by your self like Mysql Package which is A node.js driver for mysql.

Second: Download and install Node.js Module (R2):

From the Command line Just enter this command :

npm install -g R2

-g : this attribute will add R2 to the system path so you can Run it from any place.

Third: Run R2 on the LTR css file to convert it to RTL css file.

go to the folder that contain your css file that you want to convert it and from the command line type the following :
r2 [the name of the original ltr file] [the name of the rtl file]
In the twitter bootstrap case we neet to do the following:
r2 bootstrap.css bootstrap.rtl.css

And hopppppaaa .................