What is Quirk Mode in html

Quirks Mode is a mode of operation of web browsers such as Internet Explorer (IE), Firefox, and Opera. Basically, Quirks Mode (also called Compatibility Mode) means that a relatively modern browser in­ten­tio­nal­ly simulates many bugs in older browsers, especially IE 4 and IE 5.

Quirks Mode is triggered by doctype sniffing, also known as doctype switching. This means that the browser inspects the start of an HTML document to see whether it contains a doctype declaration as required by HTML specifications.

The purpose of Quirks Mode is to make old pages to display as their author intended. Old pages may have been written to utilize known features of old browsers or at least to adapt to them. For more information about Quirks Mode in general, consult the QuirksMode.org site.

There is no authoritative specification of what happens in Quirks Mode. After all, the mode is, by essence, an inten­tional violation of CSS and HTML specifications. However, since authors may need a description of what may actually happen in Quirks Mode, I have composed this document.

If you have an existing page that seems to work well but lacks a doctype dec­la­ra­tion (required by HTML specifications) at the beginning, you should not simply put such a dec­la­ra­tion there. The reason is that the dec­la­ra­tion makes browsers work in the so-called Standards Mode as opposite to Quirks Mode. This may mean just about anything. I have seen the entire content of a page disappear when you add a doctype dec­la­ra­tion. More often, the layout changes in rather un­ex­pect­ed ways. Well, the ways are not that un­ex­pect­ed if you know what may happen in Quirks Mode.

Before adding a doctype dec­la­ra­tion, you should check both the HTML and CSS code for syntactic correctness by using validators and checkers. This may not be enough, since the page might still have been written relying on things that just “work”—in Quirks Mode. Thus, you should test the page at least on IE 7 and Firefox 2 in Standards Mode, i.e. after adding a doctype dec­la­ra­tion. If the page doesn’t work then, the following list might be useful for spotting the problem.

When creating a a new page, you need not know about Quirks Mode and should usually not think about it. Simply write according to HTML and CSS specifications; this includes using a doctype dec­la­ra­tion that puts modern browsers into Standards Mode. Moreover, put the doctype declaration at the very start, since some browsers go to Quirks Mode, if there is anything (even a comment) before it. (This causes trouble if you are using XHTML, but in most cases, you shouldn’t use XHTML for web pages anyway, for the time being.) But if you decide to use some features that might only work in Quirks Mode, such as a height=”100%” attribute for a table element, you should check the list for other possible implications.

CSS Sprites

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

So how it is done?

This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used. The Yahoo page or msn home page, for example, employs this technique.

Let’s start by showing the traditional way of making the list as navigators. Notice in the CSS below how the anchor tag does not get a background-image, but each individual class does.

#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url(’../img/image1.gif’)}
#nav li a:hover.item1 {background-image:url(’../img/image1_over.gif’)}
#nav li a.item2 {background-image:url(’../img/image2.gif’)}
#nav li a:hover.item2 {background-image:url(’../img/image2_over.gif’)}
.
.
.and so on

Using CSS Sprites, we can really lighten this example up. Instead of having ten separate images for the buttons (five default states and five rollover states), we can literally combine all of them into one big long image. I won’t go into great detail about how this is done, I’ll just give you a basic walkthrough. Create a new image that is as wide as your widest image and and as tall as the combined height of all your images plus X pixels, where X is the number of images you have. Now place you images into this new image, left aligned, one on top of the other with one pixel of white space in between.

Now check out by using css sprites example. Notice in the CSS that there is a single background-image applied to the anchor element itself, and the unique classes merely shift the background position with negative Y coordinates.

#nav li a {background-image:url(’../img/image_nav.gif’)}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
…

so on…..

We were able to reduce the number of HTTP-Requests by 9 and the total file size of the image(s) by 6.5 KB. That’s a pretty huge improvement for such a little example.

This was a small example which reduced this much size.Think about this doing on the whole website.

Please refer  Alistapart.com

too.

Fade Out Bottom

This is a cool effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0px;) with a transparent PNG image and a high z-index value. There is also a fix in place for IE 6.Just what like at the bottom of facebook.

The source code for the html is:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Strict//EN”>

<head>
<title>Fade Out Bottom</title>

<link rel=”stylesheet” type=”text/css” href=”style.css” />

<!–[if lte IE 6]>

<style type=”text/css” media=”screen”>
#bottom_fade {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’bottom-fade.png’,sizingMethod=’scale’);
left: 0px;
height: 200px;
position: absolute;
bottom: -18px;
width: expression(document.body.clientWidth);
}
html, body {
height: 100%; overflow: auto;
}
</style>
<![endif]–>
</head>

<body>

<div id=”page_wrap”>

<h1>Fade Out Bottom</h1>

<br />

<p><strong>This is a cool effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0px;) with a transparent PNG image and a high z-index value. There is also a fix in place for IE 6.</strong></p><br />

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<br />
<div id=”bottom_fade”><ul><li>abcd </li><li>abcd </li><li>abcd </li><li>abcd </li><li>abcd </li></ul></div>
</div>
</body>

</html>

The source code for  stule.css will be

* {
margin: 0;
padding: 0;
border: 0;
}

body {
font-family: “Lucida Grande”, Georgia, sans-serif;
font-size: 67.5%;
}

p {
font-size: 1.1em;
line-height: 1.6em;
}

#page_wrap {
width: 600px;
z-index: 1;
margin: 10px auto;
}

#bottom_fade {
width: 600px;
height: 50px;
z-index: 99;
position: fixed;
bottom: 0px;
background: url(”bottom-fade.png”) bottom center no-repeat;
}

#bottom_fade ul{list-style:none;display:block;margin-top:10px;}
#bottom_fade ul li{display:inline;padding:10px;}

