Solved

HTML CSS, Text ellipsis issue in IE

Posted on 2013-05-10
5
568 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 39155225
We need a live link or at the very least some rendered HTML and all your CSS.
0
 
LVL 10

Accepted Solution

by:
Ishaan Rawat earned 250 total points
ID: 39155584
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
ID: 39155618
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
ID: 39156087
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
ID: 39159984
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

730 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