Solved

Problem with table border with text justify

Posted on 2011-09-08
14
264 Views
Last Modified: 2012-05-12
I had problem with the border of my table when there are text happen to be italics and justify, it pushed my table border.

CSS problem? Or I should change the way my CSS? I had attached the sample html for your reference
aaa.html
0
Comment
Question by:xedge88
  • 5
  • 4
  • 3
  • +2
14 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 36508288
There is no problem in your table. It's the problem of content text change copy all orange of your second row you will find the content is ok.
0
 

Author Comment

by:xedge88
ID: 36508390
I need the words which are Apple to be italics,but is affecting my table border. I do not quite understand your solution, you might want to make the changes in my html and let me see? I am currently viewing this in Internet Explorer.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 36508555
That is one of the oddest pages I've seen.  It looks like the pages that Microsoft Word generates.  I can't tell what you want the results to be.
0
 

Author Comment

by:xedge88
ID: 36508590
This sample html is wriiten by myself using text editor.
You could view the html in IE and firefox to view the border aligmnnent differences.
The results i want it to be is that the right border line of "Apple 1" and "Orange 1" to be align together like what firefox is displaying.

Does anyone have any idea how could it be done?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 36508614
This is what it looks like in Firefox on my computer.
AppleTableAlignment.jpg
0
 

Author Comment

by:xedge88
ID: 36508694
Yup. Firefox is displaying exactly the way i need.
But in IE, it's different.
 This is in IE
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 36509034
What you're seeing there is that IE uses different font rendering than the other browsers.  You should also realize that on screens that are larger or smaller, your alignment will change also because your width will change.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:xedge88
ID: 36509290
I understand that but is there a way in CSS to fix this as per firefox display
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 36512209
I don't believe so because it isn't CSS that is causing the problem, it's the difference in font rendering.  And since there are so many things that will break the alignment anyway, I simply wouldn't be trying to do that.  If in a real situation you needed that kind of precision, I would tell you to use an image because it will be displayed pixel for pixel in all browsers.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 36514792
Other than an image suggested above, if you allow enough padding in each cell for the text (like 5 px left and right) and center the text, the problem will probably go away.  This type of variability almost always comes from trying to cram text into too small a cell with too little or no white space around the text -- which is always a bad practice, as it will break (literally to another line) in some browser or other.  But as the push comes for more crammed text to fit on tablets and iphones, the problem becomes pervasive.
0
 
LVL 8

Expert Comment

by:PagodNaUtak
ID: 36520553
Hi!

This is a bug in IE since IE6 and is still a problem in IE 8. I do not know if this is fix in IE9 can't test it.

The solution is simply this:

Put overflow:auto; and zoom:1 in your paragraph element, as shown below.

<p style="text-align: justify; zoom: 1; overflow: auto;">

Cheers,

Jehova is Great!
0
 
LVL 8

Expert Comment

by:PagodNaUtak
ID: 36520557
Hi!

This is a bug in IE since IE6 and is still a problem in IE 8. I do not know if this is fix in IE9 can't test it.

The solution is simply this:

Put overflow:auto; and zoom:1 in your paragraph element, as shown below.

<p style="text-align: justify; zoom: 1; overflow: auto;">

Cheers,

Jehova is Great!
0
 
LVL 8

Accepted Solution

by:
PagodNaUtak earned 500 total points
ID: 36520568
Another solution without the use of zoom is to replace zoom with display:inline-block as shown below.

<p style="text-align: justify; display: inline-block; overflow: auto;">
0
 

Author Comment

by:xedge88
ID: 36527105
Thanks PagodNaUtak, your solution is great and most relevant.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

863 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

24 Experts available now in Live!

Get 1:1 Help Now