CSS Transparency Settings for All Browsers

Transparency is one of those weird things that is treated completely differently in all browsers. To cover all your bases, you need four separate CSS statements. Fortunately they don’t interfere with each other really, so using them all every time you wish to add transparency is no big hassle and worry-free. Here they are, and are currently set to 50% transparency:

.transparent_class
{ 
       filter:alpha(opacity=50);
       -moz-opacity:0.5;
       -khtml-opacity: 0.5;
       opacity: 0.5;

}

Here is what each of those CSS properties is for:

• opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.
• filter:alpha(opacity=50); This one you need for IE.
• -moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.
• -khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit.

Source: CSS-Tricks

Importance of !important in CSS

CSS rules marked !important take precedence over later rules. Normally in CSS the rules work from top to bottom, so if you assigned a new style to an element further down the style sheet or in a secondary style sheet then the later rule would take precedence. !important ensures that this rule has precedence

Example #1: Normal behaviour

#example p {
color: blue;
}
...
#example p {
color: red;
}

The later rule overrides the earlier rule, and paragraphs within #example will be red.

Example #2: Using !important

#example p {

color: blue !important;
}
...
#example p {
color: red;
} 

The first rule now has precedence so the later rule is ignored and the paragraph will be blue.
Note:

Internet Explorer 6 will apply whatever the last style declared is, and takes no notice of !important declarations. So in Example #1 above, the other browsers would display the paragraph in blue but IE6 would display it in red.

Ref : www.electrictoolbox.com

Favicon

Browser ICO PNG GIF animated GIFs JPEG APNG SVG Google Chrome Yes 4.0 4.0 No 4.0 No No Internet Explorer 4 No No No No No No Mozilla Firefox Yes Yes Yes Yes Yes 3.0 No[5] Opera Yes Yes Yes Yes Yes Yes 9.6 Safari Yes 4.0 4.0 ? 4.0 No No A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or webpage.[1] A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab. Some programs allow the user to select an icon of his own from the hard drive and associate it with a website.

 

Browser support

Browser	ICO	PNG	GIF	animated GIFs	JPEG	APNG	SVG
Google Chrome	Yes	4.0	4.0	No	4.0	No	No
Internet Explorer	4	No	No	No	No	No	No
Mozilla Firefox	Yes	Yes	Yes	Yes	Yes	3.0	No
Opera	Yes	Yes	Yes	Yes	Yes	Yes	9.6
Safari	Yes	4.0	4.0	?	4.0	No	No

The following format is cross-browser compatible and is supported by Internet Explorer, Firefox, Chrome, and Opera.

• <link rel="SHORTCUT ICON" href="http://www.example.com/myicon.ico"/>

Additionally the following is also acceptable:

• <link rel="SHORTCUT ICON" href="/somepath/myicon.ico"/>

The following shows the supported format of link tags, using examples, for HTML and XHTML.

HTML:

• <link rel="icon" type="image/vnd.microsoft.icon" href="http://example.com/image.ico">
• <link rel="icon" type="image/png" href="http://example.com/image.png">
• <link rel="icon" type="image/gif" href="http://example.com/image.gif">

XHTML:

• <link rel="icon" type="image/vnd.microsoft.icon" href="/somepath/image.ico" />
• <link rel="icon" type="image/png" href="/somepath/image.png" />
• <link rel="icon" type="image/gif" href="/somepath/image.gif" />

 

Ref:Wikipedia

Cross-Browser Min Height

div { min-height: 500px; height:auto !important; height: 500px; }

This works because  IE treats “height” how “min-height” is supposed to be treated.

Alternate Using Expressions (IE Only)

div { height: expression( this.scrollHeight < 501 ? "500px" : "auto" ); }

Sets the minimum height in IE to be 500px. Make sure that this.scrollHeight < 501 is 1 px greater than the minimum height that you want or you will get some strange results.

Ref: CSSTricks

Internet Explorer 9 goes for HTML5, partially

Microsoft has announced that the new internet explorer will have many features supporting HTML5, which will make browsing internet a speedy experience. "HTML5 will enable a new class of applications," says Dean Hachamovitch, Microsoft's Internet Explorer General Manager, speaking to the press at the company's Mix10 conference in Las Vegas, according to The Register.

But there are many features that are not supported by IE9. Like the Canvas element. "All the graphics that run in IE9 are GPU-powered, they are hardware accelerated. We said there'll be updates to the preview and we'll see what else is coming in the next preview," says Hachamovitch.

Microsoft will also have to deal with the issue of video codecs, which has left the Video tag without any officially standardized codec. Replying to this Hachamovitch says, "For IE9, the demonstration that we gave involved the H.264 codec, which is a great industry standard for video, and we will support the H.264 codec. If I made a list of all the things for the HTML5 spec to do next, it's not clear that the HTML5 video codec would be near the top."

The IE9 preview does a better job with the Acid3 standards test than earlier versions, but at 55 per cent, it remains poor, considering that some other browsers pass completely. Hachamovitch is defensive about the test and says, "The Acid3 test is something that some folks use as a proxy for standards support. It's 100 tests. It exercises about a dozen different technologies, some of which are under construction, some of which are less under construction. The most important thing: as IE9 supports more of the markup that developers actually use, the score will continue to go up, as a side effect."

The new IE9 will not be supporting Windows XP. "Building a modern browser requires a modern operating system. There are facilities in Windows Vista and Windows 7 around security, for example the integrity-level work that gave us protected mode. There are performance improvements, there is graphics infrastructure to take advantage of the GPU, that doesn't exist in previous operating systems," says Hachamovitch.

Microsoft will be using Silverlight more extensively in IE9. This might work well for Microsoft but also might slow up the speed of the browser.

Ref:

 

Drop Shadow With CSS For All Web Browsers

.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}

What About Internet Explorer?

.shadow {
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow
(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow
(Strength=4, Direction=135, Color='#000000');
}

Web Browser Support

• Firefox 3.5+
• Safari 3+
• Google Chrome
• Opera 10.50
• Internet Explorer 5.5

Browser Specific Hacks

/* IE 6 */

* html .yourclass { }

/* IE 7 */

*+html .yourclass{ }

/* IE 7 and modern browsers */

html>body .yourclass { }

/* Modern browsers (not IE 7) */

html>/**/body .yourclass { }

/* Opera 9.27 and below */

html:first-child .yourclass { }

/* Safari */

html[xmlns*=""] body:last-child .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */

body:nth-of-type(1) .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */

body:first-of-type .yourclass { }

/* Safari 3+, Chrome 1+ */

@media screen and (-webkit-min-device-pixel-ratio:0) { .yourclass { } }

Centering a Website

HTML Syntax

<body>

<div id="page-wrap">

<!-- all websites HTML here –>

</div>

</body>

CSS Syntax

#page-wrap

{

width: 800px; margin: 0 auto;

}

Cascading Style Sheets

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

Ref : Wikipedia