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

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/

Fix Narrower Page Elements in Internet Explorer

The misinterpretation of the CSS box model that make page elements to be narrower in IE is probably the most usual IE and CSS issue. In short, every HTML element is a box, the width of which equals the total of its padding, border, margin and content area. Here is the sample of CSS rule:

div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 30em
}

It means that each div is 50em wide in total. You can make this amount just adding 30em wide content area to 4em padding, 1em border and 5em (invisible) margin on both the left and right sides.

In IE the padding and border are included in the width of the content. In other words, the width of the content is 20em only while the total width of the div is just 40em.

Such CSS box model problem will appear in IE5.x for sure and can occur in IE6, depending on the way you declare the ISO value in the HTML code. Here are the two variants possible:

• <?xml version=”1.0″ encoding=”iso-8859-1″?>
• <meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />

The first command should be placed on the very first line of the HTML document. The second can be placed anywhere within the <head>. You must use one of these commands and according to W3C the first command is the better choice.

On the other hand, using the first command, you will make IE6 render the CSS box model incorrectly as in version 5 browsers. CSS hack allows you to fix the box model problem. With its help you can send different width values to different browsers. The choice of CSS hack to use will depend on ISO value and versions of IE.

Here are the CSS commands to fix IE5.x only:

div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width/**/:/**/ 40em;
width: 30em
}

These CSS commands can be used to fix up all versions of IE:

div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 40em
}
html>body div {
width: 30em
}

Spilling Text Issue

Unlike other browsers, IE expands background colours and borders to avoid text spilling out of its containing element. You will view the text splitting out of the right-hand side of the box in all browsers except IE, in case you have a box assigned class=”box” with the following CSS commands,:

.box {
width: 40px;
border: 2px solid #781351;
padding: 3px;
background: #d7b9c9;
white-space: nowrap
}

The box doesn’t expand in all other browsers except IE, because they will adhere to the width: 40px CSS command. While IE interprets width as min-width (the same works for height and min-height).
To avoid spilling the text out of the box in all browsers you should use the first rule with the following CSS rule:

html>body .box
{
width: auto;
min-width: 40px
}

This command is for non-IE browsers only, because IE will ignore it because it has html>body at the front of it. Thus, the first CSS rule, width: auto, cancels out the original width rule while the second command, min-width: 40px then assigns a minimum width to the box that will always expand to fit the text.

Background Images Disappear

The other problem is background images that disappear every time you scroll up and down on a web page. As a rule, you need to refresh the page to make the background reappear. The first solution is to insert the CSS command position: relative into the CSS rule containing the background image:

.foo {
background: url(filename.jpg);
position: relative
}

However, sometimes it doesn’t change things for the better and you should assign a width or a height to the element with the background image. You can just assign a height of 1% for Internet Explorer. This CSS rule make no damage to appearance because IE interprets height as min-height:

.foo {
background: url(filename.jpg);
height: 1%
}
html>body .foo {
height: auto
}

The height: 1% CSS command is cancelled out by the height: auto CSS command. As soon as Internet Explorer doesn’t understand html>body, the second CSS rule will be ignored by IE.

Widths Working on IE Only

Every HTML element is a block or an inline element. For example, <div>, <p>, <h1>, <form> and <li> are block elements while <span>, <a>, <label>, <strong> and <em> are inline elements. All we know that the width of an inline element can’t be changed. In other words, the following CSS rule shouldn’t work:

span {
width: 100px
}

However, it works in IE. Thus, each span in IE will have a width of 100px while the width of the span in all other browsers will be the width of the number of characters contained in the element. The solution is to turn the span into a block level element just like this:

span {
width: 100px;
display: block
}

Making the span a block element will cause the width command working in every browser. On the other hand, it also makes the span being on a new line. To avoid this you can assign float: left to the span.

Unstyled Version of Web Page

In case an unstyled version of the page appears for a moment, when you load your website in IE, you can see such phenomenon as the Flash Of Unstyled Content (or FOUC).

In case you use the @import directive (e.g. <style type=”text/css”>@import “styles.css”;</style>) to call up your CSS file then it can happen on your website in IE. There is quite a simple solution to fix this problem. You just need to insert a link or a script element into the header. And it doesn’t really matter whether you insert one of them or both. It doesn’t matter which one you insert (or even if you insert both). Provide a print stylesheet, using the link element to reference it (as indicated in the example below), and forget about the FOUC phenomenon:

