CSS overrides in IE

Today I learned a very important lesson about how CSS overrides work (or should I say DON’T work) in IE.

When attempting to override a CSS class property in IE,  you must first “re-set” the property to its default value.

This is demonstrated in the following code:

<style>
.textBlock {
     white-space: nowrap;
}

/* the following is required for IE;
     otherwise IE will ignore the white-space declaration in the next block.
*/
.textBlock {
     white-space: normal;
}

.textBlock {
 white-space: pre-wrap !important;
 word-wrap: break-word;    
}
</style>

You can see this in action here.

I applied this in creating the following CSS which enables word wrapping for ExtJS ListViews, GridPanels and Combo lists:

.x-list-body dt {white-space: normal;}
.x-list-body dt em { white-space: pre-wrap !important; word-wrap: break-word !important;}
.x-grid3-cell-inner, .x-grid3-hd-inner{ white-space: normal; }
.x-grid3-cell-inner { white-space: pre-wrap !important; word-wrap: break-word !important;}
.x-combo-list-inner .x-combo-list-item { white-space: normal; }
.x-combo-list-item { white-space: pre-wrap !important; word-wrap: break-word !important;}

Leave a Reply

Your email address will not be published. Required fields are marked *