Try this source code and change the background image as this is the faded one.

Validating flash

The code which is generated by macromedia dreamweaver for flash doesn’t validate in w3c in xhtml DTD.

It throws  error that embed is not a valid tag.blah blah…… Its better to use object which is a valid xhtml tag

Also it doesnt work in Firefox ,opera and netscape.After searching a lot on google basically from www.alistapart.com i found a way to work on flash code which works on all browsers.

This is done by this following code.

<!–[if IE]><object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″
codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0″ width=”100″ height=”120″>
<param name=”movie”
value=’some.swf’>
<![endif]x–>
<!–[if !IE]> <–>
<object type=”application/x-shockwave-flash” data=”some.swf” width=”100″ height=”120″ >
<!–> <![endif]–>
<param name=”movie” value=”some.swf” />
<param name=”quality” value=”high” />
</object>

enjoy…….this code works on all browsers.

Validating Iframe

As a developer ,i came across a solution for validating iframes in strict DTD. As iframe is a depreciated tag, still it works in html 4.01 ,xhtml1.0.But its better to use object in place of iframe.

<object> is for inserting any foreign object into XHTML documents. Since Iframes include HTML/XHTML documents, the MIME type for the document is “text/html” or “application/xhtml+xml”. We will use the first one because it is compatible with all browsers including Internet Explorer.

Let me show you by an example.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
</head>
<body>
<object style=”width:500px; height:200px” data=”http://www.google.com” type=”text/html” standby=”Google”></object>
</body>
</html>

Let me briefly explain the terms which are used in the above snippet.

• classid - Defines a ClassID in the registry.
• data – The URL of the object (required).
• name – The name of the object if you are using it in JavaScript/VBScript or some other scripting language.
• standby – Text to display when loading.
• type – The MIME type of the object . Required.

When you run this example it is xhtml validated wheteher its transitional or strict.

MVC IN RAILS

MVC is a pattern for the architecture of a software application. It separates an
application into the following three components:

•  models, for handling data and business logic

•  controllers, for handling the user interface and application logic

• views, for handling graphical user interface objects and presentation logic

This separation results in user requests being processed as follows:
1. The browser, on the client, sends a request for a page to the controller on the
server.
2. The controller retrieves the data it needs from the model in order to respond
to the request.
3. The controller renders the page and sends it to the view.
4. The view sends the page back to the client for the browser to display.

Cake php

Cake is a rapid development framework for PHP which uses commonly known design patterns like ActiveRecord, Association Data Mapping, Front Controller and MVC. Our primary goal is to provide a structured framework that enables PHP users at all levels to rapidly develop robust web applications, without any loss to flexibility.

1. Hot Features:
   • Model, View, Controller Architecture
   • View Helpers for AJAX, Javascript, HTML Forms and more
   • Built-in Validation
   • Application Scaffolding
   • Application and CRUD code generation via Bake
   • Access Control Lists
   • Data Sanitization
   • Security, Session, and Request Handling Components
   • Flexible View Caching
   • And More…
2. Active, Friendly Community – Just join our IRC channel to see who’s in. We’d love to help you get started.
3. Flexible License – Cake is distributed under the MIT License
4. Clean IP – Every line of code was written by the CakePHP development team
5. Extremely Simple – Just look at the name…It’s Cake
6. Rapid Development – Build apps faster than ever before .
7. Best Practices – Cake is easy to understand and sets the industry standard in security authentication, and session handling, among other features.
8. OO – Whether you are a seasoned object-oriented programmer or a beginner, you’ll feel comfortable
9. No Configuration – Set-up the database and watch the magic begin

More stuffs on Ruby

Variables and identifers normally start with an alphabetic letter or a special modifier.

• Local variables (&pseudo-variables such as self and nil) begin with a lowrcase letter.
• Global variables begin with dollar sign($)
• Instance variables with an object begin with an at sign(@)
• Class variables within a class begin with two at signs @@.
• Constant begin with capital letters.

For Example

1. local variables: alpha_ident,gama
2. pseudo-variables:self,nil
3. Constants:LENGTH,Length
4. Instance variables:@sum,@not_const
5. Class variable:@@my_var
6. Global variable:$beta,$pi

We will see some codes in ruby in the next post

Scroll area with overflow in CSS

Small Scrollable Areas

Scrollable areas on webpages has become increasingly popular after being used by some leading design communities on internet. Scroll areas can be done with a textarea or iframe tags, but a more frequent way of doing it is through using the abilities that already lies within HTML and CSS for any block element. A normal block element like <div> can be set to a certain height and width. What happens when the content of the element exceeds the size given to it?

Enter the CSS property overflow.

• overflow: auto – This will insert a scrollbar – horizontal, vertical or both only if the content in the block requires it. For practical purposes, this is probably the most useful for creating a scrolling area.
• overflow: scroll – This will will insert horizontal and vertical scrollbars. They will become active only if the content requires it.
• overflow: visible – This will cause the block to expand to view the content.
• overflow: hidden – This forces the block to only show content that fits in the block. Other content will be clipped and not hidden with no scrollbars.

for example

<!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” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>scrolling</title>
<style type=”text/css”>
<!–
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
–>
</style>
</head>

<body>

<div class=”scroll”>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>
<span style=”color: red;”>This is red color</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>This is a normal paragraph.
<span style=”font-weight: bold; font-size: 22px;”>This is big bold text</span>
</p>
<p>This scrolling are can contain normal html like <a href=”#”>link</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>

</body>

</html>
save this code and run.

Layer on layer with z-index (Layers)

CSS operates in three dimensions – height, width and depth. . In this, we will learn how to let different elements become layers. In short, this means the order of which the elements overlap one another.

For that purpose, you can assign each element a number (z-index). The system is that an element with a higher number overlaps an element with a lower number.