CSS Hacking tips

0

Conditional comments

IE conditional comments ( Websemantics.co.uk – conditional comments )

The format is:
<!--[if "condition" IE "version number"]> Only IE displays this text if the condition is met <![endif]-->

There are 6 conditions that can be applied (there's a "logical not" case too):

  1. [if IE] - if above or equal to version 5
  2. [if IE 6] - if equal to version 6
  3. [if lt IE 6] - if less than version 6
  4. [if lte IE 6] - if less than or equal to version 6
  5. [if gt IE 6] - if greater than version 6
  6. [if gte IE 6] - if greater than or equal to version 6

Valid version numbers are 5, 5.5, 6 and 7. (There is support for specific version numbers such as 5.0453.)

For adding a style for IE v5 only:

<!--[if IE 5]> <style type="text/css">@import "IE5_only.css";</style> <![endif]-->

Validators do not check the code inside the comments so take care.

Internet Explorer 6 hacks

Min height fast hack ( Dustindiaz )

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

Box model hack with wrapper ( www.webreference.com )

The IE box model problem does not affect Internet Explorer 6, which uses the standard box model (provided there exists a doctype to switch the browser into standards mode)

Older versions of Internet Explorer incorrectly calculate the width and height of block level items by including padding values within the box’s dimensions, rather than adding it outside the box. If you have a div validly specified like this:

div {_ width: 100px;_ padding: 5px;_ border: 5px solid #fff;_ }

The div will be 120 pixels wide in most browsers, but only 100 pixels wide in IE.

The easiest solutions is the box-within-a-box method, which places one div inside another:

div {_ width: 100px;_ }
div .hack {_ padding: 5px;_ border: 5px solid #fff;_ }

This is applied in the following way:
<div>
<div class=”hack”>
Your content goes here
</div>
<div>

If you've got to set the width of a box, that also needs padding or borders, separate them into two divs, not one. The rule is: For the same block element you might set horizontal margins and width or horizontal margins, horizontal borders and horizontal padding. Avoid declaring width and padding or width and borders for the same block element. Use nesting to achieve the desired visual.

If you want to use bottom or right properties you have to set either the width or height for the parent and it will work in IE.

Opera conflicts more with the W3C's CSS specification, so you need to set the width for the child if you want to use the right property, if you want to use the bottom property you have to set the height for both parent and child.

Floats can cause clearance problems - especially with forms. Solutions: use a DIV around the enclosing DIV set to clear to avoid this in NS6 or set the form line height to less than the DIV's height and clear the DIV below.

Do not use fixed heights. Version 5/6 IE browsers do not support specification of fixed heights. Also min-height is not supported, in v5/6 browsers. IE 5.5 doesn't support min-width, max-width, min-height, max-height.

In forms, set margin:0 for Opera and Netscape. Especially for floats, to minimize margins like IE.

Autoheight and margin collapsing ( Researchkitchen.de )

The Opera styles declare:

body {
margin: 0;
padding: 8px;
}

On the other hand, Mozilla and Internet Explorer assign the following styles:

body {
margin: 8px;
padding: 0;
}
This is only a slight difference, but it has a lot of impact on our example design:

body {
font: 100%/1.5 Georgia, "Times New Roman", Times, serif;
margin: 0;
padding: 8px;
}

Since there is now a padding, the height of body will change. It will be now the distance from the outer top margin edge to the outer bottom margin edge of its normal-flow block-level child.

Expanding box bug ( Positioniseverything.net )

IE5/6/win will (incorrectly) expand the width or height of an div (where a fixed height or width have been specified) if the content extends beyond the specified area. (often due to font size changes) To avoid breaking the layout you can use overflow-x or overflow-y: hidden.

Add a comment

Leave a Comment

Your email address will not be published.