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?
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.
0
LZ1Commented:
Try adding: word-wrap: break-word; to the h2
0
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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?
0
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.
0
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

0

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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.