FIREFOX / IE Word-Wrap, Word-Break, TABLES FIX

One of the most annoying things a developer (who would normally delight in writing code, not futzing with markup) can have is getting rendering issues between different browsers. The two biggest players are of course Internet Exploder and Firefart (as I lovingly like to refer to each). In most cases that's going to take care of 98 percent of your total site traffic.

IE has had a proprietary "word-break" style attribute for a long time, and this made it into the CSS 3.0 spec. But that doesn't necessarily help you with Firefox right now. Firefox literally - (and I consider this completely idiotic, since it's been in their bug database for FIVE YEARS) does not have a reliable CSS style element to force table cell content to break in the middle of a word in order to stop the content from expanding your table / div off the page or over other content on the page. Here's a partial fix, which will work for most tables and browsers. The style declaration (I call it my HardBreak class):

<style>

/* this will force a column to be no wider than 300px,

breaking words in the middle of a long word if necessary. */

.HardBreak

{
width: 300px;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */

}
</style>

You could also replace the .HardBreak class designator above with
td
{
and the style would automatically apply to all TD elements. Remove the width attribute in that case, and set the width in the TD element itself.

The only issue I found with this is that if you want a table column to observe your stated width, you must apply this class to EVERY CELL IN THE COLUMN. Otherwise, it seems to behave nicely in IE, Firefox, and Opera. Also, you may need to remove or comment - out the "white-space" elements in the style, as they can mess up the rendering of lines in Mozilla browsers. I've left them in here, however.

This will force long urls (for example) that have no spaces in them to wrap to the specified width automatically (even breaking in the middle of a word) and not throw the widths of your tables or divs all to hell.

Really, this kind of immature crap from the browser manufacturers has to stop. It ain't rocket science to all get together and agree on CSS handling that works with everybody's product. Forget about the rivalry - what about the damned consumer! And please don't hand me this "Get Firefox, IE sucks" crap. In this case, IE has a working CSS property and Firefox didn't implement it, because it didn't make it into the CSS 2.0 spec - even though its been in their bug database forever. Fortunately, the IE-specific element made it into CSS 3.0 - but you purists will still have to wait.