Solved

HTML CSS, Text ellipsis issue in IE

Posted on 2013-05-10
5
558 Views
Last Modified: 2013-05-12
Dear Experts

I've designed a rather big site that took about 4 months, lots of pages, with lots of dynamic data tables. Everything is working well on my client and tested it in IE7 => IE10, FF20, Chrome, Opera and Safari.

I published the site into production, and again the text ellipsis working on FF, Chrome, Opera and Safari, but IE is totally ignoring it.

Tables CSS:
.tblDyneTable { border-collapse: collapse; width: 600px; table-layout: fixed; }
.tbcDATA { width: 100px; height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

Open in new window

Am I missing something here ?
Many thanks in advance.
0
Comment
Question by:Faraj1969
5 Comments
 
LVL 30

Expert Comment

by:LZ1
Comment Utility
We need a live link or at the very least some rendered HTML and all your CSS.
0
 
LVL 9

Accepted Solution

by:
Ishaan Rawat earned 250 total points
Comment Utility
Try this...


.tblDyneTable {
	border-collapse: collapse;
	width: 600px;
	table-layout: fixed;
}

.tbcDATA {
	width: 100px;
	height: 20px;
	white-space: nowrap;
	overflow: hidden;

	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
}

Open in new window

0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 250 total points
Comment Utility
Ellipsis has never worked correctly or been support to spec in IE..

There is a hyphen hack -ms-text-overflow that might work but don't bet on it IE has been screwing up text-overflow since the beginning of time.

Cd&
0
 

Author Comment

by:Faraj1969
Comment Utility
OK, LZ1 gave me a hint, so i stripped the software down to one dynamic table with css classes, and populated dummy data (not from SQL), and everything seem to be working fine.

Then I tried to build up the page around it, and I found out that it happens only when I get the data from SQL database.

I also tried second solution, and no change.

Does it make a different if dummy data loaded or from SQL ? I don't get it.

Cheers.
0
 

Author Comment

by:Faraj1969
Comment Utility
Hi again and really sorry for the delay, where I'm located right now, the internet is a big issue.

However, after discussing here and with some of my colleagues, I decided to take another route, by creating a span and measuring the span then trimming it and adding the 3 dots.

This cross browser business is causing me a real headache.

Many thanks all.

Cheers
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now