• <script type=”text/javascript” src=”scripts.js”></script>
• <link rel=”stylesheet” href=”styles.css” type=”text/css” media=”print” />

Fixed Width Web Page Is Not in Centre of Window

The centrally aligning content through CSS doesn’t work in IE:

#container {
width: 770px;
margin: 0 auto
}

Thus, you can’t get a fixed width website to centrally align in the window in Internet Explorer or on the contrary, it is perfect in IE but not in any other browser.

With the second command margin: 0 auto positioning the containing element in the centre of the browser window, we should use such command in IE:

body {
text-align: center
}
#container {
width: 770px;
margin: 0 auto;
text-align: left
}

You also should insert text-align: left into the container div to avoid the text aligning too.

According to Tantek Çelik, the CSS hacks guru, there are several rules that explain how CSS hacks should be designed for such a troublesome browser as Internet Explorer. First of all, they should be valid. The second rule is that CSS hacks should target only old/abandoned/frozen browsers/user-agents. And the last thing to know is that they should be ugly. Tantek also explains that using a feature of CSS is not a hack.

The star html bug and the underscore hack are the most often IE-specific hacks in the code. Let’s find out how they can be replaced with the same CSS feature-based solution. Here are some code samples of them both.

The Star HTML Bug

Targeting current as well as future UAs, this hack violates Tantek’s second rule. It can be found as a stand alone rule as well as an override to some other rule in a style sheet:

* html div#header {margin-top:-3px;}

.promo h3 {min-height:21px;}
* html .promo h3 {height:21px;}

The Underscore Hack

This hack violates Tantek’s first two rules: first of all, it is invalid according to the W3C CSS Validator. It also targets current UAs:

ol {padding:0; _padding-left:5px;}

Child Selectors to Fix the Problem

With the child selector we can replace both the underscore hack as well as the star html bug. The first step is to write the rules with selectors that can be applied to all browsers:

div#header {}

.promo h3 {}

ol {padding:0;}

Then, add the IE-specific declarations to these rules:

div#header {margin-top:-3px;}

.promo h3 {height:21px;}

ol {padding:0 0 0 5px;}

Add the second rule after each rule. The selector of the second rule must use a child selector. Now correct any IE-specific declarations in this new rule:

div#header {margin-top:-3px;}
body > div#header {margin-top:0;}

.promo h3 {height:21px;}
.promo > h3 {height:auto; min-height:21px;}

ol {padding:0 0 0 5px;}
html > body ol {padding:0;}

Thus, you have no more hacks. Operating in strict mode and trying to bar some complicated stuff in your code, your CSS will work perfectly across all browsers.

1. Conditional Comments

Conditional comments help to fix a lot of problems with IE and they are not supported by any other browser. That’s why they are safe to use. Here is the usual type:

<blockquote><!–[if IE]>
do something
<![endif]–></blockquote>

Working on a layout you can place all hacks for some selector just after default rule. Thus, you can change everything quickly without searching for the corresponding hack in other places.

After finishing layout you can go through all of the CSS files again, in order to optimize everything and remove all hacks into separate file. Thus, the main CSS is neat.

This separate file can be called in the header section of a file within conditional comments:

<blockquote><!–[if IE]>
do something
<![endif]–></blockquote>

The main CSS file has the hacked selectors starting with the * html. All browsers ignore this selector, because there are no elements above html in a document tree while IE allows us to use this flaw when applying IE specific hacks.

The following information should be taking into consideration as if we are dealing with separate file with IE hacks only.

2. IE 5.x broken box model

Broken layouts in IE5.x can appear because of a combination of width and padding on the same element. To fix this problem we should use backslash box model hack:

someselector {
padding: 10px;
width: 200px;
w\idth: 180px;
height: 200px;
heigh\t: 180px;
}

Thus, we have an element that is 200px wide, 200px high and with 10px paddings in both IE 5.x and IE 6.

3. Everything floated?

The other important rule to follow is to use extra rule display: inline; for everything floated and with a margin larger than zero.

4. Prevent overflow problems

The simple solution to prevent enlarging parent element horizontally that is caused by usage of italic font style in any IE version is the following:

someselector {
overflow-x: hidden;
}

5. Font size in tables

IE 5.x ignore font rules in tables in html or body element. Here is the simple solution of this problem:

body {
font-size: 62.5%;
}
table {
font-size: 1em;
}

You also are free to change rules according to a particular table’s needs.

CSS hacks are necessary evil that helps us to do our best with default CSS rules. The other thing is to make it easily accessible in our memory… or just invent them.

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.