Text wrapping issue with INTERNET EXPLORER 8x

I have a website that displays flawlessly on the various Thunderbird, Chrome & Safari browsers but good old IE8 has some word wrapping issues.

I'll post a link to the page for you to see. The problematic browser is version 8.0.6x, and possibly others.

Can someone please assist with a fix for this problem.
TonyCaboneAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

TonyCaboneAuthor Commented:
Here's the problem page:
http://nehco.com.au/index.php/services

Notice the word wrapping on some of the red headings.
LZ1Commented:
Try adding: word-wrap: break-word; to the h2
jcimarronCommented:
TonyCabone--A Quick glance looks fine on IE9 although I do get the Compatibility View icon in the task bar which usually meant the coding is not quite what IE standards want.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

TonyCaboneAuthor Commented:
OK the break word stops the overlap but breaks the word 'INFRASTRUCTURE' into 2.

What CSS is needed to stop this from happening?
TonyCaboneAuthor Commented:
OK thanks however that doesn't really relate to the problem we're experiencing.

I did however note that W3C says 'Property word-wrap doesn't exist : break-word'


Surely there is a way to make a simple heading display correctly?

I've added an IE Warning to the web page, but this is less than ideal.
LZ1Commented:
I'm seeing a span injected in IE only. In FF, Chrome and Safari there isn't an additional span. The weird thing is, this is only happening in the developer tools.  

I'm not sure why this is happening, but you may want to look at some of your JS to debug.

With that being said, try adding display:block to the span. Since span is not a block-level element it will run on as it needs. Setting the display:block to the span will help it behave.

Try this:
.rt-article-bg h2.title span{display:block;}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.