The button tag

Today only I knew that there is a button tag in html.
Syntax:

wrap text around image in css

A nice idea to wrap the paragraph around the image
http://www.dynamicdrive.com/style/csslibrary/item/floating-image-with-no-text-wrap/P10/

think nicely as zen garden does

Just now I got the idea about this template. I worried about this type of template before.. But Now found the solution. see the backgrounds in this page.. How they nicely done this. thanks zen garden.

http://www.csszengarden.com/?cssfile=/196/196.css&page=0

The background images are coming from both side to center. position to the main container is relative and background images are absolute to main container. Nice idea.

Using Background-Image to Replace Text css

Today i have read one artilce about using background image to replace text in css.. But they are using two elements for achieving this. You can find the article here
http://www.stopdesign.com/articles/replace_text/

However we have a better solution like this?

Suppose we have h1 element.

we will put the backgound image for h1 element in the style sheet
and text-indent -9999px in the style.

example:
#header h1 a {
background:transparent url(images/logo.gif) no-repeat scroll left center;
float:left;
height:85px;
text-indent:-9999px;
width:308px;
}

cant we do like this?

opacity problem in ie

Today we have faced such a situation like blured text in ie. We found that it is because of the opacity problem. We got a solution for this. This is very cool thing.

div style="width:100%;

filter:alpha(opacity=90);

font-weight:bold;

div

div style="width:100%;

filter:alpha(opacity=90);

font-weight:bold;

background-color:#fff"

div

The IE Doubled Float-Margin Bug

The Old IE “Doubletake”

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. Also, the doubled margin displays symmetry, working the same way to the right as it does to the left.

”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. The values of this property have the following meanings:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the ‘clear’ property). The ‘display’ is ignored, unless it has the value ‘none’.

right
Same as ‘left’, but content flows on the left side of the box, starting at the top.

none
The box is not floated. “
That means that {display: inline;} on a float should be ignored, and indeed all browsers show no changes in the float when this is done, including IE. But, this does somehow trigger IE to stop doubling the float’s margin. Thus, this fix can be applied straight, without any fussy hiding methods.

floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}

Thanks to http://www.positioniseverything.net/explorer/doubled-margin.html

breaking lengthy words

you can break a lengthy word by using tag. I tested and working fine