I use my PC every day, and often by the end of the day my eyes are tired, so while surfing the internet, I use my browser setting to set large font. And I hate websites where I can’t change font size.

You can’t change font size because it size uses pixels. The better idea is use percent to setup font size.

Using percent you can change font size using your browser setting, just use your mouse wheel with Ctrl key pressed.

There is a good Yahoo UI library to perform font reset and than set default fonts size with percent.

You can add two small css files (reset-fonts.css and base-min.css) to your project and than declare your font size with percent, like this

<style type="text/css">
    .pixelFont
    {
        font-size:14px;
    }

    .percentFont
    {
        font-size:108%;
    }
</style>


<p class="pixelFont">
Hello this is text with font size 14 pixels.
You can't resize this type of font.</p>


<p class="percentFont">
You can resize this font,
because it's size use percent.
Actually it's 108%</p>

Both fonts has the same size 14px with your default browser settings, but try to resize font size on the page with browser, and you will see than pixelFont are not resized in contrast to percentFont.

The common practice to create gradient background is use images. You can set url with your gradient to background property in css file and nothing more.

But you can also create vertical and horizontal background gradient using css without images

This technic works in the most browsers and it’s easy to use and understand.

Browsers supporting css gradient background

• Firefox >=3.6
• MSIE >=5.5 (!)
• Safari >=4
• Chrome

Gradient background without image for Firefox

Firefox support css property -moz-linear-gradient, using this property you can create both vertical and horizontal gradient only using CSS, without images. You can use it this way

background: -moz-linear-gradient(top, #880000, #000000);

The first parameter shows the direction of gradient, top means than gradient will be from bottom to top. The first color is start color, and the second color is finish gradient color.

Gradient background CSS without images in Chrome and Safari

Chrome and Safari support -webkit-gradient css property. The usage is below:

background: -webkit-gradient(linear,
                left top, left bottom, from(#880000), to(#000000));

First parameter is type of gradient, it can be either linear or radial. The second two parameters show direction of gradient, for example here gradient starts at left top corner of the element and finishes at left bottom corner of element.
And the last two parameters show start and end colors.

Notes:

• A gradient applied to a rectangle area is called a linear gradient.
• A gradient specified using circles is called a radial gradient.

Gradient background without images for Internet explorer

Internet explorer is also supports gradient background using DXImageTransform.Microsoft.Gradient function.

filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#880000', EndColorStr='#000000', GradientType=0);

Background gradient without image for Microsoft Internet Explorer has three parameters:

• First is start color
• second is end color
• and third is direction of gradient (0 – vertical gradient, 1 – horizontal gradient)

And below is full CSS code for cross browser gradient without image

Vertical background gradient CSS 

.vertical-background-gradient-css{
    /* for browsers not supporting gradient without image */
    background: #008800;
    /* Mozilla Firefox: */
    background: -moz-linear-gradient(top, #aa0000, #000000);
    /* Chrome and Safari:*/
    background: -webkit-gradient(linear,
                left top, left bottom, from(#aa0000), to(#000000));
    /* Microsoft Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#aa0000', EndColorStr='#000000', GradientType=0);
  }

Centering elements is very common task for web developer, and there are some tricks how to center elements with CSS quickly.

How to center <div> with CSS

It can be difficult to believe, but centering div elements in browser with css is very easy, and it’s works in all browsers, including IE6.

To center div with CSS you have to set both left and right margin of element to auto and set width for element, nothing more!!!

How to center a div element in IE6

But if you need to center div element just inside of <body> tag this trick will not work in IE6, but it can be easy solved with setting text-align:center for body tag.

To center div with CSS inside of body tag use the follow source code

<html>
<head>
    <style type="text/css">
        body
        {
            text-align: center; /* for IE */
        }  

        .center
        {
            margin:10px auto;
            width:400px;
            border:solid 1px red;
            text-align:center;
            height:200px;
            padding:20px;
        }

        .inner
        {
            width:50%;
            border:solid 1px green;
            height:100px;
        }
    </style>
</head>
<body>
    <div class="center">
        This text shoud be align center.
        <div class="center inner">
            and this text shoud be centered inside parent element
        </div>
    </div>
</body>
</html>

All modern browsers support position fixed property in CSS specification, but IE6 has problems with this.

IE6 does not understand position:fixed, but there is a trick how to emulate position fixed in Internet explorer 6

The code below works in all modern browsers and in IE6 too.

Steps to emulate position:fixed in IE6

• At first you need to set document type for your page, because without doctype this does not work. Set

  		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  

• Then add two elements on the page, the first with floating content, and the second with page content.
• Add css styles for elements (all css styles below)

The full page content is below. Just create new html file and copy and paste code below in this file, and open it in browser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">
        body
        {
            margin:0;
            border:0;
            height:100%;
            overflow-y:auto;
        }

        #fixed
        {
            display:block;
            top:10px;
            left:270px;
            width:130px;
            position:fixed;
            border:1px solid #f22;
            padding:10px;
            text-align:center;
            font-weight:bold;
        }
        * html #fixed {position:absolute;}

        #page
        {
            width:300px;
            margin:0 auto;
            word-spacing:20px;
        }
</style>
<!--[if lte IE 6]>
   <style type="text/css">
   /*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
   /*]]>*/
   </style>
<![endif]-->
</head>
<body>
<div id="fixed">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>

<div id="page">
Lorem ipsum dolor sit amet, consectetur adipiscing elit... <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit... <br/>
</div>
</body>
</html>

If you need to disable spellchecker for CKEditor you can disable it with scayt_autoStartup setting. just set it to false and spellchecker will be disabled, but it will be not removed, so you can use it just clicking on spellchecker button.

<script type="text/javascript">
    CKEDITOR.replace('your_text_area_id',
    {
        height: 400,
        scayt_autoStartup:false
    });
</script>

Another solution is complitely disable spellchecker plugin for CKEditor, you can do it with setting removePlugins

<script type="text/javascript">
    CKEDITOR.replace('your_text_area_id',
    {
        height: 400,
        removePlugins = 'scayt'
    });
</script>

I believe the first solution is better, because you can use spellchecker if you need it, and prefer first solution in my projects.

How to remove spellchecker for CKEditor globally

This two solutions works only for one specific CKEditor, but if you need to remove spellchecker for all your projects you need to use config.js file. This configuration file contains all global settings for CKEditor.