Nothing is perfect in this world and CSS3 with its background color gradient proves this rule one more time. It is not for shortening CSS code, but only for making it more variable. For example, lately you can adjust a background color gradient using a background image only. In other words, you have to recut the image again and again in case the gradient needed tweaking. We all suppose that with CSS the necessary colours can be simply defined while the browsers do all the drawing. Sounds great, but don’t work in practice… at least as you expected.

To use CSS3 trying to solve the issues concerning the gradient property is quite time consuming because it doesn’t work across a range of browsers. Here is a sample of code to look through for the following explanation:

/* how it used to be */
background:url(“…”) left top repeat-y;
/* using automated gradients */
background:#FEF3D1;
background:-moz-linear-gradient(top, #FFF1CC, #FDF5D5);
background:-webkit-gradient(linear,0 0,100% 0,from(#FFF1CC),to(#FDF5D5));
-ms-filter: “progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFF1CC, endColorstr=#FDF5D5)”;
filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFF1CC, endColorstr=#FDF5D5);

This makes the fade available in FF 3.6+, Safari/Chrome and IE5.5+. Opera users and IE users without filter support can see the fall-back color. In contrast, using an image makes it available in every single browser version out there without any issues.

As you can see CSS3 syntax is a bit longer and it looks like a block of CSS which could style half a site. And that only for one fade.

Quality vs Availability

Image is just an image. It should attract attention and display colors you want. If not consider some details, it displays the way it was made across all browsers. However, it doesn’t work with CSS3 effects. At least not always. For example, Firefox gradients are of lower quality if compare with other browsers. We all know that light fades over large areas creating unnecessary stripes. All this is just gaps in quality you don’t want to accept working with images.

Animation is the other thing to consider starting to work with CSS3. It is neat, but doesn’t run smoothly. Acceptable, but not perfect. To replace Flash animation with other open standards is allowed in case the same level of quality is provided.

Most things that are cool in theory appear to be disappointing in practice. CSS3 is not an exception to this rule. Hope that all the problems will be fixed soon to let us admire all the best provided.

Reference: www.onderhond.com/blog/work/why-css3-is-worse-than-ie6-debugging

First of all, it should be noted that block level link works perfectly in simple cases, but can spoil things dealing with complex issues.

Vomit Bug for Your Design

The definition of vomit bug is quite simple:

When the browser’s parser rearranges the DOM completely differently to the markup, resulting in content being placed outside its original container.

The problem can occur when you are nesting links inside other links. Because of vomit bug, DOM can be scattered in different directions, except the one you laid out initially.

Here is the sample of html code that was used to generate dom structures:

<div>
<a href=”#block”>
<div>
<div>2010</div>
<div>5.0*/5.0*</div>
<div><a href=”#test”>test</a></div>
</div>
</a>
</div>

It is quite simple setup providing a block level link with several other block element and one nested link. In case you remove nested link there will be no problem. In case you leave it, you will get the following samples of doms taken from Opera 10.5 (1), IE8 (2), Safari 4 (3) and Firefox 3.6 (4):

Only Opera 10.5 shows dom correctly. However, in case you give a background color to the block level link, Opera stop working. The best browser rendering the block level link quite perfectly is IE6. But still the click area is not corresponding. In other words, block level links with other links nested inside don’t work. At least now.

As usual HTML and CSS techniques are great… but are not working perfectly. Just remember that in case you nest another link inside links block, it will break down completely. Till all these things are fixed you should use the links on the title and “read more” text. You also can remove all links inside a block level link to make things better.

Reference: www.onderhond.com/blog/work/nesting-links-how-to-make-your-browser-v

Of course, Firefox slowly gaining in this competition, but still IE still dominates if we are talking about global usage. For many people internet still associates with the little blue e and maybe such tendency remains to be true for next generations.

The other war is all about the future of the browsers and this time the main heroes are developers and communities. With the help of web development community Firefox has such market share today. So, let’s be aware of the responsibility we have in this fight.

IE – the Story of Success?

Old times were simple. We have IE6 that ruined all our masterpieces in web development. So, any alternative to this appreciated greatly. With our sites look amazing in all other browsers except this, IE Microsoft got a bad reputation in the web development world.

Of course, Microsoft had interest in our problems but perhaps, its reaction was too slow. Thus, instead of good browser we had great ideas. Anyway we were able to fix the crap in IE6 with a separate CSS file. With conditional CSS files you can provide less than perfect software.

Some time passed and we got IE7. It was the time when IE6 lost its war and gained awful reputation. However, to be honest, a decent CSS professional could work around most bugs rather quickly. But that time we had IE7 that was a great improvement to IE6. Of course, it can’t be called perfect, but still some bugs disappear.

Today to make site for IE7 is as simple as for other browsers. Still we have a separate file with conditional comments, but Firefox, Safari and Opera also have their own drawbacks.

Not so long ago, IE8 was announced. It passed the acid2 test and positioned itself next to Opera leaving Safari and Firefox behind. We really can influence improvement in the browser situation – as it happened due to our criticism on IE6. However, there should be too many complaints to ditch Microsoft. But still they provided us with a browser that can really compete with its rivals.

Reference: www.onderhond.com/blog/work/the-browser-wars

As usual, none of the IE browsers accept this property. So, you should include filter:alpha(opacity=80); in your css declaration. This time the opacity value lies between 0 and 100 (0 – the elements will be transparent, 100 – no transparency at all). Using these two properties we can get cross-browser transparency.

<–[if gte IE5.5]> .opaque {filter:alpha(opacity=80);}
<![endif]–> .opaque {opacity:0.8; filter:alpha(opacity=80);}

Transparency is Not Seen

As a rule, there is lack of separation between foreground and background transparency. Note that when you give an opacity to an element, the whole element will be transparent (not background only but also the text). Of course, it influences the readability of the text. If even with the opacity of 0.5 the contrast between background and foreground can seem to be optimal, but it is not so pleasant to read the text. Thus, opacity values of 0.8 are recommended in this case.

Internet Explorer Issue

In case Active X scripting (or scripting in general) is disabled the transparency won’t work. Thus, you should always consider that if transparency is used, your site remains to be functional without the opacity applied. In other words, avoid putting content on top of each other. Thus, if the content can be accessed through a transparent element, even the modern browsers can’t guarantee the transparency.

Capricious Firefox

In case you use CSS properties such as line-height and text-decoration, Firefox can make text starts jumping around or shift background images and surrounding borders. Long before opacity, Mozilla used its own property called -moz-opacity. By abusing this, we can simply set the opacity for Safari and Opera and disable it again for Firefox.

<–[if gt IE5]> .opaque {filter:alpha(opacity=80);}
<![endif]–> .opaque {opacity:0.8; -moz-opacity:1;}

Note that such transparency can be applied in Firefox in case you have controlled environment. However, it is better to avoid transparency in Firefox because it can be really irritating and unpredictable.

Reference: www.onderhond.com/blog/work/css-transparency

Xyle Scope

Xyle Scope can be called a web browser that provides you with the opportunity to select elements right on the page. The sidebar of this CSS editor can display the HTML and CSS of whatever element you have selected. You can change something and see the effects immediately. This tool can be called the best solution for troubleshooting borked layouts.

However, it has some disadvantages as well. There is no usual “code view” and you can’t save CSS that you edited on a non-local site. The other thing to pay attention to is that it is basically Safari. In other words, troubleshooting is limited to this browser. In case you make changes and Preview them in different browsers they won’t hold.

CSS Edit

Price: $29.95.

The best thing about CSS Edit is that it has a lot of necessary features to make the editing process easier. A single editor window contains a left sidebar with all selectors, a right sidebar of user-friendly style editor and a middle pane of the “code” view.

CSS Edit also offers you to take advantage of such features as “grouping” of selectors, search, built-in code validation, milestones management and easy commenting. Override and Extract are the other cool features to try.

Thus, Override feature enables you to go to any webpage and edit CSS with previewing effects at the same time. You can use it for your own site to make it look better as well as for other people sites to learn their ways and make adjustments. This feature provides you with the opportunity to change CSS that affects dynamic content.

Extract feature allows you to get the CSS from any page on the Web then save it and do whatever you want. Thus, you can understand other people techniques as well as apply them to your site.

Perhaps, the strength of CSS Edit can be also called its disadvantage because so many features make it rather heavy application. However, you always can do your best with its interesting and useful tools.

Firebug

Price: Available for free.

Firebug is a Firefox extension. As you install it, a little icon in the bottom bar of your browser window appears and indicates the state of the site you are viewing. Thus, in case you see green it means that page you are viewing is in good shape while red X will be displayed if there are some problems with the site. You can open editor area just clicking this icon.

Firebug offers you to edit the CSS or the HTML easily and watch the effect immediately. This CSS editor also allows you to view the CSS in “layout” mode. In other words, you can see the margin, border, padding, offset and size of any element you choose. This is quite powerful and convenient to use tool.

Being an extension of Firefox, this CSS editor is limited in its preview capacity and you are not able to save out your modifications. In other words, this is rather troubleshooting tool than an editor. Thus, with such features as javascript errors, DOM analysis and validation, Firebug can be the best choice for troubleshooting.

Coda

Price: $79.

Coda is quite similar to CSS Edit if talk about selector area. There is split-view that allows you to look at the code at the same time, so you don’t need to change between CSS view and Edit view while working.

Coda allows you to preview the results of your changes immediately. The other great thing about Coda is that it provides you with nice FTP client that allows you to save your sites in quite appealing way. You also can take advantage of split-view FTP/Edit Window that has a terminal program for shell access to your servers. This CSS editor also provides you with manuals for JavaScript, HTML, CSS and PHP that is also a plus.

Reference: css-tricks.com/reviews-of-mac-css-editors

Reasons to Use a CSS-editor

We all need to have more time for life and CSS editor can present you some hours a day making your workflow more effective. The other thing is to choose the right CSS-editor that not only combines the editing features of CSS-stylesheets, the site layout and HTML-source code within a user-friendly interface, but also provides you with more useful features to try.

Good CSS-editor offers you various assisting tools for testing and debugging. You also can take advantage of such features as advanced code browsing, live-editing, code formatter, preview in different browsers, validation, built-in CSS-reference, beautifier and compressor as well as project management tools. This is not the full list of the features offered by various CSS-editors, but you should decide whether you really need them all.

For example, to simplify maintenance and make the source code easier to scan, some CSS-editors allow you to organize parts of the code into folders and filter the stylesheet without much effort. Instant style sheet preview with Internet Explorer or FireFox is another feature provided by advanced CSS-editors. You also can analyze code problems easily with such useful tool as a code inspector or use “X-Ray” function to decompose a stylesheet.

In other words, you get various tools and features for CSS-design integrated in one CSS editor. In case you are interested in quick and effective coding workflow, let’s find out what CSS-editors you can choose.

Xyle (Mac)

With the embedded stylesheet Xyle allows you edit web sites easily. You can preview changes in the browser window as soon as you modify CSS code. You also can try such useful features presented as syntax highlighting, selectors tree view and advanced file management.

Browser Mode allows you to browse the Web using Safari’s rendering engine. In Selection Mode you can click any part of web page and find out the exact portion of the HTML and CSS sources responsible for the formatting and contents of that part.

Choosing Cascade Mode you can display the style rules that apply to the currently selected element as well as the rules that apply to ancestors of this selected element. Selecting the necessary element in Cascade Mode while debugging, you can see the rules applied as well as the rules overridden including the rules applied to the ancestors of this element.

Integration with external text editors such as BBEdit is also available with Xylescope.

Price: $19.95. A trial version is available. A good choice in case you don’t need various advanced features including compressor, beautiful or validation.

Key Features

• Automatic formatting
• built-in DTD viewer
• filter large CSS files using smart groups
• Selector matching

Stylizer (Windows)

Grid interface instead of a text editor as well as Firefox and IE embedded can be called the exclusive features offered by Stylizer. Thus, with grid system to make any CSS errors seem to impossible, while Firefox and IE included allows to check changes right in the browser. Such feature as a Firebug-like element inspector allows you to find and edit in the same place.

To adjust dimensions in Stylizer is quite easy. All you need to change a margin, a height or a background position is to click on the value, drag the mouse and watch this element changed in real time. The same can be done with colours. Just click on them, drag the mouse and appreciate the colour of background or text in the browser, in real-time.

Price: Stylizer Basic is free. $69.95 for Premium version with all the above mentioned features included.

Key Features

• Real-time Preview
• Two-click Coloring
• Edit with point-and-click efficiency
• Remote Control

Rapid CSS Editor (Win)

With such features as a code inspector, autocompleter and syntax highlighting, Rapid CSS Editor allows you to know whether produced code is correct. In order to check quickly the syntax and attributes of a given selector or tag, you can use built-in CSS- and HTML-references.

A file manager provides you with the opportunity to upload CSS-files via FTP. With an advanced clipboard you can have multiple code fragments ready within one click. Using colour tool available you can pick the necessary colour without switching to colour application and check the result in the Style Sheet Preview with Firefox and IE.

Price: $29.85. A trial-version is available.

Key Features

• Syntax Highlighting for CSS and HTML documents
• CSS Checker and Validator
• Instant Style Sheet Preview with Internet Explorer or FireFox
• CSS Code Explorer
• Code Inspector
• Code Auto Complete for CSS and HTML
• Built-in File Explorer
• Compliance with CSS standards and various browsers
• Integration with W3C CSS and HTML validators
• Multi Item Clipboard
• Built-in CSS Reference
• CSS Code Formatter and Beautifier
• CSS Code Compressor
• Search and Replace in files
• Save and open files directly from FTP
• Project and site management and FTP publishing
• Fully customizable interface
• X-Ray for HTML preview
• Search and Replace with Regular Expression support
• Code collapse

TopStyle (Win)

TopStyle offers you quite a wide range of features that are not available in other editors. Such feature as HTML-tidy provides you with the opportunity to convert deprecated HTML-tags in valid XHTML easily.

For example, you can use integrated Style update that allows you to replace deprecated tags such as the <font>-tag with respective valid CSS-rules. With this editor you can display site in Mozilla and IE to compare. You can change the Doctype-definition to get to know how various DTDs influence the layout in different browsers as well.

But maybe the best tool provided by TopStyle is Style checker. It can validate style sheets ensuring the correct layout presentation in different browsers as well as predict bugs in the most popular browsers that may occur even with valid CSS-code.

Price: $79.95. Windows only.

Key Features

• HTML, xHTML and CSS Editing in a Single Program: HTML attributes are categorized displaying which are required
• Easy Navigation between Documents
• Element and Attribute Validation as You Type
• Style Checker: Validate your style sheets against multiple browsers, showing any invalid properties or values
• Style Upgrade: A quick, reliable way to replace deprecated HTML markup
• HTML Tidy Integration: converts HTML to XHTML with a single click!
• Site Reports: shows where styles are used in your site
• Full Screen Preview: Split the preview between Internet Explorer and Mozilla to find differences
• Integration with W3C HTML Validation: Results of the validation are displayed within TopStyle, with hyperlinked line numbers that synchronize with TopStyle’s editor

CSSEdit (Mac)

MacRabbit CSSEdit offers you real-time styling of stylesheets as XyleScope. You can style and analyze without uploading or refreshing even if a dynamic web-application uses AJAX or powered by some complex database. Such feature as Intelligent CodeSense provides you with context-sensitive suggestions after analyzing CSS and its behaviour.

The other thing to pay attention to is X-ray Inspector that shows what styles apply to a HTML document. The other things offered by CSSEdit is validation against W3C standards, automatically adding brackets or (semi-)colons as well as creating appropriate spacing and providing various project management tools. Live-preview feature and clipboard library are also quite useful features provided.

Price: 29.95 Euro ($47). A trial-version available

Key Features

• Validation tool
• Organize in folders and filter easily
• Project management
• Modify source code with intelligent CodeSense
• X-ray pages
• Intelligent CodeSense support
• Selector Builder takes the Yuck out of selectors
• Live-preview
• Integration in web-browsers

Style Master (Win / Mac)

Style Master can be used easily by professionals as well as newbies. With integrated color picker, various wizards, templates and validation tools you can work effectively and create CSS-based websites easily without trying to solve CSS tricks.

Some interesting feature offered is integrated templates that are quite useful and make this CSS-editor rather unique. You also can use a use a W3C-example-stylesheet which defines the style of almost every possible HTML-tag.

The Design Pane offers you numerous features such as X-Ray to design your style sheets. On the whole, this editor is simple and easy to deal with.

Price: $59.99. Style Master is available for both Windows and Mac. A trial-version is available.

Key Features

• Browser support help
• Code optimization
• Wizards
• Intelligent code completion
• Over 40 Templates
• Use X-Ray to instantly see the structure of your layouts
• Whitespace formatting tools

Style Studio (Win)

CSS-Checker provided by Style Studio allows skillful developers as well beginners to create standard-conform CSS-based layouts. You can try various powerful tools such as Smart linker that links multiple CSS documents to various HTML documents at once as well as to take advantage of CSS Manager that manages and upgrades to standard compliant code detecting various problems occurred.

The other interesting feature to try is the IntelliSense-line technology available for HTML and style sheets with lookup-reference for CSS. You also can automatically detect CSS property with Property Watch tool.

Price: $49.95. Windows only.

Key Features

• Powerful customizable Syntax-Colored Editor
• CSS Validator
• CSS Manager to manage, upgrade to standard compliant code
• Integration with over 35 HTML editors
• CSS Property Watch and Instant help on css keywords under caret
• Multi files Import from HTML/Export in HTML capability
• IntelliSense for style sheets and HTML
• Customizable CSS Code Indent
• Formatting ToolBars which simplify the use common properties
• CSS wizards
• Intelligent parser which detect invalid properties as you type
• Unlimited number of code snippets with custom hotkeys
• Migration Wizard
• Easily change CSS values using Ctrl+Up/Down hotkeys
• True multiple CSS charts support (i.e. target IE 4+ AND Netscape 4+)
• Automatically detect installed browsers/web-authoring tools
• Built-in system-wide search and replace

CoffeeCup (Win)

CoffeeCup StyleSheet Maker offers CSS-editing options that include some sophisticated features as well as basic editing tools. It can be compared with TopStyle but with less flexibility.

Using this CSS-editor you can overlap text, palce image backgrounds in tables, create links that aren’t underlined as well as create your own tags to assign the functions you need.

Price: $34.00. A trial-version is available.

Key Features

• Includes Color Schemer
• Step by Step Help
• Multiple Browser Testing
• Edit, Save, and Open .css, .html or .txt documents
• Cascading Style Sheet Creation for Netscape and Internet Explorer 3.0+
• 50 Style Sheet Drop Down Tags
• Easy CSS Font Designer
• Class & ID Wizard for Creating your own HTML Tags
• Dynamic HTML Snippets

EngInSite CSS Editor (Win)

EngInSite CSS Editor has all the necessary tools to create web-sites that pass the W3C validation test. They include integrated instant style sheet previewer, syntax highlighting, automated code completion, integration with W3C HTML Validator, built-in CSS Reference, live editing feature as well as customizable and expandable code library.

The other thing to try is a CSS Property Editor with dynamic shorthand properties support and Selector Constructor that helps you with various code tools and complicated selectors such as Convert Colors or Expanding/Extract URLS.

Price: $39.95. A trial-version is available.

Key Features

• Advanced text editor
• Integration with W3C HTML Validator
• Integrated Instant Style Sheet Preview against HTML file of your choice
• Check your CSS syntax against multiple browsers
• Visual editors for different data types
• Compliance with CSS standards and various browsers
• Compatibility Check and Syntax check
• Search and Replace with Regular Expression support
• Wizards for body, IE Scrollbars, lists and backgrounds

Jellyfish CSS (Mac)

The features to pay attention to offered by Jellyfish CSS are Code-Sense support, code library, browser support reference as well as wizards that help you to avoid mistakes. Such tool as an integrated Colorblender allows you to create matching colour palettes.

Price: $47. A trial-version is available.

Key Features

• Code-Sense helps you avoiding mistakes
• Supports Mobile Profile 1.0
• Syntax-highlighting
• Codechecking while typing
• 3 different preview-types
• Style-Check with the W3C Validator and CSS-Tidy
• Wizards support you while creating Stylesheets
• Colourblender

Astyle (Win)

Astyle is a basic CSS-editor with basic feature provided. In other words, there are no advanced features, only the most necessary tools.

Price: $20.

Key Features

• Graphic tree-type view of attachment files and the CSS structure
• Grouped view of properties and selectors
• Automatic selection and grouping of CSS selectors from a markup language document
• Source CSS, HTML, XML highlight code editor
• Clean up HTML document via CSS
• Icon associate dictionary

Other CSS-Editors to Check

JustStyle CSS Editor (Cross-platform)

JustStyle CSS Editor is written in Java and can work on various platforms including Microsoft Windows, Linux, Mac OS X, IBM OS/2, Apple Mac OS and others. With its help you can edit the whole CSS-file as well as just some fragments selected. This tool provides you with minimal number of features, but still it can be used to update CSS-file quickly outside your personal development environment. Anyway, JustStyle can’t be used for lager projects.

Simple CSS (Win)

Simple CSS is also appropriate for Windows, Linux and Mac. You can preview and check quickly the produced source code. It is rather simple and easy to use tool that allows you to group single elements styled via CSS.

CSSED (Linux / Win / Mac)

CSSED is the best solution for Linux. It provides you with the most essential features such as syntax validation, highlighting and autocompletion-tool and can be upgraded with plugins. Open Source.

Eric Meyer’s CSS Sculptor (Win)

Eric Meyer’s CSS Sculptor template-based add-on for Dreamweaver and Microsoft Expression Web. 30 layouts can be used to modify the design as you wish. Thus, you can change the page width or number of columns. You also are able to specify padding and margins for any page element as well as the type properties for headings and paragraphs. These modified layouts can be saved to recreate or modify later.

Alternative Tools to Try

Firebug
Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and you can make changes as well as preview them.

XMLSpy
This editor includes a full-featured CSS editor to assist developers creating XML-based Web sites in XMLSpy.

Oxygen
An XML-Editor with CSS-functionality

CSS Layout Magic (Win / Mac)
This Dreamweaver-plugin offers you a number of simple or advanced CSS-layouts. Works on Windows and Mac OS X systems running Dreamweaver MX. Price: $60.

Eledicss
A CSS2 editor implemented as a server-side PHP script. It allows editing CSS files using a web browser.

Web Developer’s Toolbar (Firefox Extension)
The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock and Seamonkey, and will run on any platform that these browsers support including Mac OS X, Windows, and Linux.

Reference: www.smashingmagazine.com/2008/06/19/css-editors-reviewed/

Mad with CSS?

Today there are no problems concerning a lack of browser support for CSS because ‘version 5′ browsers began to offer a full implementation of CSS. The problem is in interpreting CSS commands in different ways that is a usual thing for browsers. With such tricks appeared, many web developers prefer to switch back to pixel-perfect table layouts. But wait! Just learn more about CSS and different browser interpretations stop to be a mystery for you. What is more, there are not so many of them and using various hacks makes you life easier.

How CSS Hacks Turn ‘Mad With’ Into ‘Mad About’

CSS hacks work by sending one CSS rule to the browser or several browsers for your choice and the second CSS rule that overrides the first command to the other browsers. In case you have two CSS rules within the same selectors, the second CSS rule will almost always take priority.

For example, you need the space between a page’s header area and content to 25px in Internet Explorer. It may be great for Internet Explorer, but for Opera, Safari and Firefox this gap is not appropriate and you want to make a 10px gap instead. Here are two CSS rules that help you to perform the best in all browsers:

#header {margin-bottom:25px}
#header {margin-bottom:10px}

In this case the first command is for IE while the second is for all other browsers. However, there is no good news by now, because all browsers can understand both CSS rules. In other words, they all use the second rule, because it comes after the first.

And now a CSS hack should be inserted to hide the second CSS rule from IE. In such a way, IE won’t know that the rule exists and just will use the first CSS rule. Seems to be quite simple? Let’s find out the details.

Browser Detection for Internet Explorer

If you need to send different CSS rules to IE, you can use the child selector command that IE can’t understand. This command consists of two elements one of which is the child of another. Thus, html>body refers to the child body with parent html.

Here is the example of the header margin that illustrates our CSS command:

#header {margin-bottom:3em}
html>body #header {margin-bottom:1em}

Because of the html>body CSS command, IE can’t understand the second CSS rule and ignore it using the first rule. All other browsers will use the second rule.

Browser Detection for Internet Explorer 5

IE5 requires different CSS rules because of its misinterpretation of the box model. For example, padding and borders are not included when we specify the width of some element in CSS. IE5 incorporates them both into the width value and, as a result, elements widths are smaller in this browser.

Here is the CSS rule that results in a width of 10em for all browsers except IE5 where the width will be 5em. IE5 just incorporate two sets of padding and border, on both the left and right, when calculating the width with the following rule:

#header {padding: 2em; border: 0.5em; width: 10em}

You can solve this problem using box model hack invented by famous Tantek Çelik. For browser detection and sending different CSS rule to IE5 you should use the following:

#header {padding: 2em; border: 0.5em; width: 15em;
voice-family: “\”}\”"; voice-family:inherit; width: 10em}

Don’t ask how it works. Just use it. Need details? IE5 will use the first width value of 15em. As we have mentioned above, 5em of it will be taken up by two sets of padding and border (for the left and for the right). That will cause the width of 10em in IE5.

The 15em value will be overridden by the second value of 10em by all other browsers except IE5, because it can’t understand the CSS command that comes immediately after all those squiggles.

However, nothing is perfect and the box model hack is not an exception to this rule. For example, it can ‘kill’ the next CSS rule in IE5. But there are a lot of other box model hacks that can help you.

Browser Detection for Internet Explorer on the Mac

IE on the Mac is also quite capricious with CSS. Thus, many developers code sites in such a way that they work in IE/Mac. Of course, it may not offer the same level of design or functionality that is offered with other platform or browser, but still it is a good solution.

To hide a command with IE/Mac hack is quite simple. Just wrap a set of stars and dashes around CSS rules:

/* Hide from IE-Mac \*/
#header {margin-bottom:3em}
#footer {margin-top:1.5em}
/* End hide */

These commands will be ignored by IE/Mac. Such CSS hack is rather useful if some area of the site doesn’t work properly in IE/Mac. If it is something unimportant you can hide it from IE/Mac just like this:

#noiemac {display: none}

/* Hide from IE-Mac \*/
#noiemac {display: block}
/* End hide */

The first CSS rule hides the entire section assigned the noiemac id. The second CSS rule displays this section (can’t b seen by IE/Mac)

Browser Detection for Netscape 4

Netscape 4 has limited support for CSS. Thus, making a CSS layout for this browser can be quite a difficult task. Today most web developers prefer to hide the CSS file from this browser. You can do this with the @import directive to call up the CSS document:

@import url(cssfile.css);

Thus, Netscape 4 can’t understand this @import directive and will display a non-styled version of the site.

Make Sure to Check Your Site in the Different Browsers

This is a must. Just download the major browsers such as Firefox, IE5, IE6, Opera and Safari and check your site on PC and Mac. There are quite a lot of sites offering you their services in case you don’t have access to a Mac, so search for them.

The other main rule in case certain page elements appear differently in different browsers is stop worrying… and start making some trial-and-error changes playing with CSS rules. Anyway, you can fix it up with CSS hacks that always ready to help you make your site look great.

To remember all the CSS hacks seem to be impossible so I decide to create such a list that can be of use for you too.

So, let’s start.

CSS for Internet Explorer:

/* for all versions */
.class { *color: #8abdce; }

/* for Internet Explorer 6 */
.class { _color: #8abdce; }
or
.class { -color: #8abdce; }

/* /* for Internet Explorer 7 */
*+html .class { color: #8abdce; }

/* for Internet Explorer 7 */
*:first-child+html .class { color: #8abdce; }

/* for Internet Explorer 7 */
html>body .class {
*background: #F00;
}

/* for Internet Explorer 8 */
.ie8only { color /*\**/: #fff\9 }

CSS Hacks for Opera:

@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
.style {background: #F00;}
}

html:first-child .class { color: #8abdce; }

*|html[xmlns*=""] .style {
background: #F00;
}

CSS Hacks for Firefox:

html:root .class { color: #8abdce; } /* this also works for Safari */

.class, x:-moz-any-link { color: #368EF1; }

@-moz-document url-prefix() {
.style {color: #F00;}
}

/* for FireFox 1-2 */
@-moz-document url-prefix() {
color: #F00;
}

CSS Hacks for Safari:

html[xmlns*=""] body:last-child .class { color: #368EF1; }

CSS Hacks for Safari and Google Chrome:

body:last-child:not(:root:root) .style {
color: #F00;
}

body:nth-of-type(1) p {
color: #333333;
}

Of course, hacks are evil, but sometimes they help to solve the problems.