Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 498
  • Last Modified:

Table Cell Wrap-Around Question

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
hefterr
Asked:
hefterr
  • 4
  • 4
1 Solution
 
probsoCommented:
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
 
hefterrAuthor Commented:
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
 
SnarflesCommented:
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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
hefterrAuthor Commented:
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
 
SnarflesCommented:
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
 
hefterrAuthor Commented:
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
 
SnarflesCommented:
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
 
hefterrAuthor Commented:
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
 
SnarflesCommented:
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
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.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now