CSS style word-break:break-all

CSS style

word-break:break-all

table-layout:fixed

CSS Clearfix

http://www.webtoolkit.info/css-clearfix.html

Web Design From Scratch

http://webdesignfromscratch.com/

http://office.microsoft.com/en-us/frontpage/HA011671221033.aspx

IE6 png fix

Javascript method (modified from source: http://homepage.ntlworld.com/bobosola)

function pngfix() {
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (version < 7.0) && (document.body.filters)) {
for (var i = 0; i < document.images.length; i++) {
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length - 3, imgName.length) == "PNG") {
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = " + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\">"
img.outerHTML = strNewHTML
i = i - 1
}
}
}
}

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof (window.onload) != 'function') { window.onload = func; }
else { window.onload = function() { oldonload(); func(); } }
}

addLoadEvent(pngfix);


2. CSS method:
#template
{
_background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../images/guide2.png', sizingMethod='scale');
}

Fixing the IE Overflow Vertical Scrollbar Bug

http://blog.josh420.com/archives/2007/11/fixing-the-ie-overflow-vertical-scrollbar-bug.aspx

http://www.ookii.org/post/the_joys_of_overflowauto_and_crossbrowser_development.aspx

I come up with this solution:

#divInfo {float:left; width:400px; overflow-x:auto; overflow-y:hidden;padding-bottom:20px;}

CSS Float Theory: Things You Should Know

http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

CSS Specificity: Things You Should Know

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Solving 5 common CSS Headaches

http://net.tutsplus.com/tutorials/html-css-techniques/solving-5-common-css-headaches/

Graded Browser Support

Yahoo Graded Browser Support
http://developer.yahoo.com/yui/articles/gbs/

The IE6 equation
http://24ways.org/2008/the-ie6-equation

CSS Compatibility and Internet Explorer

http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

Make use of CSS Rule Objects

Typically, we define CSS in an external stylesheet and then use it.

In previous project, I am required to change the rules defined in CSS dynamically. We normally add or remove rules most of the time and seldom change them. In this case, we should use CSS Rule to deal with it.

CSS Rule Object provide the ability to access and modify rules defined in CSS.

Since IE and Firefox have different implementation, we first look at how to use it:

Browser	Usage
Internet Explorer	document.styleSheets[0].rules[0]
Firefox	document.styleSheets[0].cssRules[0]

Let's modify a CSS Rule to see how powerful it is.
For example, we have one stylesheet imported and the content is shown below:

p{ font-size:10px; }

You want to change this rule so that content inside tag will be in font-size:12px. Here's the code:

var cssSheet=document.styleSheets[0]; var rule=cssSheet.cssRules? mysheet.cssRules[0]: cssSheet.rules[0]; // check compatibility between IE and Firefox rule.style.fontSize="12px"; //remember in javascript we have to use fontSize instead

This is all the code and it is very simple. We still have a better solution in this case. It is the use of Javascript Framework. I personally recommend you to use JQuery.

Here is where you can find JQuery:
http://jquery.com/

I'll talk about it later.

Reference:

http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml