Solved

Table Cell Wrap-Around Question

Posted on 2010-08-13
9
483 Views
Last Modified: 2012-05-10
Hi,
If I have a table cell with a specific width and text that will wrap around to several lines.  Does the browsers have any logic on how they decide where to break a line or is just based on the number of characters that fit until the width is met.  In other words, will a long word be broken in a wrap around situation or does the browser try to look for spaces to break on?

Or is it the job of the server side application to parse the text and put line breaks in the text (based on some number of characters for the width?)

I seem to have a little trouble with IE(7) when I have a table with a few columns and the first column has text that wraps around.  IE seems to push the width wider before it wraps around the text then all the other browsers.

I had to create (server side) 2 versions of the product items table at the bottom of the page.  one for IE and one for the rest of the browsers with different widths as a result.  See examples below:

Code that accomodates both IE and other browsers (different widths):
http://uat.centrispoint.com/AMorderDetail.cfm?type=hist

Code that looks differently in IE versus other browsers (the problem)
http://uat.centrispoint.com/test_AMorderDetail.cfm?type=hst

Any advise would be appreciated!!
thanks,
hefterr
0
Comment
Question by:hefterr
  • 4
  • 4
9 Comments
 

Expert Comment

by:probso
ID: 33429345
The display is purely done by the browser and different browsers will display in different ways.  All browsers will however attempt to text wrap where there is a space.
0
 
LVL 1

Author Comment

by:hefterr
ID: 33430143
Hi probso,
Thanks for the answer.

Are you aware of IE having trouble with this (exceeding the defined width) when there are multiple columns?

Thanks,
hefterr

0
 
LVL 9

Expert Comment

by:Snarfles
ID: 33440675
Both of your links look the same to me except for one extra line on one of them.

A browser will generally break text at a space on a long line... it wont break a word up. You can manually force line breaks using <br /> which puts a line break in.

If you put in a cell width but then have a really long word or url in it, the browser will expand the cell pretty much no matter what.
0
 
LVL 1

Author Comment

by:hefterr
ID: 33440725
Hi Snarflies,
Take a careful look at the 2 links under IE7.  Notice in the "test_" version, the "Delivery" column (and all that follow) are pushed over about 50 pixels to the right?

In the other version, I have server side code for IE to change the dimension of the table to shorten the first column so when it pushes out, it goes to where I want it.

Under Firefox or Chrome they will all look the same.

hefterr
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 9

Expert Comment

by:Snarfles
ID: 33440748
Hi Hefterr

Sorry I missed the ie part due to it being quite late at night :)

I see what you mean in ie7.

So what is your actual overall objective? How should it look in ie7?

Cheers

Luke
0
 
LVL 1

Author Comment

by:hefterr
ID: 33440986
Hi Snarfles,
I guess my overall objective is to have one set of HTML work in all browsers.  I have to use a separate version for IE as I seems to handle the wrap around issue differently from all the other browsers by expanding the width of the column.

Is there a more accepted approach?

regards,
Rich
0
 
LVL 9

Accepted Solution

by:
Snarfles earned 500 total points
ID: 33441016
Hi Rich

Ultimately if you are going to try and code only using tags and styles that is accepted in all browsers you will be fighting a losing battle.

Instead take a slightly different approach. What I tend to do is develop in firefox untill you are happy with it. This will mean it will look good in 99% of non ie browsers (kind of..). Then  what I do is add css specifically for ie like so

<!--[if IE 7]>

<link rel="stylesheet" type="text/css" href="/css/ie7.css" type="text/css" />

<![endif]-->

In that ie7.css file you then redeclare the classes that need changing for ie7. make sure this line is below where you include your main stylesheet. The above makes everything clean enough.

Sorry if you know all of the above, just thought it worth mentioning.

You also need to remember that no matter what you try to do you are going to have differences and there are some things you just have no control over. I personally wouldn't worry about where text wraps in a table cell unless it detracts visually.

So I guess the above doesn't really answer the question though. Are you wanting all browsers to wrap like in 'test_' or like in the original?

Cheers

Luke
0
 
LVL 1

Author Comment

by:hefterr
ID: 33441385
Hi Luke,
I wanted everything to look like the current "original" - which I added server side code to create different table widths if I detect (via the cgi.referrer) it is an IE browser.

Your technique is fine too if I code the width of the tables in css.  

I guess the bottom line is that IE handles this wrap-around issue differently from all the other major browsers and you have to accompodate for it one way or another.

Q:  How do you use your css technique if Firefox is the only browsers not working like the rest?  It seems only IE allows for you to test within the HTML.  Unless you can do it with Javascript?

regards,
Rich
0
 
LVL 9

Expert Comment

by:Snarfles
ID: 33443067
Hi Rich

I must admit I haven't looked at your site in browsers other than ff 3.6 and ie7. I use FF and develop in FF and then check other browsers and make sure they look the same as FF... not the other way around. FF and other non IE browsers should all generally support the same tags and css as they generally comply with web standards, whereas ie usually never does, which is why you have to add hacks in to get ie7/ie6 to display correctly. You will notice slight differences in how a browser renders code from say firefox to safari to opera, which you have no control over, but they should all generally work and there wont be a huge break anywhere.

One other tip I have is to use the site browsershots.org for cross browser testing. It will take screenshots of a page from different browsers and platforms so you can quickly test a page.

Cheers

Luke
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

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.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

758 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

19 Experts available now in Live!

Get 1:1 Help Now