Kurinchi Blogger Scribbles ... » CSS

HTTP-Header: User-agent modification

kurinchilamp — Sun, 06 Dec 2009 07:09:21 +0000

When a browser makes a request to the server, it sends information such as its operating system name, version in addition to the type of the browser from which the request originates in the header variable “user-agent”.

Depending on the request made, server responds back with specific details which can range from browser specific css layout to calling certain javascriptsfor certain browsers.

Changing the user-agent also helps us in understanding how spider-agents or bots will see the pages that we build. It also helps us design applications that will mimic a request as originating from a mobile phone and helps us in viewing the behavior of the application in different mobile clients.

To read more about HTTP-Headers check ietf

CakePHP: To Check if Mod_rewrite is Disabled

kurinchilamp — Wed, 03 Jun 2009 02:31:32 +0000

How to check if mod_rewrite is disabled in Apache when CakePHP is installed?
Initially when CakePHP is downloaded from sourceforge and is installed in your localhost, you can test if it is working or not by going to the respective directory in your local host http://localhost/cake.

If CSS styling is missing in the display page, then check apache server’s httpd.conf file to see if mod_rewrite module is enabled. Remove the comment symbol to enable mod_rewrite in your localhost and restart Apache server for the change to take effect

LoadModule rewrite_module modules/mod_rewrite.so

Now reload the page to check if the page loads as expected i.e. css styles applied to the page

If you see a good looking css styled page, then mod_rewrite is enabled in your system and you can go ahead in configuring your database settings and other routing parameters as needed.

CSS FIR Technique explained

kurinchilamp — Fri, 22 May 2009 00:48:24 +0000

FIR stands for Fahrner Image Replacement named after Todd Fahrner.

It is a standard compliant technique in which

and tags are used to have nice headings and highlights.

Key fact in this technique is that the text will get displayed even if the CSS is disabled for some reason, hence presenting the text beneath it.

Sample CSS in HTML context


	Kurinchi Blogger

CSS Definition

myheading{background: transparent url(images/logo.gif) no-repeat scroll left top; display:block; float: left; width: 200px; height: 65px;}
#myheading #mytext{display: none;}

To test various possibilities in Firefox browser …

1) Disable CSS, Enable Images: View > Page style > No style
Now check the page where FIR is applied by refreshing the page.

2) Enable CSS, Disable Images: Tools > options > content > UNCHECK “Load images automatically”
Now check the page where FIR is applied by refreshing the page and the text will not get displayed in this case.

Check Zen Garden website to see how FIR is used.

FIR behaved indifferently when in quirksmode and rendered ineffective in screen readers which brought in questions about the usage of this technique.

sFIR technique supersedes FIR technique with its Flash replacement on text rendering styled texts.

CSS: Difference between Block, Inline elements

kurinchilamp — Thu, 16 Apr 2009 06:57:20 +0000

CSS “display” Element takes in the following styles

display: none
display: block
display: inline

Brief explanation:

* display: none
To make the tags not visibile you use this setting. Some elements like “meta”, “style” when present in the html content has this setting by default.

* display: block
When elements are set to display “block”, then they take up the entire width available having NEW line above and below them.

div, p, h1…h6, table, form, pre, blockquote, ul, li, ol, dl, dd, dt, dd, table have this setting by origin. (“…by origin” – when no explicit settings are applied to them)

* display: inline
Unlike “block” elements, “inline” elements just takes up the space that they need for display. They go inline with the context or the flow of the document.

span, a, img, strong, em, b, br, input have this setting by origin.