CSS HACK

Box model Bug

Suppose I want a box whose total width will be 300px (5 + 20 + 250 + 20 + 5 = 300). This is not a problem for all modern browsers except outdated versions IE6/5.5/5/Windows. Outdated browsers will subtract border and padding values from the content area’s 250px. In that case we will get a different box (250 – 5 – 20 – 20 – 5 = 200px.
So we need a false value 300px (the actual and desire size) to feed outdated browsers.Here is the technique:

[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″]
.testbox{
width:300px;
border:5px solid #aaa;
background:#F0F0F0;
padding:20px;
margin-bottom:20px; voice-family:"\"}\"";
voice-family:inherit; width:250px;
}
[/css]

For this we will use following two lines – voice-family:”\”}\””; and voice-family: inherit; when a outdated browsers get “\”}\””; ( parsing bug for IE6/5.5/5/Windows) its immediately stop parsing and jump to next property.
Now In case of IE6/5.5/5/Windows, will get width 300 – 5 – 20 – 20 – 5 = 250px. After that it will stop parsing. But all other modern browsers will continue parsing and overwrite the previous value with 250px(250 + 5 + 20 + 20 + 5 = 300px ).
Anything else? yeap we have to take care about opera 5 and its bellow versions. be kind of opera we have to write extra rule.
Someone may ask why we will do all this for outdated browsers. The answer is we should support all users. Someone still may use outdated browsers. We don’t want to lose any of our customers.

[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″]
html>body .testbox{
width:250px;
}
[/css]

Specific hack for specific browser

Most CSS hack done by the selector bug of IE7/6 and below. The following selectors are valid CSS.

[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″]
IE 6 and below
* html .testdiv {}
IE 7 and below
*+ .testdiv {}
* html .testdiv {}
IE 7 only
*+ html .testdiv
IE 7 and modern browsers only
html>body .testdiv {}
Modern browsers only (not IE 7)
html>/**/body .testdiv {}
Recent Opera versions 9 and below
html:first-child .testdiv {}
}
[/css]

  • Topics1
  • Topics2
  • Topics3

Note that the hack for IE 7 and below is actually two separate selectors: one for IE 7 and one for IE 6 and below. The rest of the desired selector must be added to both parts of the hack. The two parts cannot be combined with a comma, because IE 6 and below will fail to correctly parse the selector and won’t be targeted.
Some of these selectors require that the document has a doctype but no processing instructions (including XML declarations). This is the ideal setup to prevent IE 6 from going into quirks mode anyway.

Floating Bug

In the new method, no clearing element is used. This does not affect IE/Win which simply keeps enclosing the float as always (assuming the container has a stated dimension), but non-IE browsers will need a substitute for that element. Here’s how it’s done.

Using :after

This CSS 2 property allows extra content to be added at the end of an element via the CSS. That means no actual markup is needed in the HTML. The content is specified from within the CSS stylesheet, and appears in the page as would a real HTML element that had been inserted following all the normal content of the target element. Such :after generated content cannot receive some CSS properties, including ‘position’, ‘float’, list properties, and table properties. However, the ‘clear’ property is allowed. Do you see where we are going here?
Imagine that we use :after to insert a simple character like a ‘period’, and then give that generated element {clear: both;} . That’s all you really need to do the job, but no one wants a line space messing up the end of their clean container box, so we also use {height: 0;} and {visibility: hidden;} to keep our period from showing.

[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″]
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
[/css]

Notice that {display: block;} is also applied to the :after element, because if it isn’t then that element defaults to “inline”, and cannot receive the “clear” property. Also, Tony’s method originally used “overflow: hidden;” to hide the period, but sadly the latest FireFox versions will display the period if this is done.

What will do IE

Since IE/Win does not support the :after pseudoclass, we must rely on its “auto-clearing” effect, but that behavior only happens when the clearing element has a dimension applied to it. In many cases it’s undesirable to use either a height or a width, but happily the Holly hack comes to our rescue. This hack lets IE/Win and only IE/Win see a simple 1% height for the container. How does that help? Well, IE/Win happens to have another spec violation that causes all boxes to expand and enclose all content, regardless of any stated dimensions that may be smaller! So that 1% height will just be expanded to whatever value is needed to contain the float, and the mere fact of applying a dimension triggers the “auto-float-enclosing” behavior. Cool eh?

[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″]
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
}
[/css]

The first line is a CSS comment with an “escape” (colored red) just before the comment closing tag. Because of that escape, IE/mac ignores the closing tag and thinks the comment is still active. Thus it ignores everything until it sees a CSS comment closing tag. The last line is a normal comment, and its closing tag is what lets IE/mac begin parsing code again.
The second line has a “universal” selector followed by “html” (also red), followed by the targeted element. This selects .clearfix when it is nested within html (true), and also when ‘html’ is nested within any element. It so happens that IE browsers have an invisible and mysterious wrapper element around ‘html’, so this selector works in IE and nowhere else. IE/mac must be prevented from seeing this height because it does not enlarge the box like IE/win, and this would damage the layout.
As a side benefit, this stated dimension also prevents several other major IE/Win float bugs. However, should this container box be placed following a previous external float, the IE height fix will trigger Microsoft’s proprietary and illegal Float Model, so watch out for that, okay?

For the HTML, just add a class of .clearfix to any element containing a float needing to be cleared, plus any Guillotine-Bug-fixing block elements within the container. That’s it! It’s not perfect, but it’s a whole lot better than adding an entire extra ‘dummy’ element. Check out this live demo of the fix in action:

[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″]
.clearfix {display: inline-block;}
[/css]

Basically the fix is just a matter of applying a display: inline-block; to the .clearfix class, and hiding that property from all other browsers. That’s it! We can easily do this with our existing code, slightly modified.

The .clearfix {display: inline-block;} is seen by all browsers, and fixes IE/Mac. Then, inside the rule set that is hidden from IE/Mac, the display is reset to block. That’s all she wrote! Simply stick the above code into your CSS, and use .clearfix on any box that has to contain a sizable float.

Putting all toghter

[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″]
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
[/css]

inside the floating box

outside the floating box

Floats, Double Margins and IE

This bug only occurs when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any following floats with a similar margin won’t show the doubled margin. Only the first float in any given float row will suffer from the bug.

This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned.