Using word wrap for text using css for words with out spaces

Many web pages contains some information which needs to be displayed using word wrap. consider a small example as below:-

Here is some content for the div element

CSS used in the above example will process the text with word wrap but only if it can find a space. If you would like to have a word warp for long words that does not have space then the CSS would be

Here is some content for the div element veryveryveryverylargewordwithoutspace

Three things are certain:
Death, taxes, and lost data.
Guess which has occurred.
~David Dixon, 1998, winning entry of the Haiku Error Messages 21st Challenge by Charlie Varon and Jim Rosenau, sponsored by Salon.com

Continue Reading

Width 100% not working in IE compatibility mode

At time its so frustrating to get css styles work correctly in various circumstances such as cross-browser , IE compatibility mode etc.

Recently notice an issue which is setting width 100% does not work in IE compatibility mode. The page display a input:select and input:textbox. It works fine in various places but was having issue at one particular table.

After trying out various options and finally the option that worked is

 td style="width:100%;"

So be very careful with this sort of issues, as these are very minor but becomes so frustrating at times.


Hardware: the parts of a computer that can be kicked. ~Jeff Pesis

Continue Reading

CSS Cursor as pointer not working

Working on website development for quite a bit now. Just had come across a style sheet issue in a web page. With the following style sheet:-

.linkbtn
{
    cursor:pointer;
    text-decoration: underline;
}

What would anyone expect for this simple html as :

Find

Certainly to show a different cursor when user hovers on the text. Yes it works on IE !! but not on firefox & chrome.

Ok lets debug and see what's happening, the css does show only

.linkbtn
{
    text-decoration: underline;
}

Does'nt make sense at all. does it ? Ok Now I have modifed the html to :

Find

Hurray ! it worked by just re-arranging the class & id attribute.

Three things are certain:
Death, taxes, and lost data.
Guess which has occurred.
~David Dixon, 1998, winning entry of the Haiku Error Messages 21st Challenge by Charlie Varon and Jim Rosenau, sponsored by Salon.com

Continue Reading