Solved

Table Cell Wrap-Around Question

Posted on 2010-08-13
9
490 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
[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
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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 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 …
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…

737 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