Solved

Getting the some of the text on one line in a table cell to appear on the next line

Posted on 2014-04-01
3
213 Views
Last Modified: 2014-04-02
I posted this question earlier and received a response. I thought it was the solution, however it did not work across all browsers, only in Firefox and Chrome. It did work in Chrome initially, but not all the time.  It also did not work in Safari or IE. My question is this:

I have the following HTML code:

<div align="center">
<p><table width="60%">
  <tbody style= "line-height:12px; font-size:11px">
  <tr>
<th height="20" bgcolor="#f3f3ea" colspan="4" align="left"><div align="center">UAB Terms</div></th>
</tr>
<tr>
      <td ><div align="center"><a href="/barcelona/uab/calendar/2014-2015/fall-2014" target="_self">Pre-established Fall 2014</a></div></td>
  
    <td ><div align="center"><a href="/barcelona/uab/calendar/2014-2015/spring-2015"target="_self">Pre-established Spring 2015</a></div></td>
    <td ><div align="center"><a href="/barcelona/uab/calendar/2014-2015/spring-2015-regular"target="_self">Regular Spring 2015</a></div></td>
    <td ><div align="center"><a href="/barcelona/uab/calendar/2014-2015/summer-2015"target="_self">Summer 2015</a></div></td>
  </tr>
<tr>
<td colspan="4">
<hr />
</td>
</tr>
</tbody>
</table>
</p>
</div>

Open in new window

Currently, the value in the third column, "Regular Spring 2015" displays like this:

Regular Spring
2015

I would like to have it be displayed like this:

Regular
Spring 2015

How do I get the word "Spring" to appear on the next line? I don't want the contents in the other cells to change, only for this particular cell. I would also like a solution that will work on all browsers.

Thanks.
0
Comment
Question by:geeta_m9
3 Comments
 
LVL 12

Accepted Solution

by:
duttcom earned 500 total points
ID: 39971008
Me again. Try this -

Regular<br />
Spring&nbsp;2015

Adds a single line break after the Regular and keeps Spring and 2015 together.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39971452
Is this for html5 or html4 or xhtml?

I put it through the validator http://validator.w3.org/ all ways and there was an error of some type in each one.  If you can get the code to be valid, you will have a better chance of browsers display your content in a similar fashion.

I would get rid of the p tag surrounding the table to start. That is not needed.  

I also would add the br tag to the other headings as well.  That will force all headings to act the same.  Don't rely on what you see.  You have the width set to a percent and there will be 1000 different widths from 340px wide to over 2000 px wide.
0
 

Author Closing Comment

by:geeta_m9
ID: 39972769
Thanks, that seemed to do the trick. I ended up having to do the same thing to the rest of cell contents as well but now they are all appearing the way I want them to.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

Suggested Solutions

Title # Comments Views Activity
CSS: How do I override in-line styling 11 24
html input 8 42
Asp in server side with Mssql Server 7 4 26
html border input line 7 13
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 …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

791 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