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
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
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.
ASKER
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
Thanks for the answer.
Are you aware of IE having trouble with this (exceeding the defined width) when there are multiple columns?
Thanks,
hefterr
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.
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.
ASKER
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
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
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
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
ASKER
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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
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
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