background-size not working in IE

In case there is a 'background-image', the 'background-size' can be used to stretch or shrink it.

If the property has only one value, it applies both horizontally and vertically. If there are two, the first one refers to the width, the second to the height of the background image.

Code Problem
p {
    background-image: url(backgroundSize.png);
    background-size: 100% 500px;
    background-origin: border;
}
"background-size: 100% 500px;" stretches the image horizontally 100% and vertically 500px, but this property is not supported by Internet Explorer < 9.0

Solution
This is a CSS3 property, which is not supported by < IE9.0 browsers. There is an IE filter, for IE 5.5+, which you can apply to make it work in IE's all versions:
p {
    background-image: url(backgroundSize.png);
    background-size: 100% 500px;
    background-origin: border;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='backgroundSize.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='backgroundSize.png', sizingMethod='scale')";
}

Other BackgroundProperties

Value	Description
background-color	This property sets the background color of an element.
background-image	SThis property sets the background image of an element. When setting a background image, authors should also specify a background color that will be used when the image is unavailable.
background-repeat	If a background image is specified, this property specifies whether the image is repeated (tiled), and how. All tiling covers the content, padding and border areas of a box. ie. repeat-x, repeat-y, no-repeat
background-attachment	If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the document ('scroll'). Value: scroll | fixed | inherit
background-position	If a background image has been specified, this property specifies its initial position.
background-clip	Determines whether the background extents into the border area or not. If the value is 'padding', the background is clipped to the padding edge and the background of the border is transparent.
background-size	In case there is a 'background-image', the background-size can be used to stretch or shrink it.
background-origin	Determines how the 'background-position' is calculated.
background-quantity	If a 'background-image' is specified, the value of 'background-quantity' determines how many times the image will repeat.
background- spacing	This property specifies the distance that separates the 'background-image' of the position given by the property "background-position", as well as the spacing among all of the repetitions of the background image. If a measure is specified, this gives the horizontal and vertical space relative to the coordinates specified by the "background-position" property.

more information - *w3schools

Modal box issue with IE6

This is most common and frustrating bug of IE6.
Code Problem
div#box {
   width: 100px;
   border: 2px solid black;
   padding: 10px;
}
IE 6 will calculate the width of the box to be 100px.
Modern browsers will calculate the width of the box to be 124px.

Solution
Remember not to set padding and border for the object which has defined width. Always set width for the parent element and border and padding in the child element:
div#parentBox{
width: 100px;
}
#parentBox #box { 
   border: 2px solid black;
   padding: 10px;
}

How to wrap text of html button with fixed width?

I just noticed that if you give a html button a fixed width, the text inside the button is never wrapped. I've tried it with word-wrap, but that cuts of the word even though there are spaces available to wrap.

How can you make the text of an html button with a fixed width wrap?

Code Problem
<input type="submit" name="wrapText" value="How to wrap text of html button with fixed width" id="wrapText" style="height:118px; width:200px; font-size:18px; color:#7F7F7F; width:200px;" />

Solution
I found that you can make use of the white-space css property:
white-space: normal;

<input type="submit" name="wrapText" value="How to wrap text of html button with fixed width" id="wrapText" style="height:118px; width:200px; font-size:18px; color:#7F7F7F; width:200px; white-space: normal;" />

white-space Property

Value	Description
normal	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
nowrap	Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br /> tag is encountered
pre	Whitespace is preserved by the browser. Text will only wrap on line breaks Acts like the <pre> tag in HTML
pre-line	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
pre-wrap	Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
inherit	Specifies that the value of the white-space property should be inherited from the parent element

*w3schools

Position one object next to first

Yesterday I was facing one unique problem. I was asked to set one image next to <h1> tag text. For first instance I used Float: Left but this could not resolve my problem. If the <h1> text is split into two lines the image was positioned absolute right of the full width of <h1>, but customer requirement was to set the image next to last character of the <h1>. After struggling for couple of hours I found the solution.

Solution:

<!-- Float must not be defined for h1-->

<h1 style="display: inline">Long heading text</h1>

<img src="icon.png" alt="Tooltip icon" />